JavaScript Charting Documentation - SciChart JavaScript Charts SDK v3.x
Get Started: Tutorials, Examples > Worked Examples > How to: Pan the Chart with the MouseWheel
How to: Pan the Chart with the MouseWheel

Question

SciChart.js Forums: Zoom and Pan Behaviour

Currently when we scroll the mouse pointer the zoom level is increasing/decreasing and when we click and drag the pan the chart. What I want is when we scroll the chart it should change the visible range (Pan chart), and clicking and selecting the area need to zoom like RubberBandXyZoomModifier. But I need to zoom only the X axis. Y axis should be the same as before zoom. Is this possible with SciChart.js?

Discussion

Read the discussion at SciChart.js Forum: Zoom and Pan Behaviour

Full Solution

We posted a solution on Github here.

To add the MouseWheel panning behaviour to the chart, we start off with a MouseWheelZoomModifier, but we override the function modifierMouseWheel.

In here we perform a scroll on the X-Axis using the mouseWheelDelta value:

import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D";
const mouseWheelModifier = new MouseWheelZoomModifier();
mouseWheelModifier.modifierMouseWheel = (args) => {
    const delta = args.mouseWheelDelta * 0.1;
    mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
        x.scroll(delta, EClipMode.None);
    });
};

This results in the panning (scrolling) on mousewheel in the chart.

Further Reading

This example makes use of JavaScript's ability to override a function. By assigning mouseWheelModifier.modifierMouseWheel = (args) => { } we are able to complete override the default mouse wheel handling.

The args are of type ModifierMouseArgs. This contains a property for the mouseWheelDelta.

Finally, we can access the parent SciChartSurface via the mouseWheelModifier.parentSurface property, then access the SciChartSurface.xaxes collection and finally call AxisBase2D.scroll().

The MouseWheelZoomModifier documentation page

To find out about the capabilities of the MouseWheelZoomModifier, see it's dedicated documentation page here.

The MousewheelZoomModifier documentation

MouseWheelZoomModifier functions and properties

For a list of available functions on MouseWheelZoomModifier that can be overridden see the TypeDoc page for this type.

AxisBase2D functions and properties

For a list of further functions on the axis see AxisBase in the TypeDoc.