Highcharts allows to customise lots of component. Chart label title and subtitle (but also legend, xAxis.title, yAxis.title, and credits) share some common properties i.e:

  • x: used for horizontal positioning for the labels
  • y: used for vertical positioning for the labels
  • align: used for horizontal alignment for the labels
  • verticalAlign: used for vertical alignment for the labels
  • floating: used for floating effect of a label position
  • margin: used to set margin between the label and the side of the plot area adjusted to it.

Coordinate directions for the labels' x and y positioning

Coordinate directions for the labels' x and y positioning

There are a few examples showing how we can customise title and subtitle positioning. We start from default positioning (example taken from Highcharts demo page)

Title default

title: {
    text: 'Monthly Average Temperature',
},
subtitle: {
    text: 'Source: WorldClimate.com',
}
The title is shifted to the left, whereas the subtitle is shifted to the right

Title subtitle 1

title: {
    text: 'Monthly Average Temperature',
    align: 'left'
},
subtitle: {
    text: 'Source: WorldClimate.com',
    align: 'right',
    y: 14
}

Please note that I changed subtitle's y position to 14 in order to make title and subtitle appear on the same line. Value of y position may be different for different fonts or font sizes.

The subtitle is floating

Title subtitle 2

title: {
    text: 'Monthly Average Temperature'
},
subtitle:{
    text:'Source: WorldClimate.com',
    floating: true,
    x: -45
}

Setting floating to true for subtitle causes the label position to have no effect on the adjacent plot area's boundary (top chart with no floating property vs. bottom chart with floating property set to true for subtitle).