SciChart.js provides an zooming / panning behavior when scrolling the mouse-wheel, or two-finger drag on touch devices via the MouseWheelZoomModifier type, available out of the box.

Besides common features which are inherited from the ChartModifierBase class, the MouseWheelZoomModifier type allows you to specify how fast the chart zooms in or out via the growFactor property.

Adding a MouseWheelZoomModifier to a Chart

A MouseWheelZoomModifier can be added to the sciChartSurface.chartModifiers collection to enable scaling or panning behavior. For example:

// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);

// Add MouseWheel Zoom behavior
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({
       growFactor: 0.001; // each mousewheel click zooms 0.1%
}));

This results in the following behavior: