Highcharts: Format all numbers with comma?

JavascriptHighcharts

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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

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

See this JSFiddle example.

Solution 2 - Javascript

This way worked with me.

I configured in yAxis option.

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

Solution 3 - Javascript

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

Solution 4 - Javascript

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}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRichardView Question on Stackoverflow
Solution 1 - JavascriptHalvor Holsten StrandView Answer on Stackoverflow
Solution 2 - JavascriptHien NguyenView Answer on Stackoverflow
Solution 3 - JavascriptAlia AnisView Answer on Stackoverflow
Solution 4 - JavascriptMohammad MohammadiView Answer on Stackoverflow