React Polar Scatter Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode,
9    NumberRange,
10    EAxisAlignment,
11    EPolarLabelMode,
12    PolarXyScatterRenderableSeries,
13    SweepAnimation,
14    PolarLegendModifier,
15    ELegendOrientation,
16    TLegendItem,
17    EActionType,
18    EllipsePointMarker,
19    TrianglePointMarker,
20} from "scichart";
21import { appTheme } from "../../../theme";
22
23export const drawExample = async (rootElement: string | HTMLDivElement) => {
24    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
25        theme: appTheme.SciChartJsTheme,
26    });
27
28    const radialYAxis = new PolarNumericAxis(wasmContext, {
29        polarAxisMode: EPolarAxisMode.Radial,
30        axisAlignment: EAxisAlignment.Right,
31        visibleRange: new NumberRange(0, 1400),
32        zoomExtentsToInitialRange: true,
33
34        drawMinorTickLines: false,
35        drawMajorTickLines: false,
36        drawMinorGridLines: false,
37
38        startAngle: Math.PI / 2,
39        drawLabels: false, // no radial labels
40    });
41    sciChartSurface.yAxes.add(radialYAxis);
42
43    const polarXAxis = new PolarNumericAxis(wasmContext, {
44        polarAxisMode: EPolarAxisMode.Angular,
45        axisAlignment: EAxisAlignment.Top,
46        polarLabelMode: EPolarLabelMode.Parallel,
47        visibleRange: new NumberRange(0, 360),
48        startAngle: Math.PI / 2, // start at 12 o'clock
49        flippedCoordinates: true, // go clockwise
50        zoomExtentsToInitialRange: true,
51
52        autoTicks: false,
53        majorDelta: 30,
54
55        drawMinorTickLines: false,
56        drawMajorTickLines: false,
57        drawMinorGridLines: false,
58
59        useNativeText: true,
60        labelPrecision: 0,
61        labelPostfix: "°",
62    });
63    sciChartSurface.xAxes.add(polarXAxis);
64
65    const xValues = Array.from({ length: 540 }, (_, i) => i);
66    const SCATTER_DATA = [
67        {
68            yVals: xValues.map((x) => 2 * x + x * Math.random() * 0.5),
69            color: appTheme.VividOrange,
70            name: "Circle Series",
71            pointMarkerType: EllipsePointMarker,
72        },
73        {
74            yVals: xValues.map((x) => x + x * Math.random() * 0.5),
75            color: appTheme.VividSkyBlue,
76            name: "Triangular Series",
77            pointMarkerType: TrianglePointMarker,
78        },
79    ];
80
81    SCATTER_DATA.forEach(({ yVals, color, name, pointMarkerType }) => {
82        const polarScatter = new PolarXyScatterRenderableSeries(wasmContext, {
83            dataSeries: new XyDataSeries(wasmContext, {
84                xValues: xValues,
85                yValues: yVals,
86                dataSeriesName: name,
87            }),
88            opacity: 0.7,
89            stroke: color, // set stroke color for Legend modifier markers
90
91            pointMarker: new pointMarkerType(wasmContext, {
92                width: 10,
93                height: 10,
94                stroke: color,
95                strokeThickness: 1,
96                fill: color + "88",
97            }),
98            animation: new SweepAnimation({ duration: 800 }),
99        });
100        sciChartSurface.renderableSeries.add(polarScatter);
101    });
102
103    // Extra feature -> Custom legend marker with SVG shapes
104    const customMarkerLegendModifier = new PolarLegendModifier({
105        showCheckboxes: true,
106        showSeriesMarkers: true,
107        backgroundColor: "#66666633",
108    });
109    // override "getLegendItemHTML" to add custom SVG shapes
110    customMarkerLegendModifier.sciChartLegend.getLegendItemHTML = (
111        orientation: ELegendOrientation,
112        showCheckboxes: boolean,
113        showSeriesMarkers: boolean,
114        item: TLegendItem
115    ): string => {
116        const display = orientation === ELegendOrientation.Vertical ? "flex" : "inline-flex";
117        let str = `<span class="scichart__legend-item" style="display: ${display}; align-items: center; margin-right: 4px; padding: 0 4px 0 5px; white-space: nowrap; gap: 5px">`;
118
119        if (showCheckboxes) {
120            const checked = item.checked ? "checked" : "";
121            str += `<input ${checked} type="checkbox" id="${item.id}">`;
122        }
123
124        if (showSeriesMarkers) {
125            str += `<svg 
126                xmlns="http://www.w3.org/2000/svg"
127                for="${item.id}" 
128                style="width: 15px; height: 15px;" 
129                viewBox="0 0 24 24"
130                stroke-width="2"
131            >
132                ${(() => {
133                    switch (item.name) {
134                        case SCATTER_DATA[0].name: // Circle
135                            return `<circle cx="12" cy="12" r="9" fill="${item.color + "88"}" stroke="${item.color}"/>`;
136
137                        case SCATTER_DATA[1].name: // Triangle
138                            return `<polygon points="12,2 22,22 2,22" fill="${item.color + "88"}" stroke="${
139                                item.color
140                            }"/>`;
141
142                        default: // Others
143                            return `<rect x="2" y="2" width="20" height="20" fill="${item.color + "88"}" stroke="${
144                                item.color
145                            }"/>`;
146                    }
147                })()}
148            </svg>`;
149        }
150        str += `<label for="${item.id}">${item.name}</label>`;
151        str += `</span>`;
152        return str;
153    };
154
155    sciChartSurface.chartModifiers.add(
156        customMarkerLegendModifier,
157        new PolarPanModifier(),
158        new PolarZoomExtentsModifier(),
159        new PolarMouseWheelZoomModifier({
160            defaultActionType: EActionType.Zoom,
161        })
162    );
163
164    return { sciChartSurface, wasmContext };
165};
166