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'
},

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'
},

• javascript
• jquery
• highcharts
• position
• title

4 Answers 4

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) }
...
}); 

Here is how we can now set the title below a chart without using fixed coordinates nor JQuery.

title: {
        text: 'My title',
        align: 'center',
        verticalAlign: 'bottom',
        margin: 50,
        floating: true,
        style: {
          // margin: '50px', // does not work for some reasons, see workaround below
          color: '#707070',
          fontSize: '12px',
          fontWeight: 'normal'
          textTransform: 'none'
        }
      }

Because I didn't manage to get the margin property working on the title itself, I used the workaround proposed by @AleB above:

chart:{
        marginBottom : '50' // this to make room for title under axis
      }

Here is a jsfiddle.

If you don't want to set the marginBottom as proposed by @Andre above, you can also use the size attribute in the series specification.

series: [
  {
    name: 'Categories',
    data: data,
    size: '60%'
  },
]

This makes the size of the chart smaller so that the bottom aligned title does not overlap with it.

You need to add the property "floating" in the title object.

According to document, verticalAlign property is: The vertical alignment of the title. Can be one of "top", "middle" and "bottom". When a value is given, the title behaves as if floating were true.

 {
        title: {
            text: "Your title text",
            floating: true,
            verticalAlign: "bottom"
        }
 }

Document link: https://api.highcharts./highcharts/title

JSFiddle for position title under chart: JSFiddle