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 tooltip customization. I have downloaded the flags of the plotted countries and have put them inside the img folder. We will first check for the country that is being hovered—the category at the xAxis. Based on country, we will show the respective flag along with other formatting:

tooltip: {
  formatter: function() {
    var img = '', 
      string = '';
    if ( 'United States' == this.x ) {
      img = 'img/usa.png';
    } else if ( 'China' == this.x ) {
      img = 'img/china.png';
    } else if ( 'Russian Federation' == this.x ) {
      img = 'img/russia.png';
    } else if ( 'Great Britain' == this.x ) {
      img = 'img/uk.png';
    } else if ( 'South Korea' == this.x ) {
      img = 'img/korea.png';
    }
       return '<img src="' + img + '" alt="' + this.x + '" />';
  }
   useHTML: true
}

We used the same formatter() method that we have used in the previous chapters. Inside that method, we initialized two variables, img and string, to hold the flag image path and the final HTML string respectively. After that, we ran some conditions to determine the current xAxis category, that is, the country so that we could assign the img variable path to the correct flag. Finally, an HTML image tag containing the country flag has been returned to ensure that things are working the way they should be, as shown in the following screenshot:

If you hover over any column, the country flag will be shown in the tooltip based on the current x axis category.

It's time to include some more HTML to define the proper structure of the tooltip, as using the formatter() method completely overrides the default formatting:

string += '<div class="country-flag"><img src="' + img + '" alt="' + this.x + '" /></div>';
string += '<div class="medal-info">';
string += '<h4>' + this.x + '</h4>';
string += '<p><span class="medal-circle" style="background:' + this.series.color + '"></span>' + this.series.name + ': ' + this.y + '</p>';
string += '</div>';
return string;

That's a pretty simple HTML structure. Instead of returning a simple string containing the image element, we are appending the HTML code, bit by bit, to the string variable to return it at the end. The flag image is contained in a div tag of class country-flag and the other information is enclosed in a div tag of class medal-info. We referenced the country name and its medal count using this.x and this.y, respectively. For determining the series name, that is, the medal type, we have used the this.series.name property.

For showing a medal before the medal count, we used a span tag of the class medal-circle. To show the proper color, we added the style attribute to define its background color, whose value is determined by the this.series.color property.

General styling of all these tags is defined in the page header inside the style tag:

.country-flag {
  display: inline-block;
  margin-right: 6px;
  vertical-align: top;
}

.medal-info {
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  display: inline-block;
}

.medal-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 12px;
  margin-right: 4px;
}

.medal-info h4 {
  font-weight: bold;
  color: #222222;
  margin: 0 0 6px;
}

.medal-info p {
  margin: 0 0 6px;
}

All of this code will create a nicely formatted tooltip:

The most important point we learned by following this example is that we can define our own markup for various Highcharts components, and define their styling based on their class names outside of the Highcharts API.