Reply To: Problem zooming to the end of a chart

[Indranil]

@jaywebz,

To zoom into the extreme end of the plot area, you need to first check difference between the viewportMinimum/viewportMaximum and minimum/maximum of axes. If the difference is less than a specified threshold, you can set the viewportMinimum/viewportMaximum to the minimum/maximum value of the axes respectively inside the rangeChanged event handler as shown below –

var extremeRangeThreshold = 30;
.
.
rangeChanged: rangeChangedHandler,
.
.
function rangeChangedHandler(e) {
  if(e.trigger === "reset") {
    chart.options.axisX.viewportMinimum = null;
    chart.options.axisX.viewportMaximum = null;
    chart.options.axisY.viewportMinimum = null;
    chart.options.axisY.viewportMaximum = null;
    chart.render();
    return;
  }

  if(e.trigger === "zoom"){
    if(e.chart.axisX[0].maximum - e.chart.axisX[0].viewportMaximum <= extremeRangeThreshold){
      chart.options.axisX.viewportMaximum = null;
      chart.render();
      chart.options.axisX.viewportMaximum = e.chart.axisX[0].maximum; 
    }

    if(e.chart.axisX[0].viewportMinimum - e.chart.axisX[0].minimum <= extremeRangeThreshold){
      chart.options.axisX.viewportMinimum = null;
      chart.render();
      chart.options.axisX.viewportMinimum = e.chart.axisX[0].minimum;  
    }

    if(e.chart.axisY[0].maximum - e.chart.axisY[0].viewportMaximum <= extremeRangeThreshold){
      chart.options.axisY.viewportMaximum = null;
      chart.render();
      chart.options.axisY.viewportMaximum = e.chart.axisY[0].maximum;
    }

    if(e.chart.axisY[0].viewportMinimum - e.chart.axisY[0].minimum <= extremeRangeThreshold){
      chart.options.axisY.viewportMaximum = null;
      chart.render();
      chart.options.axisY.viewportMinimum = e.chart.axisY[0].minimum;   
    }
    chart.render();
  }
}

Please check this JSFiddle for a complete working code.

___________
Indranil Deo
Team CanvasJS