[Chartjs]-Chart js – bar chart with time scale on Y axis in Hours and Minutes

by

2👍

I checked in the internet and there is a simple hack to do this, why I use the hack is because if I set the Y-axis to date, the graph does not get rendered and throws an error.

Please find below the configuration used to achieve date Y-Axis.

var options = {
    scaleOverride: true,
    scaleSteps: 8,
    scaleStepWidth: 1800,
    scaleStartValue: 0,
    responsive: true,
    maintainAspectRatio: false,
    scaleLabel: function(valuePayload) {
        console.log(new Date(valuePayload.value  * 1000).toISOString());
      return new Date(valuePayload.value  * 1000).toISOString().substr(12, 7);
    },
    multiTooltipTemplate: function(valuePayload) {
      return valuePayload.datasetLabel + " " + new Date(valuePayload.value * 1000).toISOString().substr(12, 7)
    },
    title: {
        display: false,
        text: 'stat 1'
    }
  };
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myLine = new Chart(ctx).Line(data, options);

The below issue on Github contains nifty method to achieve time axis on Y-Axis.

GITHUB Issue: here

The below fiddle contains the modified code, where the Date Y-Axis is visible,

JSFiddle: here

Leave a comment