JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var rangeData = [{ startValue: new Date(2020, 0, 6), endValue: new Date(2020, 0, 8), color: "#d8d8d8", toolTipContent: "Tooltip 1" },
                 { startValue: new Date(2020, 0, 10, 12, 0, 0), endValue: new Date(2020, 0, 10, 13, 0, 0), color: "#333", toolTipContent: "Tooltip 2", showInLegend: true, legendText: "Legend Text 2" }
                ];

var chart = new CanvasJS.Chart("chartContainer", {
  theme: 'light2',
  zoomEnabled: true,
  title: {
  	text: "Range Area Chart as background"
  },
  rangeChanged: function(e) {
    var dataSeriesIndexes = [];
    for(var i = 0; i < e.chart.data.length; i++) {
      if(e.chart.options.data[i].isBackground)
        dataSeriesIndexes.push(i);
    }
    if(dataSeriesIndexes.length)
      e.chart.options.data.splice(0, dataSeriesIndexes.length);

    e.chart.axisY[0].set("viewportMinimum", null, false);
    e.chart.axisY[0].set("viewportMaximum", null);
    addRangeArea(e.chart, rangeData);    
  },
  data: [{
    type: 'spline',
    dataPoints: [
      { x: new Date(2020, 0, 3), y: 650 },
      { x: new Date(2020, 0, 4), y: 700 },
      { x: new Date(2020, 0, 5), y: 710 },
      { x: new Date(2020, 0, 6), y: 658 },
      { x: new Date(2020, 0, 7), y: 734 },
      { x: new Date(2020, 0, 8), y: 963 },
      { x: new Date(2020, 0, 9), y: 847 },
      { x: new Date(2020, 0, 10), y: 853 },
      { x: new Date(2020, 0, 11), y: 869 },
      { x: new Date(2020, 0, 12), y: 943 },
      { x: new Date(2020, 0, 13), y: 970 },
      { x: new Date(2020, 0, 14), y: 869 },
      { x: new Date(2020, 0, 15), y: 890 },
      { x: new Date(2020, 0, 16), y: 930 },
    ],
  }]
});

chart.render();
addRangeArea(chart, rangeData);

function addRangeArea(chart, rangeData) {
  var min = chart.axisY[0].get("viewportMinimum"),
      max = chart.axisY[0].get("viewportMaximum"); //Store the viewport of axisY

  for(var i = 0; i < rangeData.length; i++) {
    chart.options.data = [{
      type: "rangeArea",
      isBackground: true,
     ...