Zoom Out Functionality?

• March 9, 2017 at 10:14 pm #14532
  
  Andrew

  Hello there!

  First off, thanks for creating such a great product, we are happy to have just purchased and integrated into our app. One feature which we really want/need is the ability for a user to zoom out.

  Take for example if they are looking at 1-year of data and they zoom into a specific section of the data but accidentally zoom too far. As far as I know the only thing for them to do is reset the zoom entirely and try again but if they could just zoom out a little bit instead of resetting this would *huge* for our users.

  Does that functionality exist yet and if not, could it please get on your radar?

  Thanks!

  March 10, 2017 at 11:01 am #14539
  
  Bivek Singh

  Andrew,

  Thank you for choosing CanvasJS. As of now, Zoom Out in steps is not available out of the box. It is on our road map but we don’t have a timeline for it yet. Meanwhile, you can easily achieve by programmatically changing viewportMinimum and viewportMaximum upon clicking zoom-back button. Please find the code-snippet below.

  function back() {
    var viewportMinStack = chart.options.viewportMinStack;
    var viewportMaxStack = chart.options.viewportMaxStack;
  
    if(viewportMinStack.length > 1) {
      viewportMinStack.pop();
      viewportMaxStack.pop();
      axisX[0].viewportMinimum = viewportMinStack[viewportMinStack.length-1];
      axisX[0].viewportMaximum = viewportMaxStack[viewportMaxStack.length-1];
    }  else {
      axisX[0].viewportMinimum = null;
      axisX[0].viewportMaximum = null;
      backButton.style.visibility = "hidden";
    }
  
    chart.render();
  }
  
  backButton.addEventListener("click", back);

  Please take a look at this JSFiddle for complete code.
  

  —-
  Bivek Singh

  August 3, 2018 at 12:57 pm #22106
  
  leo

  Hello,

  Is there any update for Zoom Out in steps functionality?

  Thanks!

  August 3, 2018 at 1:33 pm #22107
  
  Priyanka M S

  leo,

  As addressed in previous reply by Bivek, zoom-back step-by-step isn’t available as an in-built feature as of now. However you can achieve this functionality with couple of lines of code. Please take a look at this JSFiddle for an example.

  __
  Priyanka M S
  Team CanvasJS

  August 3, 2018 at 2:05 pm #22108
  
  leo

  Hi Priyanka,

  But we want it on Reset Button. Is there any way by which we can trigger it on Reset button.

  Thanks,

  August 6, 2018 at 9:37 am #22122
  
  leo

  Hi Team CanvasJS

  Please reply.

  August 6, 2018 at 1:16 pm #22130
  
  Vishwas R

  @leo,

  You can overlay the zoom-back button on top of reset button to perform zoom-out step-by-step on clicking reset button. Please find the code snippet below.

  function back(){
    var viewportMinStack = chart.options.viewportMinStack;
    var viewportMaxStack = chart.options.viewportMaxStack;
    //if(!chart.axisX){
    //		chart.axisX = {};
    //	}
    if(viewportMinStack.length>1){
      viewportMinStack.pop();
      viewportMaxStack.pop();
      axisX.viewportMinimum = viewportMinStack[viewportMinStack.length-1];
      axisX.viewportMaximum = viewportMaxStack[viewportMaxStack.length-1];
    }
    else{
      axisX.viewportMinimum = null;
      axisX.viewportMaximum = null;
      document.getElementById("button").style.visibility = "hidden";
    }
    chart.render();
  }
  var button = document.getElementById( "button" );
  button.addEventListener("click", back);
  document.getElementsByClassName("canvasjs-chart-toolbar")[0].lastChild.style.visibility = 'hidden';

  Please take a look at this updated JSFiddle for complete code.
  

  —
  Vishwas R
  Team CanvasJS

  August 6, 2018 at 2:20 pm #22134
  
  leo

  Hello Vishwas R,

  Thank you so much!

  August 13, 2018 at 3:39 pm #22239
  
  leo

  Hi,

  In above fiddle snippet sometimes if I zoom in once I have to zoom out twice. How to handle this?

  August 14, 2018 at 10:17 am #22249
  
  leo

  Please reply.

  August 14, 2018 at 2:26 pm #22260
  
  Vishwas R

  @leo,
  It seems like there was some issue related to pushing & popping in the previously shared JSFiddle, please refer to this updated JSFiddle for improved code.

  —
  Vishwas R
  Team CanvasJS

  August 16, 2018 at 3:21 pm #22287
  
  leo

  Hi Vishwas R,

  It works fine for normal html page.I am using canvas js on popup.

  Following is the snippet that we are using.

  When I zoom in and zoom out it works fine but if after this I resize my window as I am calling ‘chart.render()’ it directly enables the ‘.canvasjs-chart-toolbar’ class element. And it unnecessary shows pan and my zoomout icons

  https://snippet.webix.com/1od45jej

  August 17, 2018 at 9:55 am #22300
  
  Vishwas R

  @leo,

  You can hide the zoom / reset toobar by changing CSS visibility property to hidden. Below is the code snippet.
  document.getElementsByClassName("canvasjs-chart-toolbar")[0].style.visibility = 'visible';

  Please take a look at this updated code.

  —
  Vishwas R
  Team CanvasJS

  August 17, 2018 at 3:49 pm #22305
  
  leo

  Hi Vishwas,

  It again has one issue. If I zoom in trice and and zoom out once and again try to zoom in once and zoom out to initial state. The sequence of zoom out and zoom in does not match.

  August 20, 2018 at 4:27 pm #22325
  
  Vishwas R

  @leo,

  We are looking into the issue that you have mentioned and will get back to you at the earliest.

  Meanwhile you can try handling pushing and popping according to the zoom / step-back action performed and let us know your feedback.

  —
  Vishwas R
  Team CanvasJS