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!

Answer 1

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");
       }
   }
}],