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

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

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

JavaScript

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

dataSeries1.dataPoints = dataGenerator(100);
dataSeries2.dataPoints = dataGenerator(100)

//-------- Chart 1 ---------------
var chart1 = new CanvasJS.Chart("chartContainer1", {
    zoomEnabled: true,
    zoomType: "xy",
    title: {
        text: "Chart1 - Try Zooming / Panning"
    },
    data: [dataSeries1],
    rangeChanged: syncHandler
});
chart1.render();

//-------- Chart 2 ---------------
var chart2 = new CanvasJS.Chart("chartContainer2", {
    zoomEnabled: true,
    title: {
        text: "Chart2 - Try Zooming / Panning"
    },
    data: [dataSeries2],
    rangeChanged: syncHandler
});

chart2.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) {
            
            chart.options.axisX.viewportMinimum = e.axisX[0].viewportMinimum;
            chart.options.axisX.viewportMaximum = e.axisX[0].viewportMaximum;
            
            chart.options.axisY.viewportMinimum = e.axisY[0].viewportMinimum;
            chart.options.axisY.viewportMaximum = e.axisY[0].viewportMaximum;
            chart.render();
        }

        

    }
}

//--------------------Data Generator-----------------------
function dataGenerator(limit) {
    var y = 0;
    var points = [];
    for (var i = 0; i < limit; i += 1) {
        y += (Math.random() * 10 - 5);
        points.push({
            x: i - limit / 2,
            y: y
        });
    }
  ...