HighChart Shared Tooltip Number Formatting

Question

I'm using HighCharts JS for the very first time. So far, I'm very impressed. I'm charting multiples series and using a shared tooltip. The numbers in the shared tooltip are correct, but they are not formatted as I would like. For example, I'm seeing 9876 instead of 9,876.

I know that I can use the formatter to completely customize the tooltip. Instead of completely redoing the tooltip, I'd just like to format the number and keep the existing look and feel.

Question: Is is possible to specify a format for the number(s) in the tooltip without writing a custom formatter?

Answer 1

Unfortunately that's not possible, I am afraid: the default tooltip formatters are somewhat hidden inside the Point and Tooltip objects and do not provide access to the number formatting.

However, you may want to globally override the default implementation of a Point's tooltipFormatter with something of your own, e.g.

Highcharts.Point.prototype.tooltipFormatter = function (useHeader) {
    var point = this, series = point.series;
    return ['<span style="color:' + series.color + '">', (point.name || series.name), '</span>: ',
        (!useHeader ? ('<b>x = ' + (point.name || point.x) + ',</b> ') : ''),
        '<b>', (!useHeader ? 'y = ' : ''), Highcharts.numberFormat(point.y, 0), '</b>'].join('');
};

This implementation is the same as the default one except for the Highcharts.numberFormat call on the last line, which will do your number formatting.

Keep in mind that such a change will apply to all your charts.

Answer 2

Use pointFormatter to format shared tooltip. This is available since version 4.1.0:

tooltip: {
    shared: true,
    pointFormatter: function() { 
        return '<span style="color:' + this.series.color + ';">●</span> ' + this.series.name + ': <b>' + numberFormat(this.y) + '</b><br/>'; 
    }
}