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

39
votes

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?

4
highcharts

4 Answers

65
votes

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

64
votes

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) +' %';
}
2
votes

Here is a detailed description about tooltip formatter http://api.highcharts.com/highcharts#tooltip.formatter

this.point (not shared) / this.points[i].point (shared)

And try this.points[i].point if this.point didn't work

0
votes

Simplest approach to show the actual data values is to omit the formatter function. The tooltip will default to show the actual data.