Zoom and Pan with Overview Chart
Demonstrates how to zoom and pan with an Overview Chart using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
RandomWalkGenerator.ts
theme.ts
1import {
2 EAutoRange,
3 ECoordinateMode,
4 EExecuteOn,
5 EHorizontalAnchorPoint,
6 EllipsePointMarker,
7 EMultiLineAlignment,
8 EVerticalAnchorPoint,
9 EWrapTo,
10 FastLineRenderableSeries,
11 MouseWheelZoomModifier,
12 NativeTextAnnotation,
13 NumberRange,
14 NumericAxis,
15 RubberBandXyZoomModifier,
16 SciChartOverview,
17 SciChartSurface,
18 TextAnnotation,
19 XyDataSeries,
20 XyScatterRenderableSeries,
21 ZoomExtentsModifier,
22 ZoomPanModifier,
23} from "scichart";
24import { appTheme } from "../../../theme";
25import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
26
27export const overviewOptions = {
28 theme: appTheme.SciChartJsTheme,
29};
30
31export const drawExample = async (rootElement: string | HTMLDivElement) => {
32 const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
33 theme: appTheme.SciChartJsTheme,
34 });
35
36 // Create and add an XAxis and YAxis
37 sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(500, 600) }));
38 sciChartSurface.yAxes.add(
39 new NumericAxis(wasmContext, {
40 autoRange: EAutoRange.Always,
41 growBy: new NumberRange(0.1, 0.1),
42 })
43 );
44
45 const POINTS = 1000;
46
47 const data0 = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(POINTS);
48
49 // Add a line series to the chart
50 sciChartSurface.renderableSeries.add(
51 new FastLineRenderableSeries(wasmContext, {
52 dataSeries: new XyDataSeries(wasmContext, { xValues: data0.xValues, yValues: data0.yValues }),
53 strokeThickness: 3,
54 stroke: appTheme.VividSkyBlue,
55 })
56 );
57
58 const data1 = new RandomWalkGenerator().Seed(42069).getRandomWalkSeries(POINTS);
59
60 // Add a scatter series to the chart
61 sciChartSurface.renderableSeries.add(
62 new XyScatterRenderableSeries(wasmContext, {
63 dataSeries: new XyDataSeries(wasmContext, { xValues: data1.xValues, yValues: data1.yValues }),
64 pointMarker: new EllipsePointMarker(wasmContext, { fill: appTheme.VividPink, strokeThickness: 0 }),
65 strokeThickness: 3,
66 })
67 );
68
69 // Add an annotation with instructions over the chart
70 sciChartSurface.annotations.add(
71 new NativeTextAnnotation({
72 x1: 0.02,
73 y1: 0.02,
74 xCoordinateMode: ECoordinateMode.Relative,
75 yCoordinateMode: ECoordinateMode.Relative,
76 horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
77 verticalAnchorPoint: EVerticalAnchorPoint.Top,
78 fontSize: 18,
79 opacity: 0.55,
80 textColor: appTheme.ForegroundColor,
81 text: "SciChart.js supports an Overview scrollbar. Zoom the main chart or drag the overview to see it update",
82 wrapTo: EWrapTo.ViewRect,
83 multiLineAlignment: EMultiLineAlignment.Left,
84 })
85 );
86
87 // This is the primary approach o. This will automatically bind to the parent surface
88 // displaying its series. Zooming the chart will zoom the overview and vice versa
89 // const overview = await SciChartOverview.create(sciChartSurface, divOverviewId, {
90 // theme: appTheme.SciChartJsTheme,
91 // });
92
93 // Optional: add some zoom pan interaction
94 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
95 sciChartSurface.chartModifiers.add(
96 new RubberBandXyZoomModifier({ executeCondition: { button: EExecuteOn.MouseRightButton } })
97 );
98 sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
99 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
100
101 return { sciChartSurface };
102};
103
104export const drawOverview = async (sciChartSurface: SciChartSurface, divOverviewId: string | HTMLDivElement) => {
105 const overview = await SciChartOverview.create(sciChartSurface, divOverviewId, overviewOptions);
106
107 return {sciChartSurface: overview.overviewSciChartSurface};
108};
109Overview Modifier Example - JavaScript
Overview
This example demonstrates how to create an advanced interactive chart using SciChart.js with an integrated overview scrollbar. The chart is built entirely with JavaScript and showcases asynchronous initialization, detailed axis configuration, multiple renderable series, rich interactive modifiers, and informative annotations.
Technical Implementation
The chart is initialized asynchronously using the SciChartSurface.create() method, which provides both the WebAssembly context and the chart surface. Two numeric axes are configured: one with a fixed visible range and another that uses auto-ranging with the autoRange and growBy properties as detailed in the NumericAxis documentation. Data is generated via a random walk algorithm and rendered using a FastLineRenderableSeries for line rendering and an XyScatterRenderableSeries for scatter points. Interactive behavior is enabled through the combination of modifiers such as ZoomPanModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, and MouseWheelZoomModifier; these techniques are explained in the Adding Zooming, Panning Behavior guide.
Finally, an Overview scrollbar is added to the chart, using the function sciChartOverview.create() which creates and binds an overview to a parent SciChartSurface, placing it in it's own HTMLDivElement.
Features and Capabilities
The example features advanced performance optimization through efficient rendering with the FastLineRenderableSeries, which is ideal for handling large data sets. It also implements annotations using NativeTextAnnotation in relative coordinate mode to overlay instructional text on the chart. The Overview chart allows scrolling back and forth through the dataset, as described in the Scrollbars with SciChartOverview documentation page.
Integration and Best Practices
This implementation follows best practices for asynchronous initialization and modular development in JavaScript, as recommended in the Getting Started with SciChart JS guide.
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 JavaScript Chart multiple Modifiers
Demonstrates how to use multiple Zoom and Pan Modifiers on a JavaScript Chart with SciChart.js
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