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