SciChart.js provides an scrolling / panning behavior via the ZoomPanModifier type, available out of the box.
As of SciChart.js v3.2, ZoomPanModifier now inherits PinchZoomModifier, allowing you to configure zooming, panning and touch-to-zoom interaction via a single modifier.
All the properties for the PinchZoomModifier may be set to control vertical/horizontal zooming, include/exclude axis from pinch zooming etc..
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:
This results in the following behavior:
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
async function zoomPan2D(divElementId) {
const {
SciChartSurface,
NumericAxis,
FastLineRenderableSeries,
XyDataSeries,
SciChartJsNavyTheme,
TextAnnotation,
ECoordinateMode,
EHorizontalAnchorPoint,
EVerticalAnchorPoint
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const xValues = [];
const yValues = [];
const yValues2 = [];
for(let i = 0; i < 100; i++) {
xValues.push(i);
yValues.push(0.2 * Math.sin(i*0.1) - Math.cos(i * 0.01));
yValues2.push(0.5 * Math.cos(i*0.11) - Math.sin(i * 0.015));
}
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
stroke: "#FF6600",
strokeThickness: 5,
dataSeries: new XyDataSeries(wasmContext, {
xValues,
yValues,
})
}));
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
stroke: "#50C7E0",
strokeThickness: 5,
dataSeries: new XyDataSeries(wasmContext, {
xValues,
yValues: yValues2,
})
}));
// Add annotations to tell the user what to do
sciChartSurface.annotations.add(new TextAnnotation({
text: "ZoomPanModifier 2D Demo",
x1: 0.5, y1: 0.5,
yCoordShift: 0,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.33,
fontSize: 36,
fontWeight: "Bold"
}));
sciChartSurface.annotations.add(new TextAnnotation({
text: "Pinch, touch and drag to zoom and pan",
x1: 0.5, y1: 0.5,
yCoordShift: 50,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.45,
fontSize: 17,
}));
// #region ExampleA
const {
ZoomPanModifier,
EXyDirection
} = SciChart;
// or for npm: import { PinchZoomModifier } from "scichart";
// Add Zoom Pan and Pinch behaviour to the chart. All parameters are optional
sciChartSurface.chartModifiers.add(new ZoomPanModifier({
// Specifies Panning in X,Y direction or both
xyDirection: EXyDirection.XyDirection,
// Enables Pinch Zoom functionality
enableZoom: true,
// Optional parameters specify the amount of pinch zooming in X/Y Default is 0.005
horizontalGrowFactor: 0.005,
verticalGrowFactor: 0.005
// Optional parameters to include/exclude X/Y axis from zooming by axis.id
// If not specified, by default, all axis are included in zooming
// either use:
// excludedXAxisIds: ["XAxis1"],
// excludedYAxisIds: ["YAxis1"],
// or:
// includedXAxisIds: ["XAxis2"],
// includedYAxisIds: ["YAxis2"],
}));
// Add the modifier to the chart
sciChartSurface.chartModifiers.add(new PinchZoomModifier());
// #endregion
};
zoomPan2D("scichart-root");
async function builderExample(divElementId) {
// #region ExampleB
// Demonstrates how to configure the ZoomPanModifier in SciChart.js using the Builder API
const {
chartBuilder,
EThemeProviderType,
EAxisType,
EChart2DModifierType,
EXyDirection
} = SciChart;
// or, for npm, import { chartBuilder, ... } from "scichart"
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: { theme: { type: EThemeProviderType.Dark } },
xAxes: { type: EAxisType.NumericAxis },
yAxes: { type: EAxisType.NumericAxis },
modifiers: [{
type: EChart2DModifierType.ZoomPan,
options: {
// Specifies Panning in X,Y direction or both
xyDirection: EXyDirection.XyDirection,
// Enables Pinch Zoom functionality
enableZoom: true,
// Optional parameters specify the amount of pinch zooming in X/Y Default is 0.005
horizontalGrowFactor: 0.005,
verticalGrowFactor: 0.005
}
}]
});
// #endregion
};
// Uncomment this to use the builder example
//builderExample("scichart-root");
Additional Properties
Allow Panning in only one direction (X or Y)
Panning can be restricted to X or Y by setting the ZoomPanModifier.xyDirection property.
Allow Panning on only one X/Y axis
Panning can be restricted to a single X or Y axis by setting the ZoomPanModifier.xAxisId or yAxisId properties.
Adjust Pinch Zooming / Scale Factor
Horizontal and vertical pinch zoom scale factor can be adjusted via the following properties. The default value is set to 0.005.
- ZoomPanModifier.horizontalGrowFactor
- ZoomPanModifier.verticalGrowFactor
Include/Exclude Certain Axis from Pinch Zoom
The ZoomPanModifier allows you to include or exclude certain axis by axis.id from the pinch zoom operation.
By default all axis are included, to exclude one or more X or Y axis, set the following property:
| Exclude Axis |
Copy Code
|
|---|---|
// Exclude a specific axis from the pinch zoom operation zoomPanModifier.includeXAxis(axisXInstance, false); zoomPanModifier.includeYAxis(axisYInstance, false); // Include specific axis from the pinch zoom operation zoomPanModifier.includeXAxis(axisXInstance, true); zoomPanModifier.includeYAxis(axisYInstance, true); // Reset flags zoomPanModifier.includeAllAxes(); |
|
Allow Pinch Zoom in only one direction
If you want to enable pinch zooming in only one direction, e.g. horizontal only, modify the ZoomPanModifier.verticalGrowFactor to equal 0.