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.

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.

Answer 1

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

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

See this JSFiddle example.

Answer 2

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>'
   }

Answer 3

This way worked with me.

I configured in yAxis option.

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

Answer 4

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}