JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<body>
    <canvas id="canvas" height="450" width="600"></canvas>
</body>

JavaScript

var config = buildConfig();
var context = document.getElementById("canvas").getContext("2d");
new Chart(context, config);

function buildConfig() {
	  
  var config = {
  	type: "bar",
    data: {
    	labels: [ "01:00", "01:15", "01:30", "01:45", "02:00" ],
      datasets:[{
        type: "bar",
			  label: "Time testing graph",
			  backgroundColor: "#f5857d",
		    borderColor: "#f5857d",
		    data: [
        	"0.2", "0.4", "0.15", "0.2", "0.3"
        ]
      }]
    },
    options: {
    	responsive: true,
      title: {
      	display: false
      },
      legend: {
      	position: "bottom"
      },
      scales: {
      xAxes: [{
	    	position: "bottom",
	      type: "time",
	      time: {
	      	unit: "hour",
	        format: "HH:mm",
	        tooltipFormat: "HH:mm",
	        displayFormats: {
	        	hour: "HH:mm",
	          day: "HH:mm",
	          week: "HH:mm",
	          month: "HH:mm",
	          quarter: "HH:mm",
	          year: "HH:mm"
	        }
	      }
	    }],
	    yAxes: [{
	      type: "linear",
	      display: true,
	      position: "left"
	    }]
      }
    }
  }
  
  return config;
}