O'Reilly logo

Highcharts Essentials by Bilal Shahid

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Formatting the tooltip with HTML

In the previous chapter, we wrote a considerably large amount of code to modify the output of the tooltip. In this section, we will take that knowledge even further by introducing the country names in the tooltip, using as an example the Olympics medal table from Chapter 2, Column and Bar Charts.

A simple thing we can start with is to change each series color based on the type of medal it represents, as shown in the following code:

series: [{
  name: 'Gold',
  data: [46, 38, 24, 29, 13],
  color: '#cc9900'
}, {
  name: 'Silver',
  data: [29, 27, 26, 17, 8],
  color: '#cccccc'
}, {
  name: 'Bronze',
  data: [29, 23, 32, 19, 7],
  color: '#cd7f32'
}]

The preceding code will give the following result:

We can now actually begin with the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required