Home Forums Chart Support Customizing the Zoom functionality in the Mouse wheel event.

Customizing the Zoom functionality in the Mouse wheel event.

Viewing 7 posts - 1 through 7 (of 7 total)
  • #42538

    Hello Team,
    I am trying to change the chart zoom functionality to a Mouse wheel like Google maps zoom. Is there any possible way to achieve that? If so how?

    #42543

    @elanchezhiyan,

    You can zoom the chart using mousewheel by attaching wheel event to the chart. Please find the code snippet below.

    document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("wheel", function(e){
      e.preventDefault();
      
      if(e.clientX < chart.plotArea.x1 || e.clientX > chart.plotArea.x2 || e.clientY < chart.plotArea.y1 || e.clientY > chart.plotArea.y2)
      	return;
        
      var axisX = chart.axisX[0];
      var viewportMin = axisX.get("viewportMinimum"),
          viewportMax = axisX.get("viewportMaximum"),
          interval = axisX.get("minimum");
    
      var newViewportMin, newViewportMax;
    
      if (e.deltaY < 0) {
        newViewportMin = viewportMin + interval;
        newViewportMax = viewportMax - interval;
      }
      else if (e.deltaY > 0) {
        newViewportMin = viewportMin - interval;
        newViewportMax = viewportMax + interval;
      }
    
      if(newViewportMin >= chart.axisX[0].get("minimum") && newViewportMax <= chart.axisX[0].get("maximum") && (newViewportMax - newViewportMin) > (2 * interval)){
        chart.axisX[0].set("viewportMinimum", newViewportMin, false);
        chart.axisX[0].set("viewportMaximum", newViewportMax);
      }
    
    });

    Please take a look at this JSFiddle for a working example.

    Zoom chart using mousewheel


    Thangaraj Raman
    Team CanvasJS

    #42547

    Hello @Thangaraj Raman,
    In this, the X-axis only gets Zoomed but we need both X-axis and Y-axis to get zoomed equally like Google map.

    #42597

    Hello @Thangaraj Raman,

    Is there is any update in this.

    #42602

    @elanchezhiyan,

    You can achieve zooming using mouse wheel by updating the viewportMinimum and viewportMaximum for both x-axis and y-axis based on the mouse position.

    Please check this JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    #59976

    @thangaraj-raman Hello! I tried zooming according to your example and for some reason it didn’t work. Please tell me what is my mistake?
    https://jsfiddle.net/mtds437a/1/

    #59994

    @diano4ka,

    The example that I shared earlier was created for a numeric axis, however your example has a date-time axis. Please check this updated JSFiddle for an example on zooming using mouse wheel for a date-time axis.


    Thangaraj Raman
    Team CanvasJS

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.