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-pro\WEB-INF\classes\jasperreports.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)

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

Feedback
randomness