SciChart.js JavaScript 2D Charts API > ChartModifier API > Zooming and Panning > ZoomExtentsModifier

SciChart.js provides the ability to Zoom Extents the entire chart (zoom to fit data) by double-clicking the chart area with the ZoomExtentsModifier, available out of the box.

Besides common features which are inherited from the ChartModifierBase class, the ZoomExtentsModifier allows animated zooming via the isAnimatedanimationDuration and easingFunction properties.

Adding a ZoomExtentsModifier to a Chart

ZoomExtentsModifier can be added to the sciChartSurface.chartModifiers collection to enable zoom to fit behavior. For example:

Copy Code
// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
// Add Zoom Extents behavior
const zoomExtentsModifier = new ZoomExtentsModifier({ 
   isAnimated: true,
   animationDuration: 400,
   easingFunction: easing.outExpo
sciChartSurface.chartModifiers.add(zoomExtentsModifier );

This results in the following behavior when double-clicking the chart:

See Also