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
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 label formatting
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 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 label
Highcharts label
tooltip: {
  pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:.2f}°C</span><br/>'
}

Tags:

#chart #highcharts #javascript

You may also be interested in:


comments powered by Disqus