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 minValue = 1000*60;
    
    var chart = new CanvasJS.Chart("chartContainer",
    {      
      title: {
        // text: "Range Bar Time(X axis) and day(Y-axis)"
      },
      //zoomEnabled: true, //note: zoom would only work for x-axis (states)      
      axisX: {
        gridThickness: 0,        
        // interval: 10,        
        // interlacedColor: "#F0F8FF"         
          //Lines between x values...
          stripLines:[           
              {
              startValue:0,
              endValue:1.5,                
              color:"#EEF0F2",
              },
              {
                startValue:2.5,
                endValue:3.5,                
                color:"#EEF0F2",
                },
                {
                  startValue:4.5,
                  endValue:5.5,                
                  color: "#EEF0F2",//tk light gray,  //ToDo: use color resource
                  },
                  {
                    startValue:6.5,
                    endValue:7.5,                
                    color: "#EEF0F2",//tk light gray,  //ToDo: use color resource
                    },
                    {
                      startValue:8.5,
                      endValue:9.5,                
                      color: "#EEF0F2",//tk light gray,  //ToDo: use color resource
                      },
                  ]                     
      },
      axisY: {
        gridThickness: 1,
        gridDashType: "dot",
           minimum: (new Date(2020, 4, 23, 4, 0, 0)).getTime(),            
          //     interval: (1 * 60 * 60 * 1000),
              labelFormatter: function(e){
                  return CanvasJS.formatDate(e.value, "hh:mm:ss");
              },
              //suffix : " hour"
      },
      
      toolTip:{
     contentFormatter: function ( e ) {
        return "End : " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "hh:mm TT")
            +"</br> Start: " + ...