JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

JavaScript

const RANGE = (a,b) => Array.from((function*(x,y){
  while (x <= y) yield x++;
})(a,b));

labels = [];
for(var ii = 0; ii < 170; ii++) {
  labels.push((1483228800 + ii * 3600) * 1000);
}


var startingData = {
  labels: labels,
  datasets: [
    {
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      data: RANGE(1, 170),
      label: 'Data'
    },
  ]
};
var options = {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'hour',
        unitStepSize: 5
      }
    }]
  }
};

var ctx = document.getElementById('chartJSContainer').getContext('2d');

// Reduce the animation steps for demo clarity.
var myLiveChart = new Chart(ctx, {
  type: 'bar',
  data: startingData,
  options: options
});