19

I am trying to figure out if it is possible to display the percentage for each pie item inside the actual pie item for highcharts? Example of what I mean is something like this:

https://developers.google.com/chart/interactive/docs/gallery/piechart

arogachev
  • 33,150
  • 7
  • 114
  • 117
ryanzec
  • 27,284
  • 38
  • 112
  • 169

3 Answers3

43

You may want to look @ dataLabels.formatter. this.percentage option is available for pie

Also dataLabels.distance can be set to a negative value for dataLabels inside the pie.

Pie with percentage values inside @ jsFiddle

Jugal Thakkar
  • 13,432
  • 4
  • 61
  • 79
8

Its suprisingly easy. In your tooltip or dataLabels section change your format.

FROM:
  format: '<b>{point.name}</b>: {point.y:.1f} Rs.',
TO:
  format: '<b>{point.name}</b>: {point.percentage:.1f} %',
Mark
  • 2,522
  • 5
  • 36
  • 42
1

Try this code. It works for me:

  'labelFormatter':function () { 
       var total = 0, percentage; 
       $.each(this.series.data, function() { 
          total+=this.y; 
       }); 

       percentage=((this.y/total)*100).toFixed(1); 
       return this.name+' '+percentage+'%'; 
    }
Sarvar Nishonboyev
  • 12,262
  • 10
  • 69
  • 70