highcharts tooltip format millions billions

Question

I want to display couple of points on a highcharts line chart which are big numbers.

e.g. 100,000, 10,000,000, 1,000,000,000

When I display these, the y axis automatically formats the number into 100 k, 10 M, 1,000 M etc but the tooltip still shows the actual big number.

Is it possible to show 1,000,000,000 as 1 B or 1000 M in the tooltip itself.

Example - http://jsfiddle.net/ynCKW/1/

I am trying to play with the numberFormat function but I dont think its the right function.

Highcharts.numberFormat(this.y,0)

Do I have to write a custom function which would do this formatting in the tooltip?

Possible duplicate of http://stackoverflow.com/questions/16019645/highchart-with-numberformat-unit — Jasper de Vries, Apr 28 '13 at 06:57
I don't see the relevance of the fiddle to the question as it has "small" values, and the question involves large values. — Nils, Apr 28 '13 at 08:24
I had modified the small value fiddle with large values. I am not sure why it went back to small values for you. I have updated the link http://jsfiddle.net/ynCKW/1/ — Sumedh, Apr 28 '13 at 08:31
@JasperdeVries - I got my answer from the link you provided. Can you add the link as an answer to this question so I can accept it. — Sumedh, Apr 29 '13 at 20:39

Paweł Fus · Answer 1 · 2018-02-28T16:23:51.833

You can use the same logic as implemented in Highcharts core:

    tooltip: {
        formatter: function () {
            var ret = '',
                multi,
                axis = this.series.yAxis,
                numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
                i = numericSymbols.length;
            while (i-- && ret === '') {
                multi = Math.pow(1000, i + 1);
                if (axis.tickInterval >= multi && numericSymbols[i] !== null) {
                    ret = Highcharts.numberFormat(this.y / multi, -1) + numericSymbols[i];
                }
            }
            return ret;
        }
    },

And jsFiddle: http://jsfiddle.net/ynCKW/2/

EDIT for Highcharts v6:

We can call build-in method, which should be easier to maintain: http://jsfiddle.net/BlackLabel/ynCKW/104/

    tooltip: {
        valueSuffix: '',
        formatter: function () {
            var axis = this.series.yAxis;

            return axis.defaultLabelFormatter.call({
                axis: axis,
                value: this.y
            });
        }
    },

In your JSFiddle demo, shouldn't the last tooltip display `1G` rather than `1,000M`? — Dónal, Oct 29 '14 at 15:53
According to the question and rendered yAxis labels - no it shouldn't. — Paweł Fus, Oct 31 '14 at 14:06
Method is available, but it's bound to Axis, not Tooltip class - see docs: https://api.highcharts.com/highcharts/yAxis.labels.formatter. Still, we can call that method: http://jsfiddle.net/BlackLabel/ynCKW/104/ - editted answer, thanks! — Paweł Fus, Feb 28 '18 at 16:24

score 2 · Answer 2 · answered Jul 26 '16 at 16:55

Piggybacking off @Pawel Fus, a slight tweak allows you to have negative currency values as well but with the negative outside the $ (i.e. -$100K versus -$-100k).

function () {
    var isNegative = this.value < 0 ? '-' : '';
    var absValue = Math.abs(this.value);
    return isNegative + '$' + this.axis.defaultLabelFormatter.call({
        axis: this.axis,
        value: absValue
    });
}

Here is a jsFiddle: http://jsfiddle.net/4yuo9mww/1/

highcharts tooltip format millions billions

2 Answers2

Linked