Zoom and Pan with Overview Chart

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};
109