Home Forums Feature Requests & Feedback Zoom Out Functionality?

Zoom Out Functionality?

Viewing 9 posts - 16 through 24 (of 24 total)
  • #22558


    Hello there,

    Is there any update for this?




    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



    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.
    zooming chart with zoom out step by step button

    Vishwas R
    Team CanvasJS


    Thanks for posting how to do this!

    Here is a simplified version that also works when zoomType = “xy”

    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") {
    	// When asked to reset, re-render with zoom level before this one
    	if (e.trigger === "reset") {
    		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;


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

    Vishwas R
    Team CanvasJS


    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”.



    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

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.