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

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",
                                 {   
    data: [
      {
        type:"rangeArea",
        markerSize: 0,
        lineThickness: 0,
        toolTipContent: null,
        highlightEnabled: false,         
        dataPoints: [
          {x: 10, y: [25,35]},
          {x: 50, y: [25,35]},
        ]
      },
      {
        type:"rangeArea",
        markerSize: 0,
        lineThickness: 0,
        toolTipContent: null,
        highlightEnabled: false,
        dataPoints: [
          {x: 50, y: [45,55]},
          {x: 90, y: [45,55]},
        ]
      },
      {        
        type: "line",
        dataPoints: [
          { x: 10, y: 31 },
          { x: 20, y: 35},
          { x: 30, y: 30 },
          { x: 40, y: 35 },
          { x: 50, y: 35 },
          { x: 60, y: 38 },
          { x: 70, y: 38 },
          { x: 80, y: 34 },
          { x: 90, y: 38}
        ]
      },
      {        
        type: "line",
        axisYType: "secondary",
        dataPoints: [
          { x: 10, y: 45 },
          { x: 20, y: 50},
          { x: 30, y: 40 },
          { x: 40, y: 45 },
          { x: 50, y: 45 },
          { x: 60, y: 48 },
          { x: 70, y: 43 },
          { x: 80, y: 41 },
          { x: 90, y: 28}
        ]
      }        
    ]
  });

  chart.render();

  var axisXMinimum = chart.axisX[0].get("minimum");
  var axisXMaximum = chart.axisX[0].get("maximum");
  chart.options.data[0].dataPoints[0].x = axisXMinimum;
  chart.options.data[0].dataPoints[1].x = chart.options.data[1].dataPoints[0].x = (axisXMaximum - axisXMinimum) / 2;
  chart.options.data[1].dataPoints[1].x = axisXMaximum;
  chart.axisX[0].set("minimum", axisXMinimum, false);
  chart.axisX[0].set("maximum", axisXMaximum);	

}