Number formatting in Highcharts with Custom Tooltips

Highcharts is a fantastic library for drawing interactive charts on your website. I’ve been using it extensively over the past year or two. There are loads of extensibility points, if you don’t like the default behaviour or need to change it slightly to fit your requirements, then it’s more than likely Highcharts has you covered. Highcharts provides some very sane defaults, however the more you use it and want to push its boundaries the more you’ll have to do yourself.

You can follow along and see examples of the below Highcharts configuration in this plunk

Case in point - I’ve been needing to customise the ToolTips (when you hover over a data series). On taking control from Highcharts, by way of a formatter function, I had lost all the nice currency formatting highcharts provides “out of the box”. For example the below (before) allows me add a GBP Currency symbol before the value and ensure all values are to 2 decimal places

tooltip: {
    // Nice and easy number formatting
    valuePrefix: "£",
    valueDecimals: 2,
    shared: true
}

But doesn’t give me much flexibility when I want to properly customise the tooltip. Highcharts’ tooltips actually support *most* html (check the docs) so you can do some pretty cool stuff in the tooltips.

However, for the sake of demonstration say I wanted to customise the tooltip, I want to share the tooltip (for all series) and add another line of text under the title, some text before and after the actual value. This is where Highcharts Formatters come in. Simply put its a property which is a function you supply. In that function (takes no parameters) the this keyword holds various bits of information about the point(s) which are being hovered.

The below tooltip configuration definition shows what I’m trying to achieve

tooltip: {
          formatter: function(){
            var formatStr = "<b>Some money</b><br/><span>Here's the breakdown of the losers...</span><br/>";
            
            for (var i = 0; i < this.points.length; i++) {
                    var point = this.points[i];
                    
                    // Highcharts wont format the numbers (point.y) once we've taken control of the tooltip
                    formatStr += '<span style="color:' + point.color + '">●</span>' + point.series.name + ' lost: <b>£' + point.y + '</b><span> per person</span><br/>';
            }
            
            return formatStr;
          },
          shared: true
        },

That’s good, however if you view the example and un-comment the marked code (the code above) you’ll see how “unformatted” that looks. It wont perform rounding, it wont put in “thousands separators” and we’d have to do the decimal place stuff ourselves.

Now, I know that this functionality exists in Highcharts and I’d prefer not to have to write this again myself. So I went digging through the API documentation and couldn’t find a way to get access to the code which does number formatting. Next step - downloaded the source and started wading through that, it helps if you know where to look - Highcharts is a big, mature and flexible library so there’s A LOT of code. A couple of minutes later I had found what I was looking for… a function appropriately named Highcharts.numberFormatter.

The parameters for Highcharts.numberFormatter look like this:

Highcharts.numberFormatter(value, decimalPlaces, decimalPoint, thousandsSeparator);

As a UK citizen we usually see numbers like this: £123,000.00 Which is one hundred and twenty-three thousand pounds, zero pence

The call to make the number look like the one above will look like:

Highcharts.numberFormatter(123000, 2, '.', ',');

I’ve re-used code in Highcharts without having to re-write it myself - very happy!

Check out the plunker and comment/un-comment out the marked lines to see the effect they have on the text in the tool tips

Give me a shout on twitter if you’ve got any questions/comments.