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 10 months, 2 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!

[Nerviozzo96]

Hi there, im having a little problem with this.
I want to have 2 charts with different values (that mean different maximums) with same width or margin.
jsfiddle
I let you an image to clarify what I mean

[Manoj Mohan]

@nerviozzo96,

You can align y-axis across multiple charts by setting the margin property. The margin value has to be calculated based on the bounds of y-axis as shown in the code below –

var axisYBoundMax = 0;
for (var i=0; i<charts.length; i++) {
  axisYBoundMax = Math.max(axisYBoundMax, charts[i].axisY[0].bounds.x2);
}

for(var i = 0; i < charts.length; i++) {
  charts[i].axisY[0].set("margin", axisYBoundMax - (charts[i].axisY[0].bounds.x2 - charts[i].axisY[0].bounds.x1));
} 

Please take a look at this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Nerviozzo96]

Thanks, I guess the same applies for the x axis right?

[Nerviozzo96]

Hi there, this dont work on chart updates. I let you the example
Try to hide and show Series multiple times

[Manoj Mohan]

@nerviozzo96,

Thanks, I guess the same applies for the x axis right?

Yes, you can align x-axis across multiple chart using same logic as mentioned above.

Hi there, this dont work on chart updates. I let you the example
Try to hide and show Series multiple times

You can reset the margin of y-axis to 0 before aligning the y-axis across multiple charts as shown in the code snippet below.

for(var i = 0; i < charts.length; i++) {
   charts[i].axisY[0].set("margin", 0);
}

Also, please take a look at this updated JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS