Show Percentage Lables in Charts

  • 2
  • Question
  • Updated 2 years ago
  • Answered
Charts are awesome.  You can even export them to put in your powerpoint slides to impress management.  COOL. 

However the default charts only show the numbers associated with the chart section when you mouseover it.  You can't mouseover the picture in your powerpoint slide.  Management can see that the slice is really 45%.  BOO.  

Can we add numbers to the chart lables so they show all the time and get included in downloaded pictures?  
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb

Posted 4 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I'm glad you asked!  

This sort of formatting details is where the Highcharts API provides pretty complete flexibility for customizing chart output.   You get to this customization by adding a "before render snippet".  Here is how.

1. Create a javascript resource of type "inLine Snippet"  
Give the snippet a name you will remember.  I used chartPercentages.



Here is the code I used in the snippet. 

var chartObj = arguments[0],
$ = skuid.$;

$.extend(true, chartObj.plotOptions,{
pie: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.name + ' ' + this.percentage.toFixed(2) + '%';
}
}
}
});

$.extend(chartObj,{
tooltip: {
enabled:false
}
});

What this code does is add a custom dataLabel formatter to my pie chart that shows point name and point percentage.   The second section of the code removes the hover feature from the chart.  The data now shows all the time. 


2.  Change the chart properties.

Look for the advanced tab and the "Before Render Snippet" property.  Add the name you used at the beginning of step 1. 


Finished Product! 

This will give you a chart that looks like this: 






Note:  The Highcharts API is documented here: http://api.highcharts.com/highcharts  Lots of good stuff there,  and lots of interactive examples. 
(Edited)
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Yay! Thank you for introducing the world of highcharts to me! And it's awesome how flexible and smooth the integration is.
Photo of Anna Orias

Anna Orias

  • 1,468 Points 1k badge 2x thumb
Great! Do you have code to show the value of a count too?
Photo of Will Koscielny

Will Koscielny

  • 212 Points 100 badge 2x thumb
@Rob Hatch What values would need to be adjusted to have this for count as Anna asks? Or if we wanted this to work in other types of Charts.
Photo of Anna Orias

Anna Orias

  • 1,468 Points 1k badge 2x thumb
Series List>Series Tab
Aggregate Function = "Count"
Split Type = Template.
Split Template is something like: {{Contact}} TOTAL =