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>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-types/html5-range-bar-chart/" target="_blank" title="HTML5 Range Bar Charts ">https://canvasjs.com/docs/charts/chart-types/html5-range-bar-chart/</a></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  data: [{
    type: "rangeBar",
    dataPoints: [
      {x: new Date(2014,03,1), y: [17,33]},  
      {x: new Date(2014,03,1), y: [35,50]},
      {x: new Date(2014,03,2), y: [18,32]},
      {x: new Date(2014,03,3), y: [18,32]},
      {x: new Date(2014,03,4), y: [20,35]},
      {x: new Date(2014,03,5), y: [20,38]},
      {x: new Date(2014,03,6), y: [21,32]}
    ]
  }]
});
chart.render();