Syncing X & Y Axis Ranges across Multiple Chart- CanvasJS JavaScript Charts

Syncing X & Y Axis Ranges across Multiple Chart- CanvasJS JavaScript Charts

by omaily

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="chartContainer1" style="height: 360px; width: 100%;"></div>

JavaScript

var dataSeries1 = { type: "line" };
var dataSeries2 = { type: "stepLine" };
var dataSeries3 = { type: "stepLine" };

dataSeries1.dataPoints = dataGenerator(100,1);
dataSeries2.dataPoints = dataGenerator(100,0);
dataSeries3.dataPoints = dataGenerator(100,2);

//-------- Chart 1 ---------------
var chart1 = new CanvasJS.Chart("chartContainer1", {
    zoomEnabled: true,
    zoomType: "x",
    axisY:{
    	labelPlacement:"inside",
     	tickLength: 0,
      tickThickness: 0,
      gridThickness: 0.5,
      gridDashType: "dot",
      crosshair: {
         enabled: true,
         snapToDataPoint: false
      }
    },
    title: {
        text: "Chart1 - Try Zooming / Panning"
    },
    data: [dataSeries1],
    rangeChanged: syncHandler
});
chart1.render();

//-------- Chart 2 ---------------
var chart2 = new CanvasJS.Chart("chartContainer2", {
    zoomEnabled: true,
    
    data: [dataSeries2],
    rangeChanged: syncHandler
});
document.getElementById('chartContainer2').getElementsByClassName('canvasjs-chart-toolbar')[0].style.display ='none';
chart2.render();


//-------- Chart 2 ---------------
var chart3 = new CanvasJS.Chart("chartContainer3", {
    zoomEnabled: true,
    
    data: [dataSeries3],
    rangeChanged: syncHandler
});
document.getElementById('chartContainer3').getElementsByClassName('canvasjs-chart-toolbar')[0].style.display ='none';
chart3.render();
//--------------------Sync Chart-------------------
var charts = [chart1, chart2];

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.options.axisX.viewportMinimum = chart.options.axisX.viewportMaximum = null;
            chart.options.axisY.viewportMinimum = chart.options.axisY.viewportMaximum = null;
						chart.render();
        } else if (chart !== e.chart) {
  ...