Kritika Rana

Tips For HTML5 Charts In JasperSoft

Blog Post created by Kritika Rana on May 30, 2017

Charts represent data in more interactive manner as compared to table or text. In Jasper, HTML5 Charts are a way to allow data dynamically in a visually appealing way with interactive content.

This entirely new set of interactive charts is not only visually attractive, it combines advanced chart capabilities with a rich set of supported user interactions including the ability to change the chart type on the fly.

Maximum of the options to customize the look and feel of charts can be found from default set of visual settings. This setting dialog box can be accessed via the HTML5 Chart Edit Chart Properties menu (right click on the chart while it’s the active component in the designer).But, if the desired operation is not available on UI in chart properties,  Advanced Properties can help you get more sophisticated settings.


1) Point out your query fields to the graph (any graph from HTML-5).
2) For every change in your JRXML (report or chart level) publish to the server and check the export. (Check the               output in different browsers)
3) Some problems might come when you add advanced properties.
     You should check the expression checkbox for the property because the value of the property is written in Java.
4) Do not use direct values like 2 , 7 or some value like that instead use parser functions like new Integer(2) or

     new Integer(7).

     Also, be careful about the same when adding a variable or field with integer:  

     General approach: $V{someVariable}+4 or $F{someField}+60 
     Preferable approach: $V{someVariable}+new Integer(4) or $F{someField}+new Integer(60)
5) Below is the link api documentation for highcharts. 
    all properties that you take from HTML-5 API should go in the way that the Studio engine can understand the             script and exportable into PDF.

6) Sometimes advanced properties seem to be not working in desired manner. First, check for directly added values.

    Then, remove the property, publish the report or chart and then add the property again.