JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
                               {
  title: {
    text: "Daily Study Routine"
  },
  axisY: {
    minimum: (new Date(2019, 01, 04, 00, 00)).getTime(),
    interval: (2 * 60 * 60 * 1000),
    labelFormatter: function(e){
      return CanvasJS.formatDate(e.value, "h:mm TT");
    }
  },
  axisX: {
  	valueFormatString: "DDDD",
    intervalType: "day",
    interval: 1
  },

  toolTip:{
    contentFormatter: function ( e ) {
      return "<strong>" + CanvasJS.formatDate(e.entries[0].dataPoint.x, "DDDD") + "</strong></br>" +  CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "h:mm TT") + " - " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "h:mm TT");  
    }},

  data: [
    {
      type: "rangeColumn",
      dataPoints: [
        { x: new Date(2019, 01, 04), y: [(new Date(2019, 01, 04, 05, 0)).getTime(), (new Date(2019, 01, 04, 13, 00)).getTime()] },
        { x: new Date(2019, 01, 05), y: [(new Date(2019, 01, 04, 06, 0)).getTime(), (new Date(2019, 01, 04, 14, 20)).getTime()] },
        { x: new Date(2019, 01, 06), y: [(new Date(2019, 01, 04, 07, 0)).getTime(), (new Date(2019, 01, 04, 12, 00)).getTime()] },
        { x: new Date(2019, 01, 07), y: [(new Date(2019, 01, 04, 03, 0)).getTime(), (new Date(2019, 01, 04, 9, 00)).getTime()] },
        { x: new Date(2019, 01, 08), y: [(new Date(2019, 01, 04, 02, 0)).getTime(), (new Date(2019, 01, 04, 7, 00)).getTime()] },
        { x: new Date(2019, 01, 09), y: [(new Date(2019, 01, 04, 10, 0)).getTime(), (new Date(2019, 01, 04, 18, 00)).getTime()] }
      ]
    }
  ]                      
});
chart.render();