Customization of title and subtitle in Highcharts


In this post, I am sharing how to customize title and subtitle in Highcharts JavaScript chart library.

Highcharts allows customizing lots of components. 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 the floating effect of a label position
  • margin: used to set margins 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

The following examples show how we can customize title and subtitle positioning. We start from default positioning (sample comes from Highcharts demo page)

Title default
Title default
title: {
  text: 'Monthly Average Temperature',
},
subtitle: {
  text: 'Source: WorldClimate.com',
}

Title left shift

The title is shifted to the left, whereas the subtitle to the right

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

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

Floating subtitle

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

Setting floating to true for subtitle causes the label position not to affect the adjacent plot area’s boundary (top chart with no floating property vs. bottom chart with floating property set to true for subtitle).


Tags:

#chart #highcharts #javascript


You may also be interested in:



comments powered by Disqus