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:
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
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:
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
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
Recommended Comments
There are no comments to display.