Accepted answer

OK great questions.

First, PF knows they did not implement time yet but there is an open ticket:

Second, have no fear you can use the Extender feature to make it work. Here is an example we used.

  1. In your Java model for your chart set the Extender feature on.
  1. In your XHTML add this JavaScript code function to match when you set in #1 Java bean.
function chartExtender() {
   //copy the config options into a variable
   var options = $.extend(true, {}, this.cfg.config);

   options = {
      //remove the legend
      legend: {
         display: false
      scales: {
         xAxes: [{
            display: true,
            type: "time",
            time: {
               parser: 'h:mm:ss a',
               tooltipFormat: 'h:mm:ss a',
               unit: 'hour',
               displayFormats: {
                  'hour': 'h:mm:ss a'
         yAxes: [{
            display: true,
            scaleLabel: {
               display: true,
               labelString: 'Your Y Axis',
               fontSize: 13,

   //merge all options into the main chart options
   $.extend(true, this.cfg.config, options);

You can see the different time formats available from ChartsJS using MomentJS.


Just a complement to do the extender works, use this.cfg.config.options = {...

for exemple:

function extName() {
    this.cfg.config.options = {
        legend: {
           display: false

Related Query

More Query from same tag