Highcharts library allows for a great number of customizations. One of the most common customizations problem is to change tooltip or a column labels.

I would like to show you some examples of possible customizations you can add to tooltip and column labels. The examples use demo chart from the Highcharts demo page.

Highcharts demo

The demo chart presents monthly average temperature during a year in several cities around the world.

How to: add symbol to the tooltip value?

Tooltip value presents bare number e.g. 14.5 and would like to have it presented like 14.5°C.

Highcharts label formatting

Add the following section to the chart options:

tooltip: {
    valueSuffix: '°C'
}

You can also prefix value by adding valuePrefix option e.g. if you present some prices you could use: valuePrefix: '$'.

We can also affect tooltip point formatting by setting pointFormat in the tooltip section. The following change will:

  • add °C suffix
  • change formatting of a number to have two decimal points (two decimal points format:.2f)
  • change color of series name (city) and value to the same (series) color.

Highcharts label

tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:.2f}°C</span><br/>'
}

See also: