Home Forums Chart Support Synchronized Charts

Synchronized Charts

Viewing 3 posts - 1 through 3 (of 3 total)
  • #33424

    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.
    #33500

    @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.

    Sync zoom / pan button across multiple charts


    Shashi Ranjan
    Team CanvasJS

    #33610

    Thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.