percentage % in HTML5 pie charts


Wow, you'd think it would be easier to get % or data labels in the pie slices!  Unless I'm missing something, you have to have a function as a custom property.  I've tried it, yet it won't display the % in the HTML5  pie slices.  Here's the code in the jrxml file:

<hc:chartProperty name="plotOptions.pie.dataLabels.formatter">
    <hc:propertyExpression><![CDATA["function() {return Math.round(this.percentage*100)/100 + ' %';}"]]></hc:propertyExpression>

I've also got

<property name="" value="true"/>

but at the local level in JasperStudio 6.4 not sure that is relevant.

The pie chart is showing in Studio, just not with the %. Anybody know what I'm missing?

jsutherland_1's picture
Joined: May 31 2017 - 3:21pm
Last seen: 3 days 15 hours ago

The answer below does help, and I appreciate the response.  Using the .format option with:

<hc:chartProperty name="plotOptions.series.dataLabels.format" value="{} {point.percentage:.0f} %;"/>

It does show the name and % as part of the data label.  My intent/hope though is to keep the data label as the name only and put the % in the pie slice itself.  Has anybody successfully done that?

jsutherland_1 - 10 months 1 week ago

I've just about got the effect I want by adding:

<hc:chartProperty name="plotOptions.pie.dataLabels.distance" value="-50"/>

This puts the name and % together, and builds the label into the chart, maximizing the available chart space.

jsutherland_1 - 10 months 1 week ago

1 Answer:


On a dashlet (on a dashboard), I use series.dataLabels.format => {} : {point.percentage:.1f}%

Maybe, it can help you !

babasss's picture
Joined: Oct 25 2011 - 11:27pm
Last seen: 8 months 1 week ago