Note: I am referencing the 5.5 versions of JasperServer, iReport, and JasperStudio in this post.

Since HTML5 Charts have been added to JasperReports in its 5.0 release, a slew of new graphing possibilities have been made available. Some of the abilities to customize these charts have not been implemented in the graphical reporting tools iReport and JasperStudio in the most intuitive way. Details on how to customize them have not been easy to find either. Here is an example of an HTML5 Stacked Bar Chart from the demo data in a report displayed in JasperServer:

Displaying the Category (“CA”), Series (“Male”), and Measure (“81,541.81”) when hovering over a chart measure is sufficient in most cases, but there are often more datapoints that would be nice to have displayed in the tooltip. For example, a percentage across the category the would be a great addition. To add this, right click on the chart element in iReport or JasperStudio and select “Edit Chart Properties,” the button indicated below:

Here, you can add custom properties. You should see a list of currently set properties that were either predefined, or customized using the properties panel in iReport or JasperStudio. You can edit these properties by double-clicking a property to bring up an expression editor. To customize the tooltip, you need to click the add button as seen below:

Now an expression editor will display. In this example, we want to show what we are currently displaying with an additional percentage amount. Here, we are going to set the “Property Name” as tooltip.pointFormat, check the “Use an expression” checkbox, and type the below string as seen in the image that follows:

Click OK on the expression editor window. Click OK on the HTML5 Charts properties window. You should be able to run the report now (or export to JasperServer and display) to have a result like this:

This is essentially what we wanted, but the precision of the percentage decimal value is not what we were looking for. To fix this, go through the process of adding another HTML5 Chart property. Set tooltip.percentageDecimals to “2” to achieve the result below:

Since HTML5 Charts use the HighCharts library, I recommend viewing their API documentation to uncover more potential options in customizing tooltips in HTML5 Charts in JasperReports.