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

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Creating Shapes using Ranged Area Chart"
  },
  axisX: {
    interval:1,
  },
  data: [
    {
      type: "line",

      dataPoints: [
        { x: 1, y: 450 },
        { x: 2, y: 414 },
        { x: 3, y: 490 },
        { x: 4, y: 460 },
        { x: 5, y: 450 },
        { x: 6, y: 500 }
      ]
    },
    {
      type: "rangeArea",
      markerSize: 0,
      highlightEnabled: false,
      toolTipContent: null,
      dataPoints: [
        { x:2.5, y: [400, 500] },
        { x:3.5, y: [400, 500] },
      ]
    },
    {
      type: "rangeArea",
      markerSize: 0,
      highlightEnabled: false,
      toolTipContent: null,
      dataPoints: [
        { x:4.5, y: [400, 400] },
        { x:5, y: [400, 550] },
        { x:5.5, y: [400, 400] },

      ]
    }
  ]
});

chart.render();