Customize tooltip and format the number to 2 decimal places of highcharts
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
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) +' %';
}
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