Highcharts - Position title under chart

highcharts, javascript, jquery, position, title

Solution

See this fiddle : Fiddle

I moved the title to desired location by giving it a fixed y-coordinate.

$(function () {
$('#container').highcharts({
    chart: {
        plotBorderWidth: 1,
        marginLeft: 80,
        marginBottom : 100 // this to make room for title under axis
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: 'My custom title',
        align: 'center',
        y: 340 //  this to move y-coordinate of title to desired location
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

If you dont want to use fixed numbers to position your title (e.g maybe you have charts that dynamically change in size), no worries, you can feed it a formula or function, for example:

$('#container').highcharts({
...
    title: { y : $('#container').height() * 0.85 } // this will position the title with 85% margin from the top.
...
});

or

function myTitlePosition(params){ //return some custom value in here }

$('#container').highcharts({
...
    title: { y : mytitlePosition(params) }
...
});

Problem

Is it possible to position the title directly under the chart, if I set it to verticalAlign: 'bottom' its not place directly under the chart but at the bottom and that's not what I'm after. ``` title: { enabled: true, text: 'Foo', verticalAlign: 'bottom', align: 'left' }, ```

Original source