Customize tooltip and format the number to 2 decimal places of highcharts

Question

I am using Highcharts graph to display a pie chart. I want to change the tooltip to display the actual data field along with the series name in place of the percentage value.

Here is the sample at jsFiddle

If you check the above sample you will find 2 things

1. Tooltip is : pointFormat: '{series.name}: {point.percentage}%' i.e.

   Browser share: some-percentage-value

I want to show:

Browser share: 40 (data value instead of percentage) 

2. Next is the the display text for each section in the pie. One can see n number of decimals making the graph look very ugly.

I want to show numbers only upto 2 decimal points like percentageDecimals: 1 used in tooltip.

I tried few things for 1st like series.data which returns an array of objects. Also series.data[0]. But no success so far

How can I do both these things?

Answer 1

You can use Format Strings to help you format numbers and dates.

x Decimal Places

View the JSFiddle

// point.percentage = 29.9345816 pointFormat: '{point.percentage:.0f}%' // returns: `30%` - (rounds to nearest) pointFormat: '{point.percentage:.1f}%' // returns: `29.9%` pointFormat: '{point.percentage:.2f}%' // returns: `29.93%` pointFormat: '{point.percentage:.3f}%' // returns: `29.935%` 

Thousands separator

View the JSFiddle

// point.percentage = 1029.9 {point.percentage:,.0f} // returns: `1,030` {point.percentage:,.1f} // returns: `1,029.9` 

---

Read More in the documentation:

Documentation: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

Answer 2

You can change it so it shows the data value instead by modifying your tooltip pointFormat from pointFormat: '{series.name}: <b>{point.percentage}%</b>', to pointFormat: '{series.name}: <b>{point.y}%</b>',

You can round the numbers by using the Highcharts.numberFormat() function like so in your formatter:

formatter: function() {     return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %'; }