Tom's BlogColumn 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 .
The demo chart presents a monthly average temperature during a year in several cities around the world.
Tooltip value presents bare number, e.g., 14.5 and would like to have it presented like 14.5°C.
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
°Csuffix - 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.
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:.2f}°C</span><br/>'
}