Zoom / Pan button default to pan with multiple charts

[crees]

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/

[Vishwas R]

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.