JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

CSS

#chartContainer2 .canvasjs-chart-toolbar{
  display: none;
}

JavaScript

var dps = randomData(new Date(2017, 0, 1), 365);

var chart2 = new CanvasJS.Chart("chartContainer2", {
  zoomEnabled: true,
  toolTip: {
    enabled: false    
  },  
  rangeChanged: rangeChanged, 
  data: [{
    type: "scatter",    
    highlightEnabled: false,
    dataPoints: dps
  }]
});
chart2.render();

//Function to generate random data
function randomData(startX, numberOfY) {//startDate:Jan 1 2017, numberOfY: 365
  var xValue, yValue = 0;
  var dataPoints = [];
  var j=0;
  for (var i = 0; i<360; i += 1) {
    xValue = i
    yValue += (Math.random() * 10 - 5) << 0;
		
    dataPoints.push({
      x: xValue,
      y: yValue
    });
  }
  return dataPoints;
}

function rangeChanged(e) {
  chart2.axisX[0].addTo("stripLines", {
    startValue: e.chart.axisX[0].get("viewportMinimum"),
    endValue: e.chart.axisX[0].get("viewportMaximum"), 
    color: "rgba(153,178,181,0.7)"
  });
  e.chart.axisX[0].set("viewportMinimum", null);
  e.chart.axisX[0].set("viewportMaximum", null);
  console.log(chart2.axisX[0].stripLines.slice(-1).pop().startValue,  chart2.axisX[0].stripLines.slice(-1).pop().endValue)
}