JSFiddle - React, Tailwind, and code Playground

by santy_naren

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  title: {
    text: "ParaV Testing"
  },
  axisX2: {
   viewportMinimum: 0,
    viewportMaximum: 40
  },
  rangeChanged: function(e) {
    if (e.trigger === "reset") {
      changeToPanMode();
    }
  },

  data: [{
    type: "column",
    dataPoints: [{
        x: 10,
        y: 71
      },
      {
        x: 20,
        y: 55
      },
      {
        x: 30,
        y: 50
      },
      {
        x: 40,
        y: 65
      },
      {
        x: 50,
        y: 95
      },
      {
        x: 60,
        y: 68
      },
      {
        x: 70,
        y: 28
      },
      {
        x: 80,
        y: 34
      },
      {
        x: 90,
        y: 14
      }
    ]
  }]
});

chart.render();
changeToPanMode()
document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("wheel", function(e) {
  e.preventDefault();

  if (e.clientX < chart.plotArea.x1 || e.clientX > chart.plotArea.x2 || e.clientY < chart.plotArea.y1 || e.clientY > chart.plotArea.y2)
    return;

  
  var axisX = chart.axisX[0];
  var viewportMin = axisX.get("viewportMinimum"),
    viewportMax = axisX.get("viewportMaximum"),
    interval = axisX.get("minimum");

  var newViewportMin, newViewportMax;

  if (e.deltaY < 0) {
    newViewportMin = viewportMin + interval;
    newViewportMax = viewportMax - interval;
  } else if (e.deltaY > 0) {
    newViewportMin = viewportMin - interval;
    newViewportMax = viewportMax + interval;
  }

  if (newViewportMin >= chart.axisX[0].get("minimum") && newViewportMax <= chart.axisX[0].get("maximum") && (newViewportMax - newViewportMin) > (2 * interval)) {
    chart.axisX[0].set("viewportMinimum", newViewportMin, false);
    chart.axisX[0].set("viewportMaximum", newViewportMax);
  }

});
function changeToPanMode() {
    var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
    var childElement = document.getElementsByTagName("button");
    if...