How To Force Dual-axis chart to always have the same MAX values

Question:

I have a report with Dual-axis HTML5 chart. How can I configure the chart to have the same MAX values for both Y-axises?

Answer:

By default, the maximum value of axis is automatically calculated. There is a property to explicitly specify the max vaIue:

http://api.highcharts.com/highcharts#yAxis.max

But what can be done if the max values are dynamic? 

The main idea is to use getExtremes() and setExtremes Highcharts methodes:

http://api.highcharts.com/highcharts#Axis.getExtremes

http://api.highcharts.com/highcharts#Axis.setExtremes

The following custom Javascript function should be specified as the chart's chart.events.load advanced property:

"function(){"+
"this.yAxis[0].endOnTick=false;"+
"this.yAxis[1].endOnTick=false;"+
"this.yAxis[0].setExtremes(0,Math.max(this.yAxis[0].getExtremes().max,this.yAxis[1].getExtremes().max),true);"+
"this.yAxis[1].setExtremes(0,Math.max(this.yAxis[0].getExtremes().max,this.yAxis[1].getExtremes().max),true);"+
"}"

The function firstly disables endOfTick property and then sets yAxis.max extremes as the maximum number of 2 yAxis.max values.

Make sure, property 'com.jaspersoft.jasperreports.highcharts.function.properties.allowed' is set to true in Jaspersoft Studio configuration or in WEB-INFclassesjasperreports.properties file if you run the report in JasperReports Server.

Ref. Case #00065014