JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" width="100%" height="400px"></div>

JavaScript

window.onload = function() {
  var panning = false;  
  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true,
    rangeChanged: function(e) {
      if(e.trigger === 'pan') {
        panning = true;
      }
    },
    data: [{
      type: "line",
      dataPoints: [
        { x: new Date(2012, 0, 1), y: 450 },
        { x: new Date(2012, 1, 1), y: 414 },
        { x: new Date(2012, 2, 1), y: 520 },
        { x: new Date(2012, 3, 1), y: 460 },
        { x: new Date(2012, 4, 1), y: 450 },
        { x: new Date(2012, 5, 1), y: 500 },
        { x: new Date(2012, 6, 1), y: 480 },
        { x: new Date(2012, 7, 1), y: 480 },
        { x: new Date(2012, 8, 1), y: 410 },
        { x: new Date(2012, 9, 1), y: 500 },
        { x: new Date(2012, 10, 1), y: 480 },
        { x: new Date(2012, 11, 1), y: 510 }
      ]
    }]
  });

  chart.render();

  document.addEventListener('mouseup', function () {
    if(panning) {
      console.log('Panning has ended');
      panning = false;
    }
  });
}