Accepted answer

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

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

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


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


Here is a detailed description about tooltip formatter

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

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


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:


Related Query

More Query from same tag