How to add a Threshold line in an HTML5 chart (a.k.a Highchart)

Use case description

There is more than one way to add a threshold line to a chart. For example, the simplest one is just add another measure to your chart and then hide it from legend using the showInLegend advanced property:

The solution suggest below is probably the one the gives report developer the most control over the threshold line layout.

Solution

You can add thresholds to the charts as plotlines instead of measures. The Jaspersoft Studio user interface does not provide a good option to add a plotline at the moment. It has to be passed as a function with an array of values, and it's best added directly to XML and looks like this: 

<hc:chartProperty name="yAxis.plotLines">
    <hc:propertyExpression>
        <![CDATA["function(){return [{ color: 'red', 
                                       value: 2500, 
                                       dashStyle: 'longdashdot',
                                       width: 2},
                                     { color: 'green',
                                       value: 7500,
                                       dashStyle: 'longdashdot',
                                       width: 2}
                                    ]}()"]]>
    </hc:propertyExpression>
</hc:chartProperty>

See also the attached sample report that demonstrates this.

One more thing to keep in mind is that in order to use functions with HTML5 charts you have to enable the following property:

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

For JasperReports Server this property has to be added in .../WEB-INF/classes/jasperreports.properties file. Make sure to save the changes and restart the application server for the property to take effect.

In Studio this property has to be added under Window->Preferences->Jaspersoft Studio->Properties

plotlines_0.jrxml