You must be logged in to post your query.
Home › Forums › Feature Requests & Feedback › Zoom Out Functionality?
Tagged: zoom out
Hello there,
Is there any update for this?
Thanks!
@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
Hi, Is there update in above product feature, i think this is necessary requirements for chart.
Hi leo, Did you got any work around, please provide me same, I need same Functionality
@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
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(); } }
@efreed,
Thanks for sharing the solution. This will help others :)
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”.
@sivan,
Can you kindly share a JSFiddle with your use-case so that we can understand the scenario better and help you out?
You must be logged in to reply to this topic. Login/Register