Method call for Zoom / pan Function in Canvas Js

[santhoshnarendra]

Hope you will find this link useful : https://jsfiddle.net/santy_naren/xhrng6w9/2/

[Vishwas R]

@santhoshnarendra,

Are you looking for programatically zooming / panning the chart? If so you can achieve it by changing viewportMinimum and viewportMaximum. Please take a look at this JSFiddle for the same.

—
Vishwas R
Team CanvasJS

[santhoshnarendra]

Dear Vishwa Thanks .. similarly I want the Pan Zoom Option to Come as we scroll

[Vishwas R]

@santhoshnarendra,

Setting zoomEnabled property to true will show zoom / pan & reset buttons, once the chart is zoomed.
zoomEnabled: true,
Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[santhoshnarendra]

Vishwa Thanks for your support but I need the Pan Function to be called as soon as we zoom . In the above given example only after selecting a region we can chose Pan Function . If you cant understand do Call me at +91 80561 60364

[Vishwas R]

@santhoshnarendra,

You can perform button click programmatically to switch to pan mode by default & hide the zoom/pan button using CSS to do so. Below is the code-snippet for the same.

-----CSS----
.canvasjs-chart-toolbar> button:first-child {
  display: none !important;
}
----JS----
var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
var childElement = document.getElementsByTagName("button");
if(childElement[0].getAttribute("state") === "pan"){
  childElement[0].click();
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[santhoshnarendra]

How to make pan function to work across x and y axis irrespective of the viewport maximum or minimum like google maps to scroll

[Vishwas R]

@santhoshnarendra,

zoomType property allows you to control the axis for which zooming and panning are enabled. Setting zoomType to ‘xy’ will let you zoom / pan across both x and y axes. Please refer documentation for more info.

—
Vishwas R
Team CanvasJS