Home forums Using CanvasJS Zoom / Pan button default to pan with multiple charts

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #11753

    crees
    Member

    I enabled zoom / panning on my chart and found a post that helped me hide the zoom / panning toggle button with css.

    .canvasjs-chart-toolbar> button:first-child {
      display: none !important;
    }

    Also to set the hidden button to panning mode.

    var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
    var childElement = document.getElementsByTagName("button");
    if(childElement[0].getAttribute("state") === "pan"){
      childElement[0].click();
        }

    My problem is, when there is more than one chart on the page, the first chart’s button get set to panning but the second doesn’t. Heres a JS fiddle showing the problem.

    http://jsfiddle.net/v5d8qv3q/

    #11754

    Vishwas R
    Keymaster

    Crees,

    When you have multiple charts in a page, there will be multiple childElement (zoom/pan buttons). So automatically clicking all childElement will solve the issue.

    var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
    var childElement = document.getElementsByTagName("button");
    for(var i=0;i<childElement.length;i++){
      if(childElement[i].getAttribute("state") === "pan"){
        childElement[i].click();
      }
    }

    Here is updated example.

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

You must be logged in to reply to this topic.