React Point-Markers Chart

1import { appTheme } from "../../../theme";
2
3import {
4    SciChartSurface,
5    XyDataSeries,
6    NumericAxis,
7    NumberRange,
8    EllipsePointMarker,
9    SquarePointMarker,
10    CrossPointMarker,
11    SpritePointMarker,
12    TrianglePointMarker,
13    createImageAsync,
14    ZoomPanModifier,
15    ZoomExtentsModifier,
16    MouseWheelZoomModifier,
17    SplineLineRenderableSeries,
18    LegendModifier,
19    ELegendOrientation,
20    ELegendPlacement,
21    TSciChart,
22} from "scichart";
23
24function createData(wasmContext: TSciChart) {
25    // Create some dataseries
26    const dataSeries1 = new XyDataSeries(wasmContext, { dataSeriesName: "Ellipse Marker" });
27    const dataSeries2 = new XyDataSeries(wasmContext, { dataSeriesName: "Square Marker" });
28    const dataSeries3 = new XyDataSeries(wasmContext, { dataSeriesName: "Triangle Marker" });
29    const dataSeries4 = new XyDataSeries(wasmContext, { dataSeriesName: "Cross Marker" });
30    const dataSeries5 = new XyDataSeries(wasmContext, { dataSeriesName: "Custom Marker" });
31
32    // Append values
33    const dataSize = 30;
34    for (let i = 0; i < dataSize; i++) {
35        dataSeries1.append(i, Math.random());
36        dataSeries2.append(i, Math.random() + 1);
37        dataSeries3.append(i, Math.random() + 1.8);
38        dataSeries4.append(i, Math.random() + 2.5);
39        dataSeries5.append(i, Math.random() + 3.6);
40    }
41
42    // Insert a break into th eline = we do this to test double.NaN for the point marker types
43    dataSeries1.update(15, NaN);
44    dataSeries2.update(15, NaN);
45    dataSeries3.update(15, NaN);
46    dataSeries4.update(15, NaN);
47    dataSeries5.update(15, NaN);
48
49    return [dataSeries1, dataSeries2, dataSeries3, dataSeries4, dataSeries5];
50}
51
52export const drawExample = (customPointImage: string) => async (rootElement: string | HTMLDivElement) => {
53    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
54        theme: appTheme.SciChartJsTheme,
55    });
56
57    const dataSeriesArr = createData(wasmContext);
58
59    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
60    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
61
62    // Add a line series with EllipsePointMarker
63    sciChartSurface.renderableSeries.add(
64        new SplineLineRenderableSeries(wasmContext, {
65            stroke: appTheme.VividSkyBlue,
66            strokeThickness: 3,
67            pointMarker: new EllipsePointMarker(wasmContext, {
68                width: 13,
69                height: 13,
70                strokeThickness: 2,
71                fill: appTheme.VividSkyBlue,
72                stroke: appTheme.ForegroundColor,
73            }),
74            dataSeries: dataSeriesArr[0],
75        })
76    );
77
78    // Add a scatter series with SquarePointMarker
79    sciChartSurface.renderableSeries.add(
80        new SplineLineRenderableSeries(wasmContext, {
81            stroke: appTheme.VividPink,
82            strokeThickness: 3,
83            pointMarker: new SquarePointMarker(wasmContext, {
84                width: 11,
85                height: 11,
86                strokeThickness: 2,
87                fill: appTheme.MutedPink,
88                stroke: appTheme.VividPink,
89            }),
90            dataSeries: dataSeriesArr[1],
91        })
92    );
93
94    // Add a scatter series with TrianglePointMarker
95    sciChartSurface.renderableSeries.add(
96        new SplineLineRenderableSeries(wasmContext, {
97            stroke: appTheme.VividOrange,
98            strokeThickness: 3,
99            pointMarker: new TrianglePointMarker(wasmContext, {
100                width: 13,
101                height: 13,
102                strokeThickness: 2,
103                fill: appTheme.VividOrange,
104                stroke: appTheme.VividOrange,
105            }),
106            dataSeries: dataSeriesArr[2],
107        })
108    );
109
110    // Add a scatter series with CrossPointMarker
111    sciChartSurface.renderableSeries.add(
112        new SplineLineRenderableSeries(wasmContext, {
113            stroke: appTheme.VividPurple,
114            strokeThickness: 3,
115            pointMarker: new CrossPointMarker(wasmContext, {
116                width: 13,
117                height: 13,
118                strokeThickness: 3,
119                stroke: appTheme.VividPurple,
120            }),
121            dataSeries: dataSeriesArr[3],
122        })
123    );
124
125    // Add a scatter series with Custom Image using SpritePointMarker
126    const imageBitmap = await createImageAsync(customPointImage);
127
128    sciChartSurface.renderableSeries.add(
129        new SplineLineRenderableSeries(wasmContext, {
130            stroke: appTheme.MutedOrange,
131            strokeThickness: 2,
132            pointMarker: new SpritePointMarker(wasmContext, {
133                image: imageBitmap,
134            }),
135            dataSeries: dataSeriesArr[4],
136        })
137    );
138
139    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
140    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
141
142    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
143    sciChartSurface.chartModifiers.add(
144        new LegendModifier({
145            orientation: ELegendOrientation.Horizontal,
146            placement: ELegendPlacement.TopLeft,
147        })
148    );
149
150    sciChartSurface.zoomExtents();
151
152    return { sciChartSurface, wasmContext };
153};
154