Home Forums StockChart Support zoomin/zoomout on wheel movement

zoomin/zoomout on wheel movement

Viewing 2 posts - 1 through 2 (of 2 total)
  • #32874

    Hi ,

    I want to implement zoom in/zoom out feature using wheel event in stock chart react .
    as in :

    https://jsfiddle.net/canvasjs/hk6ozc4L/

    Please suggest with some reference.

    #32956

    @gaurav-sharma6,

    You can zoom individual chart by rotating mouse-wheel by binding wheel event to the container of individual charts of StockChart. Please find the code snippet for the same below.

    function addWheelZoom(stockChart) {
      stockChart.charts[0].container.addEventListener("wheel", function(e){
        e.preventDefault();
    
        var slider = stockChart.navigator.slider;
        var sliderMinimum = slider.get("minimum"),
            sliderMaximum = slider.get("maximum");
        
        var interval = (slider.get("maximum") - slider.get("minimum"))/50; // change interval based on the range of slider
        var newMin, newMax;
    
        if (e.deltaY < 0) {
          newMin = sliderMinimum + interval;
          newMax = sliderMaximum - interval;
        }
        else if (e.deltaY > 0) {
          newMin = sliderMinimum - interval;
          newMax = sliderMaximum + interval;
        }
    
        if(newMax < stockChart.navigator.axisX[0].get("maximum") || newMin > stockChart.navigator.axisX[0].get("minimum")) { 
          stockChart.navigator.slider.set("minimum", newMin, false);
          stockChart.navigator.slider.set("maximum", newMax);
        }
      });
    }

    Please take a look at this JSFiddle for a working example on zooming StockChart using mouse-wheel.

    stockchart with zooming feature using mouse wheel


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.