Reply To: Zoom Out Functionality?

[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();
	}
}