Chart.js displaying time data

Question

I am trying to render an array of time data on the x axis scale of a line chart in chart.js but despite trying numerous options settings cannot get it to display at all. The data is in string format ["00:30", "01:00", "01:30"...] and these are my xAxes options settings:

xAxes: [{
   type: "time",
   time: {
      parser: "hh:mm",
      unit: "minute",
      displayFormats: {
                  minute: "hh:mm"
      }
   },

Am I missing something obvious?

Thanks!

Here's a working example - jsfiddle.net/dthory/upLd7t6j/3 Seems like the array of time data i'm generating is not passing over to the ejs file as a string (i.e. as the variable timeData. When this is formatted to an array of strings - timeDataString it works without having to implement time settings on the options, but I need to make it work with the timeData array - hope that make's sense! Thanks.. — Dan Thory
Didn't realize this was an old question, but if you mark my answer it would probably help others. Thanks. — msj121

msj121 msj121 · Accepted Answer · 2019-07-12T21:53:42

Your main issue is that moment.js script tag should be placed early in the "script" tags in your example. It will work in your example if you do (also uncomment the "xaxis" section).

So put script tag above chart.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

`

Here is also an easy way to represent whatever you would like in chart.js and get the data and do whatever you'd like (it will also help find your error):

xAxes: [{
   ticks: {
       callback: function(value) {
          //"HH:mm:ss"
          return moment(value).format("mm:ss");
       }
   }
}],

Chart.js displaying time data

1 Answers