Sync Zooming and Panning across Multiple Charts

With CanvasJS, you can easily sync zooming and panning across multiple charts.
In this tutorial, we will cover how to sync multiple charts.It works for all chart types with axes.

Here are the steps:

Step 1:

We will write a dataPointsGenerator method to generate random dataPoints.

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;
}

This method generates random dataPoints in the format:

[ { x: 0, y: 11 }, { x: 1, y: 5 }, { x: 0, y: -7 }, … ]

Step 2:

Create two basics charts with dataPoints generated randomly from the dataPointsGenerator method:

HTML:

<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript:

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();

Please refer to zoomEnabled, zoomType and rangeChanged to know more about them. In the above example, zoomType is set to “x”, set it to “xy” to enable zooming on both axes.

NOTE: We will write a syncHandler method (passed to rangeChanged property) in the next step to handle syncing across multiple charts.

Step 3:

The syncHandler method to handle syncing of both axis X and axis Y across the charts.This is a generic method which works for any number of charts – you can use it in your own application as well.

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.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();

        }
    }
}

Please refer to axisX.viewportMinimum, axisX.viewportMaximum, axisY.viewportMinimum and axisY.viewportMaximum to know more about them.

Finalising

To summarize, in order to sync zooming and panning across multiple charts, we can create and pass method which handles the syncing, and pass it to rangeChanged property of the chart.

Below is the compilation of final code.

If you have any questions, please feel free to ask in our forums.Ask Question