Highcharts: Format all numbers with comma?

Question

I'm using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands.

Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same.

For example, in this chart, the number should be 2,581,326.31 but otherwise exactly the same.

enter image description here

How can I do this?

I tried adding:

    tooltip: {
        pointFormat: "{point.y:,.0f}"
    }

But this got rid of the nice circle and series label in the tooltip - I'd like to keep that. And ideally I'd prefer to use a single option to set global number formatting, across the whole chart.

I would try with a custom lang, see http://stackoverflow.com/questions/7419358/highcharts-datetime-localization — , Mar 23 '15 at 11:53

Halvor Holsten Strand · Accepted Answer · 2020-12-14T07:56:47.850

138

This can be set with the thousandSep (API) global option.

Highcharts.setOptions({
    lang: {
        thousandsSep: ','
    }
});

See this JSFiddle example.

edited Dec 14 '20 at 07:56

answered Mar 23 '15 at 11:54

Halvor Holsten Strand

19,829
17
83
99

3

Some might find the `decimalPoint` option related and useful. [See API](http://api.highcharts.com/highcharts#lang.decimalPoint). – Halvor Holsten Strand May 19 '15 at 23:15
3

The default thousands separator looks to be a space now. Has something changed in their API? Even their example is showing it as a space instead of a comma in the tooltip. http://jsfiddle.net/highcharts/rmTWS/ – DMTintner Apr 18 '16 at 07:44
1

Space is default from Highcharts 4.1.0. Before that it was comma. "Use space as the default thousands separator. It is culture independent and ISO standard." https://github.com/highcharts/highcharts/commit/6cc2a45c7c4ca0cc9bd61f9ad665b71fea9f4a15 – Halvor Holsten Strand Apr 18 '16 at 08:31
1

Thanks! Now how do you set the y-axis with commas too? – Crystal Dec 12 '16 at 19:47
5

Odd.. this works in your jsFiddle but it doesn't work in my code... I still get spaces. – geoidesic Dec 23 '16 at 11:51
1

Found the solution to my problem here: http://stackoverflow.com/questions/32265675/how-to-set-lang-property-in-highcharts-using-angular-js – geoidesic Dec 23 '16 at 11:59

score 6 · Answer 2 · answered Mar 10 '20 at 09:37

6

This way worked with me.

I configured in yAxis option.

yAxis: {
  labels: {
    formatter: function() {
        return Highcharts.numberFormat(this.value, 2);
    }
  }
}

answered Mar 10 '20 at 09:37

Hien Nguyen

24,551
7
52
62

Thanks I was looking for this through all the answers cause I was interested in display on the yAxis – Nick Constantine Mar 03 '21 at 12:47
1

After around 4 hours of searching on the internet, I got this answer that worked for me. Thanks @Hien – saad siddiqui Oct 25 '21 at 13:36

score 4 · Answer 3 · answered Aug 15 '18 at 11:25

4

In case you want to show numbers without commas and spaces.

eg. by default 9800 shows as 9 800.

If you want 9800 to be shown as 9800

you can try this in tooltip:

    tooltip: {
     pointFormat: '<span>{point.y:.f}</span>'
   }

answered Aug 15 '18 at 11:25

Alia Anis

1,355
11
7

That needs to be adjusted for shared tooltips. – Dan Dascalescu Jan 21 '19 at 08:02

score 0 · Answer 4 · answered Jan 28 '21 at 11:45

This way work for me.

I use Angular 10 and I did this for Tooltip and yAxis.

for yAxis use numberFormat:

 labels: {
              format: '{value}',
              style: {
                color: Highcharts.getOptions().colors[0]
              },
              formatter: function() {
                return Highcharts.numberFormat(this.value, 3);
            }
            },

and for Tooltip :

{point.y:.f}

Highcharts: Format all numbers with comma?

4 Answers4

Linked