HighCharts Column Chart with data series labels as a percentage

Sample HTML5 Chart using Column Chart 

The provided sample uses a simple JSON data file containing sample JSON data. This is used to feed the data to the report. No connection to any database is required. 

The configuration in the HTML5 chart makes use of the following property:

plotOptions.series.dataLabels.formatter

In order to display the series data labels as a percentage of the whole series total, a javascript function needs to be written and set to this property:

The function is:

<hc:chartProperty name="plotOptions.series.dataLabels.formatter" value="function() {var dataSum = 0;for (var i=0;i &lt; this.series.data.length;i++) {dataSum += this.series.data[i].y}; var pcnt = (this.y / dataSum) * 100; return Highcharts.numberFormat(pcnt,1) + &apos;%&apos;;}"/>

For this to work, the following extra steps is necessary: 

i> you must remove the plotOptions.series.dataLabels.format property if it is already being set because this property will take precedence

ii> the property plotOptions.series.dataLabels.enabled  needs to be set to true

iii> you must set:

com.jaspersoft.jasperreports.highcharts.function.properties.allowed = true

in  TIBCO Jaspersoft® Studio's Windows -> Preferences -> Jaspersoft Studio -> Properties. 

For Studio, it should already be there by default

For the report to run on the  TIBCO JasperReports® Server and effect the high charts function, the  com.jaspersoft.jasperreports.highcharts.function.properties.allowed = true needs to be added to:

../WEB-INF/classes/jasperreports.properties

followed by a restart of the TIBCO JasperReports® Server.

See attached sample jrxml, percentageofvalueinchart.jrxml with the JSON data file and data adapter for import.

percentageofvalueinchart_0.jrxml

chartdata.json

chartdata.xml