Highcharts pie charts showing 2 percent symbols

Question

I have some pie charts on my page showing percentages. For my series data I am just passing in pairs of strings and integers, like ['GroupA', 10], ['GroupB', 70] . It correctly splits up the sections mathematically, but for some reason it's adding 2 percent symbols instead of just 1.

Actual result: "GroupA%: 12.5%"

Expected result: "GroupA: 12.5%"

I was looking in the Highcharts documentation for a way to configure this in the options but didn't find anything. It seems like this should not be the default behavior but it is. How can I set it to just display one percent (%) symbol at the end?

Answer 1

Since you have not provided your configurations, the issue maybe due to custom configurations happening.

The expected result Highcharts configurations can be found below.

 Highcharts.chart('container', { chart: { type: 'pie' }, plotOptions: { pie: { dataLabels: { enabled:true, distance: '30%', formatter: function() { console.log(this.point.name); return (this.point.name +" "+ this.point.y+"%"); } } } }, series: [{ data: [ ['GroupA', 10], ['GroupB', 70], ] }] });

The working fiddle can be found here.

Answer 2

After revisiting my code I found I had an HTML tag in my options that was causing the 2 % symbols to show up. It was taken from some sample code I found online.

options = {
            plotOptions: {
                pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}%</b>: {point.percentage:.1f} %' } }
            },
        };

I'm just showing the relevant code here. My format was like this:

format: '<b>{point.name}%</b>: {point.percentage:.1f} %'

I had to change it to this:

format: '<b>{point.name}</b>: {point.percentage:.1f}%'