Synchronized Charts

[Nerviozzo96]

Hello every one, is there an option to synchronized panning/zooming option?

I mean if I do a zoom in one chart and then change to pan, can i change the option in the other to pan chart as well?

I let you my jsfiddle

Thanks!

• This topic was modified 1 month, 3 weeks ago by Nerviozzo96.

[Shashi Ranjan]

@nerviozzo96,

Yes, it is possible to sync zoom / pan button across multiple charts. You can achieve this by triggering the click event on the zoom / pan button on all charts when a user clicks on it in one of the charts as shown below:

function syncZoomPanButtonClick() {
  var toolbars = document.getElementsByClassName("canvasjs-chart-toolbar");
  for(var j = 0; j < toolbars.length; j++) {
    toolbars[j].firstChild.addEventListener("click", function(e) {
      for(var j = 0; j < toolbars.length; j++){
        if(this != toolbars[j].firstChild && e.isTrusted === true) {
          toolbars[j].firstChild.click();
        }
      }
    });
  }
}

Please take a look at this JSFiddle for a working example with sample code.

—
Shashi Ranjan
Team CanvasJS

[Nerviozzo96]

Thanks!