Drag JavaScript Chart Axis to Scale or Pan

1import {
2    EAxisAlignment,
3    EColor,
4    ELabelAlignment,
5    ENumericFormat,
6    FastLineRenderableSeries,
7    NumericAxis,
8    SciChartSurface,
9    XyDataSeries,
10    ZoomExtentsModifier,
11    EDragMode,
12    YAxisDragModifier,
13    XAxisDragModifier,
14    SciChartJsNavyTheme,
15} from "scichart";
16
17export const drawExample = async (rootElement: string | HTMLDivElement) => {
18    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
19        theme: new SciChartJsNavyTheme(),
20    });
21
22    const ID_X_AXIS_2 = "xAxis2";
23    const ID_Y_AXIS_2 = "yAxis2";
24
25    const setXAxis1 = () => {
26        const xAxis = new NumericAxis(wasmContext);
27        xAxis.axisAlignment = EAxisAlignment.Top;
28        xAxis.axisTitle = "Drag the X-Axis to Pan";
29        xAxis.labelProvider.numericFormat = ENumericFormat.Decimal;
30        xAxis.labelProvider.precision = 0;
31        sciChartSurface.xAxes.add(xAxis);
32    };
33
34    const setXAxis2 = () => {
35        const xAxis = new NumericAxis(wasmContext, {
36            id: ID_X_AXIS_2,
37        });
38        xAxis.axisAlignment = EAxisAlignment.Bottom;
39        xAxis.axisTitle = "Drag the X-Axis to Pan";
40        xAxis.labelProvider.numericFormat = ENumericFormat.Decimal;
41        xAxis.labelProvider.precision = 0;
42        sciChartSurface.xAxes.add(xAxis);
43    };
44
45    const setYAxis1 = () => {
46        const yAxis = new NumericAxis(wasmContext);
47        yAxis.axisAlignment = EAxisAlignment.Left;
48        yAxis.axisTitle = "Drag the Y-Axis to Scale";
49        yAxis.labelProvider.numericFormat = ENumericFormat.Decimal;
50        yAxis.labelProvider.precision = 0;
51        sciChartSurface.yAxes.add(yAxis);
52    };
53
54    const setYAxis2 = () => {
55        const yAxis = new NumericAxis(wasmContext, {
56            id: ID_Y_AXIS_2,
57        });
58        yAxis.axisAlignment = EAxisAlignment.Right;
59        yAxis.axisTitle = "Drag the Y-Axis to Scale";
60        yAxis.labelProvider.numericFormat = ENumericFormat.Decimal;
61        yAxis.labelProvider.precision = 0;
62        yAxis.labelStyle = { alignment: ELabelAlignment.Right };
63        sciChartSurface.yAxes.add(yAxis);
64    };
65
66    const setSeries1 = () => {
67        const lineSeries = new FastLineRenderableSeries(wasmContext, { stroke: EColor.Red });
68        lineSeries.strokeThickness = 3;
69        sciChartSurface.renderableSeries.add(lineSeries);
70        const lineData = new XyDataSeries(wasmContext);
71
72        // Define line data
73        const iStep = 20;
74        const fAmpltude = 100.0;
75        const fFrequency = 1.0;
76        for (let i = 0; i < 500 + iStep; i += iStep) {
77            lineData.append(i, Math.sin((fFrequency * i * Math.PI) / 180.0) * fAmpltude);
78        }
79
80        lineSeries.dataSeries = lineData;
81    };
82
83    const setSeries2 = () => {
84        const lineSeries = new FastLineRenderableSeries(wasmContext, { stroke: EColor.Purple });
85        lineSeries.xAxisId = ID_X_AXIS_2;
86        lineSeries.yAxisId = ID_Y_AXIS_2;
87        lineSeries.strokeThickness = 3;
88        sciChartSurface.renderableSeries.add(lineSeries);
89        const lineData = new XyDataSeries(wasmContext);
90
91        // Define line data
92        const iStep = 10;
93        const fAmpltude = 200.0;
94        const fFrequency = 1.5;
95        for (let i = 0; i < 1.5 * 500 + iStep; i += iStep) {
96            lineData.append(i, Math.sin((fFrequency * (i - 100) * Math.PI) / 180.0) * fAmpltude);
97        }
98
99        lineSeries.dataSeries = lineData;
100    };
101
102    setXAxis1();
103    setXAxis2();
104    setYAxis1();
105    setYAxis2();
106
107    setSeries1();
108    setSeries2();
109
110    // Add modifiers to enable YAxis and XAxis drag with dragMode as scale or pan
111    sciChartSurface.chartModifiers.add(
112        new XAxisDragModifier({ dragMode: EDragMode.Panning }),
113        new YAxisDragModifier({ dragMode: EDragMode.Scaling })
114    );
115
116    // Add a modifier to zoom to fit on double-click
117    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
118
119    sciChartSurface.zoomExtents();
120
121    return { sciChartSurface };
122};
123