HTML5 Bar Chart: how to add the percent sign to the dataLabel and change it's font size

In this article I want to describe how to add a percent sign to the dataLabel (value that shows numeric value above bar chart's columns) and to change it's font size.

How to add a percent sign to the dataLabel's values

To add a percent sign to your report please:

1. Enable support of Java Script functions in JasperReports Server. To do this:

   • open in your favorite editor configuration file, jasperserver-proWEB-INFclassesjasperreports.properties, and add/set to true the property that I list below:

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

   • save configuration file and apply the changes that have been done

2. In your report,

   • Right click on html5 chart and select Edit Chart Properties. The HTML5 chart properties window should be shown.

   • Click Show Advanced Options button and add the property that I quote below:

     plotOptions.series.dataLabels.formatter
     

   • Select Use an Expression checkbox and add a function that I quote below:

     "function(){ return this.y + " %";}"
     

How to change the size of datalabels

To configure the font size of dataLabels:

1. In the Advanced Properties tab add the property that I quote below:

   plotOptions.series.dataLabels.style.fontSize
   

   Use an Expression should be checked - set 1 as property

2. In the Chart properties window (Show Simple Properties), set the font size of the report to the desired value (for example 30px)

http://community-static.jaspersoft.com/sites/default/files/images/screenshot1.png

Please find in the attachment to this article a sample of the report with these properties and a screen shot that shows the report output in runtime.

It uses a dummy data, so to run it in JasperReports Server upload it and set it's data source to any data source that exists in your instance (for example /organizations/organization_1/datasources/JServerJdbcDS)

Thank you for your attention to this article.

Alex

html5_bar_chart_percent_0.jrxml