SciChart.js provides an scrolling / panning behavior via the ZoomPanModifier type, available out of the box.

Besides common features which are inherited from the ChartModifierBase class, the ZoomPanModifier allows to restrict scrolling to the horizontal or vertical direction only, via the xyDirection property.

Adding a ZoomPanModifier to a Chart

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

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

// Add ZoomPan behavior
const zoomPanModifier = new ZoomPanModifier({
    xyDirection: EXyDirection.XyDirection,
});
sciChartSurface.chartModifiers.add(zoomPanModifier);

This results in the following behavior: