Sync Zooming and Panning Across Multiple Charts using set() method - CanvasJS JavaScript Charts

Sync Zooming and Panning Across Multiple Charts using set() method - CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

//--------------- DataPoints Generator ---------------//
 function dataPointsGenerator(limit) {
   var y = 0;
   var dataPoints = [];
   for (var i = 0; i < limit; i += 1) {
     y += Math.round(5 + Math.random() * (-5 - 5));
     dataPoints.push({
       x: i,
       y: y
     });
   }
   return dataPoints;
 }

 var dataPoints1 = dataPointsGenerator(100);
 var dataPoints2 = dataPointsGenerator(100)

 //--------------- Chart 1 ---------------//
 var chart1 = new CanvasJS.Chart("chartContainer1", {
   zoomEnabled: true,
   zoomType: "x", // change it to "xy" to enable zooming on both axes
   title: {
     text: "Chart1 - Try Zooming / Panning"
   },
   data: [{
     type: "line",
     dataPoints: dataPoints1
   }],
   rangeChanged: syncHandler
 });

 chart1.render();

 //--------------- Chart 2 ---------------//
 var chart2 = new CanvasJS.Chart("chartContainer2", {
   zoomEnabled: true,
   zoomType: "x", // change it to "xy" to enable zooming on both axes
   title: {
     text: "Chart2 - Try Zooming / Panning"
   },
   data: [{
     type: "line",
     dataPoints: dataPoints2
   }],
   rangeChanged: syncHandler
 });

 chart2.render();

 //--------------- Syncing the charts ---------------//
 var charts = [chart1, chart2]; // add all charts (with axes) to be synced

 function syncHandler(e) {

   for (var i = 0; i < charts.length; i++) {
     var chart = charts[i];

     if (!chart.options.axisX)
       chart.options.axisX = {};

     if (!chart.options.axisY)
       chart.options.axisY = {};

     if (e.trigger === "reset") {

       chart.axisY[0].set("viewportMinimum", null, false);
       chart.axisY[0].set("viewportMaximum", null, false);

       chart.axisX[0].set("viewportMinimum", null, false);
       chart.axisX[0].set("viewportMaximum", null);
       
       //chart.render();
     } else if (chart !== e.chart) {

       chart.options.axisX.viewportMinimum = e.axisX[0].viewportMinimum;
       chart.options.axisX.viewportMaximum =...