Zoom and Pan with JavaScript Chart multiple Modifiers
Demonstrates different Zoom and Pan Modifiers on a JavaScript Chart including Mousewheel, Pinchzoom, Rubber-band zoom.
drawExample.ts
index.html
vanilla.ts
ExampleDataProvider.ts
theme.ts
1import { appTheme } from "../../../theme";
2import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
3
4import {
5 easing,
6 EHorizontalAnchorPoint,
7 EllipsePointMarker,
8 ENumericFormat,
9 EVerticalAnchorPoint,
10 FastLineRenderableSeries,
11 MouseWheelZoomModifier,
12 NumberRange,
13 NumericAxis,
14 PinchZoomModifier,
15 RubberBandXyZoomModifier,
16 SciChartSurface,
17 XyDataSeries,
18 ZoomExtentsModifier,
19 ZoomPanModifier,
20 EExecuteOn,
21 TextAnnotation,
22 ECoordinateMode,
23 NativeTextAnnotation,
24 EWrapTo,
25} from "scichart";
26
27export const drawExample = async (rootElement: string | HTMLDivElement) => {
28 // Create a SciChartSurface with X,Y Axis
29 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
30 theme: appTheme.SciChartJsTheme,
31 });
32
33 sciChartSurface.xAxes.add(
34 new NumericAxis(wasmContext, {
35 growBy: new NumberRange(0.05, 0.05),
36 labelFormat: ENumericFormat.Decimal,
37 labelPrecision: 4,
38 })
39 );
40
41 sciChartSurface.yAxes.add(
42 new NumericAxis(wasmContext, {
43 growBy: new NumberRange(0.1, 0.1),
44 labelFormat: ENumericFormat.Decimal,
45 labelPrecision: 4,
46 })
47 );
48
49 // Add some data
50 const data1 = ExampleDataProvider.getFourierSeriesZoomed(0.6, 0.13, 5.0, 5.15);
51 const lineSeries0 = new FastLineRenderableSeries(wasmContext, {
52 dataSeries: new XyDataSeries(wasmContext, {
53 xValues: data1.xValues,
54 yValues: data1.yValues,
55 dataSeriesName: "First Line Series",
56 }),
57 strokeThickness: 3,
58 stroke: appTheme.VividSkyBlue,
59 pointMarker: new EllipsePointMarker(wasmContext, {
60 width: 7,
61 height: 7,
62 strokeThickness: 0,
63 fill: appTheme.VividSkyBlue,
64 }),
65 });
66 sciChartSurface.renderableSeries.add(lineSeries0);
67
68 const data2 = ExampleDataProvider.getFourierSeriesZoomed(0.5, 0.12, 5.0, 5.15);
69 const lineSeries1 = new FastLineRenderableSeries(wasmContext, {
70 dataSeries: new XyDataSeries(wasmContext, {
71 xValues: data2.xValues,
72 yValues: data2.yValues,
73 dataSeriesName: "Second Line Series",
74 }),
75 strokeThickness: 3,
76 stroke: appTheme.VividOrange,
77 pointMarker: new EllipsePointMarker(wasmContext, {
78 width: 7,
79 height: 7,
80 strokeThickness: 0,
81 fill: appTheme.VividOrange,
82 }),
83 });
84 sciChartSurface.renderableSeries.add(lineSeries1);
85
86 const data3 = ExampleDataProvider.getFourierSeriesZoomed(0.4, 0.11, 5.0, 5.15);
87 const lineSeries2 = new FastLineRenderableSeries(wasmContext, {
88 dataSeries: new XyDataSeries(wasmContext, {
89 xValues: data3.xValues,
90 yValues: data3.yValues,
91 dataSeriesName: "Third Line Series",
92 }),
93 strokeThickness: 3,
94 stroke: appTheme.MutedPink,
95 pointMarker: new EllipsePointMarker(wasmContext, {
96 width: 7,
97 height: 7,
98 strokeThickness: 0,
99 fill: appTheme.MutedPink,
100 }),
101 });
102 sciChartSurface.renderableSeries.add(lineSeries2);
103
104 // Here is where we add the zoom, pan behaviour
105 sciChartSurface.chartModifiers.add(
106 // use RubberBandXyZoomModifier with Right Mouse Button
107 // use easingFunction to animate zoom
108 new RubberBandXyZoomModifier({
109 executeCondition: { button: EExecuteOn.MouseRightButton },
110 easingFunction: easing.elastic,
111 }),
112 // enable pan withZoomPanModifier, and additionally e PinchZoom to allow zooming with pinch gesture on touch devices by setting enableZoom
113 new ZoomPanModifier({ enableZoom: true }),
114 new MouseWheelZoomModifier(),
115 // remark: PinchZoom functionality was included into ZoomPanModifier.
116 // if having any conflicts, check the value of modifier.enableZoom
117 // new PinchZoomModifier(),
118 // Zoom extents on double click
119 new ZoomExtentsModifier({ easingFunction: easing.elastic })
120 );
121
122 // Add annotations to tell the user what to do
123 sciChartSurface.annotations.add(
124 new TextAnnotation({
125 text: "Zoom Pan Modifiers Demo",
126 x1: 0.5,
127 y1: 0.5,
128 yCoordShift: -50,
129 xCoordinateMode: ECoordinateMode.Relative,
130 yCoordinateMode: ECoordinateMode.Relative,
131 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
132 verticalAnchorPoint: EVerticalAnchorPoint.Center,
133 opacity: 0.33,
134 fontSize: 48,
135 fontWeight: "Bold",
136 })
137 );
138 sciChartSurface.annotations.add(
139 new TextAnnotation({
140 text: "Multiple zoom, pan behaviours enabled on a single chart",
141 x1: 0.5,
142 y1: 0.5,
143 yCoordShift: 0,
144 xCoordinateMode: ECoordinateMode.Relative,
145 yCoordinateMode: ECoordinateMode.Relative,
146 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
147 verticalAnchorPoint: EVerticalAnchorPoint.Center,
148 opacity: 0.38,
149 fontSize: 20,
150 })
151 );
152 sciChartSurface.annotations.add(
153 new NativeTextAnnotation({
154 text: "Try mouse-wheel, left/right mouse drag, mousewheel on axis, pinch zoom, double-click to zoom to fit etc...",
155 x1: 0.5,
156 y1: 0.6,
157 xCoordinateMode: ECoordinateMode.Relative,
158 yCoordinateMode: ECoordinateMode.Relative,
159 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
160 verticalAnchorPoint: EVerticalAnchorPoint.Center,
161 opacity: 0.45,
162 fontSize: 17,
163 wrapTo: EWrapTo.ViewRect,
164 })
165 );
166 return { wasmContext, sciChartSurface };
167};
168Multiple Zoom Pan Modifiers - JavaScript
Overview
This example demonstrates a JavaScript implementation of a SciChart.js chart that integrates multiple zoom and pan modifiers to deliver an interactive data visualization experience. The primary purpose is to showcase how various zooming and panning behaviors can be combined on a single chart for enhanced user interaction.
Technical Implementation
The chart is initialized in an asynchronous function called drawExample which uses SciChartSurface.create() to set up the main chart surface along with configured X and Y axes (using NumericAxis that support custom number ranges and label formatting. Chart series are added using the FastLineRenderableSeries] and enhanced with custom point markers like the EllipsePointMarker. Multiple zoom and pan chart modifiers are then attached to the chart: the RubberBandXyZoomModifier (which leverages an elastic easing function and is triggered with the right mouse button), the ZoomPanModifier (providing both pan and pinch zoom functionality on touch devices), the MouseWheelZoomModifier, and the ZoomExtentsModifier. This careful integration of modifiers ensures they work in concert without conflicts, thus enabling robust interactive behaviors.
Features and Capabilities
The example highlights several advanced features including real-time animated zooming with easing transitions, comprehensive panning via mouse drag and pinch gestures, and interactive zoom extents triggered on double-click. In addition, it adds instructional annotations using both TextAnnotation and NativeTextAnnotation to guide the user. These capabilities combine to deliver a highly interactive charting experience that is both visually dynamic and functionally rich.
Integration and Best Practices
Developers can follow best practices for integrating SciChart.js into JavaScript applications by referring to the Getting Started with SciChart JS guide. The implementation also demonstrates effective resource management by leveraging the WebAssembly context (wasmContext) for high performance, and it properly cleans up resources via sciChartSurface.delete(). Additional performance optimization strategies and memory management best practices can be found in the Memory Best Practices documentation.
Performance Considerations
The example benefits from the performance advantages offered by WebAssembly for rendering, which is essential for managing multiple renderable series and complex user interactions simultaneously. Advanced easing animations, such as elastic easing, are integrated to provide smooth animated transitions during zoom operations, further enhancing the overall user experience.
javascript Chart Examples & Demos
See Also: Zoom and Pan a Chart (9 Demos)
JavaScript Chart with Multiple X Axes
Demonstrates Multiple X & Y Axis on a JavaScript Chart using SciChart.js. SciChart supports unlimited left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
JavaScript Chart with Secondary Y Axes
Demonstrates Secondary Y Axis on a JavaScript Chart using SciChart.js. SciChart supports unlimited, multiple left, right, top, bottom X, Y axis with configurable alignment and individual zooming, panning
Drag JavaScript Chart Axis to Scale or Pan
Demonstrates how to Zoom, Scale or Pan individual Axis on a JavaScript Chart with SciChart.js AxisDragModifiers
Zoom and Pan a Realtime JavaScript Chart
Demonstrates how to zoom and pan a realtime JavaScript Chart while it is updating, with SciChart.js ZoomState API
Zoom and Pan with Overview Chart
Demonstrates how to zoom and pan with an Overview Chart
Virtualized JavaScript Charts: Load Data on Zoom/Pan
shows how to load data on zoom/pan and how to create an overview chart for this case.
JavaScript Polar Modifiers | Polar Interactivity Modifiers Demo
Explore SciChart's Polar Interactivity Modifiers including zooming, panning, and cursor tracking. Try the demo to trial the Polar Chart Behavior Modifiers.
High Precision Date Axis
Demonstrates 64-bit precision Date Axis in SciChart.js handling Nanoseconds to Billions of Years
JavaScript Overview for SubCharts with Range Selection
Demonstrates how to create multiple synchronized subcharts with an overview range selector using SciChart.js and SubSurfaces