JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",
                                 {
    axisX:{
      title: "Thicker Vertical Grids Lines",
      gridThickness: 1,
      minimum: 10,
      maximum: 100,
      gridColor: "black",
    },
    axisY:{
      title: "Thicker Vertical Grids Lines",
      gridThickness: 1,
      gridColor: "black",
      minimum: 10,
      maximum: 100,
    },

    data: [
      {
        type: "line",
        dataPoints: [
          { x: 15, y: 70 },
          { x: 25, y: 50},
        ]
      },
      {
        type: "line",
      color: "transparent",
        dataPoints: [
          { x: 35, y: 65, indexLabel: "55" },
        ]
      },
      {
        type: "line",
        color: "transparent",
        dataPoints: [
          { x: 45, y: 45, indexLabel: "45" },
        ]
      },
      {
        type: "scatter",
        dataPoints: [
          { x: 65, y: 30},
        ]
      },
       {
			type: "rangeArea",
      lineColor: 'black',
      lineThickness: 1,
      markerType:"none",
			dataPoints: [ 
				{ x: 30, y: [60, 80] }, 
				{ x: 40, y: [60, 80] },
			
			]
			},
      {
			type: "rangeArea",
      lineColor: 'black',
      lineThickness: 1,
      markerType:"none",
			dataPoints: [ 
				{ x: 40, y: [40, 60] }, 
				{ x: 50, y: [40, 60] },
			
			]
			}
    ]
  });

  chart.render();
}