All Articles

Column or tooltip label change in Highcharts

Highcharts library allows for a high number of customizations. One of the most common customizations problems is to change tooltip or a column label. In this post, I am sharing a quick way of changing column or tooltip label in Highcharts.

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

highcharts-demo

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

How to: add a 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-1

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 the formatting of a number to have two decimal points (two decimal points format:.2f)
  • change the color of the series name (city) and value to the same (series) color.

highcharts-2

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