JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;">
</div>

JavaScript

var dps = [
  { x: new Date(2012,00,01), y: [new Date(2016, 1, 15, 8, 16, 15), new Date(2016, 1, 15, 9, 16, 15)] },  // y: [Low ,High]
  { x: new Date(2012,01,01), y: [new Date(2016, 1, 15, 7, 20, 15), new Date(2016, 1, 15, 11, 20, 15)] },
  { x: new Date(2012,02,01), y: [new Date(2016, 1, 15, 5, 16, 15), new Date(2016, 1, 15, 8, 30, 15)] },
  { x: new Date(2012,03,01), y: [new Date(2016, 1, 15, 4, 12, 15), new Date(2016, 1, 15, 12, 1, 15)] },
  { x: new Date(2012,04,01), y: [new Date(2016, 1, 15, 8, 16, 15), new Date(2016, 1, 15, 9, 00, 15)] },
  { x: new Date(2012,05,01), y: [new Date(2016, 1, 15, 7, 16, 15), new Date(2016, 1, 15, 10, 18, 15)] },
];

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Range Column Chart with Date on X-axis and Time on Y-axis",
  },
  axisY: {
    title: "Time",
     labelFormatter:  function (e) {
      return CanvasJS.formatDate( e.value, "hh:mm:ss"); //For showing dateTime format in Y axis
    } 
  },
  axisX: {
    title: "Date",
    valueFormatString: "DD MMM"
  },
  toolTip:{
     contentFormatter: function (e) {
      return CanvasJS.formatDate(e.entries[0].dataPoint.y[0],"hh:mm:ss TT") + " - " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1],"hh:mm:ss TT");	//Formatting dateTime in ToolTip
    }  
  },
  data: [
    {
      type: "rangeColumn",
      color: "#369EAD",
      dataPoints: []
    }
  ]
});

changeDateTimeToTimestamp(dps);

function changeDateTimeToTimestamp (data){

  for(var i = 0; i < data.length; i++){
    for(var j = 0;j < data[i].y.length; j++){
      if(data[i].y[j].getTime)
        data[i].y[j] = data[i].y[j].getTime();
    }
  }
  chart.options.data[0].dataPoints = dps;
  chart.render();
}