Zoom Out Functionality?

[leo]

Hello there,

Is there any update for this?

Thanks!

[Priyanka M S]

@leo,

As mentioned earlier Zoom Out in steps is not available as out of the box product feature.

CanvasJS comes with the source code for you to edit. This enables you to code any functionality missing in the product. The workaround code was to help you towards this and you can further edit the code as per your requirement.

We will consider this feature to the product roadmap but, will not be able to provide a timeline for the release with this feature, as we are working on other important features at this point in time.

__
Priyanka M S
Team CanvasJS

[chirag.jdk]

Hi, Is there update in above product feature, i think this is necessary requirements for chart.

[chirag.jdk]

Hi leo,
Did you got any work around, please provide me same, I need same Functionality

[Vishwas R]

@chirag-jdk,

As address by Bivek in previous reply, zoomout in steps is not available as an inbuild feature as of now. However you can achieve the same with the help of rangeChanging event. Please take a look at this JSFiddle for an example.

—
Vishwas R
Team CanvasJS

[efreed]

Thanks for posting how to do this!

Here is a simplified version that also works when zoomType = “xy”
https://jsfiddle.net/am7w4or6/

It does not require any other code, simply define this rangeChanged option. It uses the existing undo zoom button, but makes it step out across all the zooms seen while zooming in.

rangeChanged: function(e) {
	const opt = e.chart.options;
	// Initialize data
	if (!opt.axisXMinStack) {
		opt.axisXMinStack = [];
		opt.axisXMaxStack = [];
		opt.axisYMinStack = [];
		opt.axisYMaxStack = [];
		opt.axisX || (opt.axisX={});
		opt.axisY || (opt.axisY={});
	}
	// Remember each zoom level
	if (e.trigger === "zoom") {
		opt.axisXMinStack.push(e.axisX[0].viewportMinimum);
		opt.axisXMaxStack.push(e.axisX[0].viewportMaximum);
		opt.axisYMinStack.push(e.axisY[0].viewportMinimum);
		opt.axisYMaxStack.push(e.axisY[0].viewportMaximum);
	}
	// When asked to reset, re-render with zoom level before this one
	if (e.trigger === "reset") {
		opt.axisXMinStack.pop();
		opt.axisXMaxStack.pop();
		opt.axisYMinStack.pop();
		opt.axisYMaxStack.pop();
		opt.axisX.viewportMinimum = opt.axisXMinStack[opt.axisXMinStack.length-1] || null;
		opt.axisX.viewportMaximum = opt.axisXMaxStack[opt.axisXMaxStack.length-1] || null;
		opt.axisY.viewportMinimum = opt.axisYMinStack[opt.axisYMinStack.length-1] || null;
		opt.axisY.viewportMaximum = opt.axisYMaxStack[opt.axisYMaxStack.length-1] || null;
		e.chart.render();
	}
}

[Vishwas R]

@efreed,

Thanks for sharing the solution. This will help others :)

—
Vishwas R
Team CanvasJS

[Sivan]

Regarding Mr @efreed solution, I would like to know what if my graph consist of many lines and i specifically wants to zoom in a particular line, then during the reset time, the graph render back the entire chart causing the reset to be not in sequence, my zoomType = “xy”.

[Vishwas R]

@sivan,

Can you kindly share a JSFiddle with your use-case so that we can understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS