JavaScript Scatter Chart

1import { appTheme } from "../../../theme";
2import {
3    EllipsePointMarker,
4    MouseWheelZoomModifier,
5    NumericAxis,
6    NumberRange,
7    SciChartSurface,
8    SweepAnimation,
9    TrianglePointMarker,
10    XyDataSeries,
11    XyScatterRenderableSeries,
12    ZoomExtentsModifier,
13    ZoomPanModifier,
14} from "scichart";
15
16export const drawExample = async (rootElement: string | HTMLDivElement) => {
17    // Create a SciChartSurface
18    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
19        theme: appTheme.SciChartJsTheme,
20    });
21
22    // Create X,Y Axis
23    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
24    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));
25
26    // Create some xValues, yValues arrays
27    const xValues = Array.from({ length: 250 }, (x, i) => i);
28    const yValues = xValues.map((x) => 3 * x + x * Math.random());
29    const y2Values = xValues.map((x) => x + x * Math.random());
30
31    // Create a Scatter Series with EllipsePointMarker
32    // Multiple point-marker types are available including Square, Triangle, Cross and Sprite (custom)
33    sciChartSurface.renderableSeries.add(
34        new XyScatterRenderableSeries(wasmContext, {
35            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
36            pointMarker: new EllipsePointMarker(wasmContext, {
37                width: 14,
38                height: 14,
39                strokeThickness: 0,
40                fill: appTheme.VividSkyBlue,
41            }),
42            opacity: 0.67,
43            animation: new SweepAnimation({ duration: 600, fadeEffect: true }),
44        })
45    );
46
47    // Add a second scatter chart with a different pointmarker
48    sciChartSurface.renderableSeries.add(
49        new XyScatterRenderableSeries(wasmContext, {
50            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y2Values }),
51            pointMarker: new TrianglePointMarker(wasmContext, {
52                width: 15,
53                height: 15,
54                strokeThickness: 0,
55                fill: appTheme.VividOrange,
56            }),
57            opacity: 0.77,
58            animation: new SweepAnimation({ duration: 600, fadeEffect: true, delay: 200 }),
59        })
60    );
61
62    // Optional: Add Interactivity Modifiers
63    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
64    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
65    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
66
67    sciChartSurface.zoomExtents();
68
69    return { sciChartSurface, wasmContext };
70};
71