JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/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>

CSS

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  zoomType: "xy",
  title: {
    text: "Try Zooming And Panning xy"
  },
  axisX: {
    viewportMaximum: 100
  },
  axisY: [
  {
  	minimum: 60,
    maximum: 150
  },
  {
  	minimum: 60,
    maximum: 150
  },
  {
  	minimum: 60,
    maximum: 150
  },
  {
  	minimum: 60,
    maximum: 150
  },
  {
  	minimum: 60,
    maximum: 150
  },
  {
  	minimum: 60,
    maximum: 150
  },
  {
  	minimum: -50,
    maximum: 150
  }
  ],
  rangeChanged: function(e) {
    if (e.trigger === "reset") {
      document.getElementsByClassName("canvasjs-chart-toolbar")[0].style.display = "none";
    } else { //if(e.trigger ==="zoom" || e.trigger === "pan")
      document.getElementsByClassName("canvasjs-chart-toolbar")[0].style.display = "block";
    }
  },
  data: [
  {
    type: "line",
    axisYIndex: 0,
    dataPoints: randomData(100)
  },
  {
    type: "line",
    axisYIndex: 1,
    dataPoints: randomData(100)
  },
  {
    type: "line",
    axisYIndex: 2,
    dataPoints: randomData(100)
  },
  {
    type: "line",
    axisYIndex: 3,
    dataPoints: randomData(100)
  },
  {
    type: "line",
    axisYIndex: 4,
    dataPoints: randomData(100)
  },
  {
    type: "line",
    axisYIndex: 5,
    dataPoints: randomData(100)
  },
  {
    type: "line",
    axisYIndex: 6,
    dataPoints: signalPeak(100)
  },
  {
    type: "line",
    axisYIndex: 6,
    dataPoints: randomData(100)
  }
  ]
});

chart.render();

function randomData(limit) {
  limit = limit || 1000; //increase number of dataPoints by increasing this

  var y = 100;
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    y += (Math.random() * 10 - 5);
    dataPoints.push({
      x: i,
      y: y
    });
  }
  return dataPoints;
}

function signalPeak(limit) {
  limit = limit || 1000; //increase number of dataPoints by increasing this
  var peakVal = 100;
  var y = 0;
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    if( i % (limit/2)...