JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>

<html>

<head>  

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

</head>

<body>

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

<script></script>

<svg width="20" height="10">

		<text x="775" y="9" dy=".35em" style="text-anchor: start;">state_off</text>

		<rect x="752" width="18" height="18" style="fill: red; "></rect></svg>

		<br><br>

	<svg width="20" height="10">

		<text x="775" y="9" dy=".35em" style="text-anchor: start;">state_on</text>

	<rect x="752" width="18" height="18" style="fill: green; "></rect></svg>

	</body>

</html>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",

                               {
  theme: "light2",

  axisY: {

    //minimum: (new Date(1609554601)).getTime(),
    
    scaleBreaks: {
      customBreaks: [{
        startValue: 1631341054000,
        endValue: 1631343358000,
        spacing: 0,
        type :"straight",
      },
      {
        startValue: 1631345066000,
        endValue: 1631345183000,
        spacing: 0,
        type :"straight",
        }],
      
      
    },
     


    labelFormatter: function(e){

      return CanvasJS.formatDate(e.value, "hh:mm TT");

    },

    //suffix : " hour"

  },

  title:{

    text: "time vs state"



  },



  toolTip:{

    contentFormatter: function ( e ) {

      return "End : " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "hh:mm TT")

        +"</br> Start: " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "hh:mm TT");  

    }},



  data: [

    {

      type: "rangeBar",

      //valueFormatString: "DDDD MMM YYYY HH:mm:ss k",

      //yValueType: "dateTime",

      dataPoints: [

        { x: 1,label: "Machine1", y: [1631341032000,1631341054000], state: "On" },

        { x: 1, label: "Machine1", y: [1631344632000,1631344667000], state: "Off" },

        { x: 1, label: "Machine1", y: [1631343358000,1631345066000], state: "Off" },

        { x: 1, label: "Machine1", y: [1631345183000,1631345292000], state: "On" },
      ]

    }

  ]                      

});

// setting the color of dataPoint based on the state
for(var i = 0; i < chart.options.data[0].dataPoints.length; i++)
  if(chart.options.data[0].dataPoints[i].state === "On")
    chart.options.data[0].dataPoints[i].color = "green";
  else
    chart.options.data[0].dataPoints[i].color = "red";

chart.render();