Zooming in Chart based on Multiple Mouse Clicks / Taps

Zooming in Chart based on Multiple Mouse Clicks / Taps

by canvasjs

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>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Zooming Chart with Mouse Click"
  },
  zoomEnabled: true,
  zoomType: "xy",
  rangeChanged: function(e) {
    if(e.trigger === "reset") {
      e.chart.options.zoomProps.clickCounter = 0;
      e.chart.axisX[0].set("viewportMinimum", null, false);
      e.chart.axisX[0].set("viewportMaximum", null, false);
      e.chart.axisY[0].set("viewportMinimum", null, false);
      e.chart.axisY[0].set("viewportMaximum", null);
    }
  },
  zoomProps: { clickCounter: 0},
  data: [
    {
      type: "line",
      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();
addTouchZoom(chart);

function addTouchZoom(chart) {
  var isMouseDown = false;
  chart.overlaidCanvas.addEventListener('mousedown', mouseDown);
  chart.overlaidCanvas.addEventListener('mouseup', mouseUp);
  chart.overlaidCanvas.addEventListener('mousemove', mouseMove);
 
  function mouseDown(e) {
    e.preventDefault();

    isMouseDown = true;

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

    var zoomProps = chart.options.zoomProps;
    zoomProps.clickCounter++;
    if (zoomProps.clickCounter % 2 === 0) {

      zoomProps.x2 = e.clientX - chart.container.offsetLeft;
      zoomProps.y2 = e.clientY - chart.container.offsetTop;
      var opacity = chart.overlaidCanvasCtx.globalAlpha;

      chart.overlaidCanvasCtx.globalAlpha = 0.7;
      chart.overlaidCanvasCtx.fillStyle = "#99B2B5";
      chart.overlaidCanvasCtx.fillRect(zoomProps.x1, zoomProps.y1, zoomProps.x2 - zoomProps.x1, zoomProps.y2 - zoomProps.y1);
      chart.overlaidCanvasCtx.globalAlpha = opacity;
      chart.overlaidCanvasCtx.fillStyle =...