How to change date pattern for xAxis and yAxis in HTML5 chart

Scenario:

You have a non-time series chart and you want to format your xAxis and yAxis labels to display date in a different format. However, you cannot use xAxis.dateTimeLabelFormats because it's not a time series chart. How to achieve that?

Solution:

You have two approaches here.

1. Use HighCharts.dateFormat internal function to format date. You can invoke that function in formatter function for xAxis or yAxis. For example:

   <hc:chartProperty name="yAxis.labels.formatter"
                     value="function () {return Highcharts.dateFormat(&apos;%d-%m-%Y %H:%M&apos;, this.value); }"/>
   <hc:chartProperty name="xAxis.labels.formatter"
                     value="function () {return Highcharts.dateFormat(&apos;%d-%m-%Y %H:%M&apos;, this.value); }"/>

   Here we have two formatter functions for both axes. The HighCharts.dateFormat requires you to pass first the actual date format and then the value you want to format. In this case it's this.value. You can format not only dates like that but also numbers (turn miliseconds into timestamp).

   To use this approach you'll first need to set the function property to true either in TIBCO JasperSoft^® Studio (Preferences -> Jaspersoft Studio -> Properties) or jasperreports.properties file of TIBCO JasperReports^® Server:

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

2. Go to Chart -> Chart properties -> Chart data -> Configuration -> Select the category with the date object -> go to Bucket properties tab -> add a new property "pattern" with value of your date pattern like "MM/dd/yyyy - HH:mm".