Sync Multiple Chart Axis Ranges - CanvasJS JavaScript Charts

Sync Multiple Chart Axis Ranges - 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>
<div id="chartContainer2" style="height: 60px; width: 100%;"></div>

JavaScript

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

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

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

//-------- Chart 2 ---------------
var chart2 = new CanvasJS.Chart("chartContainer2", {
    zoomEnabled: true,
   toolTip:{
   shared: true,
 },
    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 (e.trigger === "reset") {
            chart.options.axisX.viewportMinimum = chart.options.axisX.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.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
        });
    }
    return points;
}