Sync Zooming and Panning Across Multiple Charts - CanvasJS JavaScript Charts

Sync Zooming and Panning Across Multiple Charts - 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: "Synching Zooming & Panning across Multiple Charts"
   },
   data: [{
     type: "line",
     axisXType: "secondary",
     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
   axisX2: {
   	lineThickness: 0,
    tickLength: 0,
    labelFormatter: function(e){
    	return "";
    }
   },
   data: [{
     type: "line",
     axisXType: "secondary",
     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.axisX2)
       chart.options.axisX2 = {};

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

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

       chart.options.axisX2.viewportMinimum = chart.options.axisX2.viewportMaximum = null;
       chart.options.axisY.viewportMinimum = chart.options.axisY.viewportMaximum = null;
       chart.render();

     } else if (chart !== e.chart) {

       chart.options.axisX2.viewportMinimum =...