Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue

Question

Highcharts 3.0 seems to have floating point number accuracy issue when displaying tooltips on a pie chart. I was able to recreate the exact error by using one of the highcharts demo pie chart - Pie with Legend. Click on "Edit in JsFiddle" to edit the javascript.

Inside the javascript panel, look for the series and data section. Keep the Firefox and IE data and discard the rest of data, so we can focus on just 2 slices of pie. The two data chucks don't have percentage adding up to 100, so highcharts will recalculate percentages for us. Click the Run button on top, mouse over the slices, the percentages are very accurate with maximum number of decimals. But wait, look at the javascript tooltip option, highcharts is clearly ignoring the "percentageDecimals: 1" setting. This is issue #1.

Now let's manually edit the data percentages as follows: [ 'Firefox', 57.7 ], [ 'IE', 42.3] So they do add up to exactly 100.0. Hit Run button again, the slices tooltips display 'Firefox: 57.0000000000001%' and 'IE: 42.3%'. It looks like a percentage recalculation was done regardless if the percentages add up to 100 or not, thus introducing a small floating point inaccuracy here. This is issue #2. Had the "percentageDecimals" rounding worked in this case, this issue could have been disguised.

I would like to know: * Anyone else seeing the same issue and having some sort of work-around? * Can highcharts respond to these issues and let us know if they're known bugs?

I don't know why there is 'percentageDecimals' but of course, there is not such option in Highcharts. Regarding inaccuracy, try in JS calculate 0.1 + 0.2 and watch effects. What can I advice is to remove pointFormat and use just tooltip.formatter. — Paweł Fus, Apr 10 '13 at 11:12
Thanks Pawel. I was able to use tooltip.formatter = function() { return this.point.name + ': ' + Highcharts.numberFormat(this.percentage, 1) + '%'; } — Billy Reverb, Apr 10 '13 at 15:13

score 16 · Answer 1 · answered May 10 '13 at 02:52

Answering this question based on Billy Reverb's comment:

Just replace this attributes:

tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
    percentageDecimals: 1
}

for this:

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

score 14 · Answer 2 · answered Aug 16 '13 at 12:37

14

A simpler solution is to use

{point.percentage:.1f}%

in the pointFormat string

answered Aug 16 '13 at 12:37

Steve Harris

3,590
19
22

Genious, just what I was looking for! .1f means 1 floating place. f means float. – craig1231 Oct 24 '13 at 09:50

score 2 · Answer 3 · answered Sep 10 '13 at 17:00

2

For me the upvoted solution didn't work:

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

but this did:

this.percentage.toFixed(1)

answered Sep 10 '13 at 17:00

edelans

8,479
4
36
45

score 1 · Answer 4 · answered Nov 07 '15 at 15:55

Before you go head-desk-head-desk, while trying to format the percentage.

Here are some ways to do it:

(Math.round(this.point.percentage*100)/100) + ' %'
Highcharts.numberFormat(this.percentage, 1) + '%'
this.percentage.toFixed(1)
{point.percentage}% or {point.percentage:.1f}%

I often use #4 in tooltips and labels and when not using a custom formatter function.

Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue

4 Answers4