Show Axis Label Weekends in Different Color

Use Case

Customer created a JRXML report with HTML5 chart with a Date field as Categories Level.

He would like to show weekends in different color in xAxis labels.

Resolution

Please find attached sample report which implemented solution.

The idea is to use xAxis.formatter property which is a Javascript function returns required style color based on date:

https://api.highcharts.com/highcharts/xAxis.labels.style

Code of the function:

"function(){var cl='#666666'; d=new Date(this.value); var n=d.getDay(); if (n==0 || n==6) {cl='red';}; return '<span style="color:'+cl+'">'+this.value+'</span>'}"

The function checks if date is a weekend (0 is Sunday , 6 is Saturday) and returns red color. Otherwise, default color is used (#666666)

Please note, in order to use formatter function, you should enable a special property:

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

as described in article:

https://community.jaspersoft.com/wiki/using-functions-html5-charts-highcharts

Solution tested with TIBCO JasperReports^® v.7.1.0

AS-20190218, case #01677997

support_test1.jrxml