React Polar Radar Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EColor, 
9    EPolarAxisMode, 
10    EPolarGridlineMode, 
11    PolarCategoryAxis,
12    ENumericFormat,
13    EPolarLabelMode,
14    PolarMountainRenderableSeries,
15    FadeAnimation,
16    PolarLegendModifier,
17    EllipsePointMarker,
18    PolarLineRenderableSeries,
19} from "scichart";
20import { appTheme } from "../../../theme";
21
22const LABELS = [
23    "Complexity",
24    "Memory Usage",
25    "Stability",
26    "Adaptability",
27    "Scalability",
28    "Cache Efficiency"
29];
30
31const DATA_SET = [
32    {
33        name: "Quick Sort",
34        color: appTheme.VividSkyBlue,
35        values: [7, 8, 2, 8, 9, 9]
36    },
37    {   
38        name: "Bubble Sort",
39        color: appTheme.VividOrange,
40        values: [2, 9, 10, 5, 1, 2], 
41    },
42]
43
44// this chart expresses the complexity, memory usage, stability, adaptability, scalability, and cache efficiency of two sorting algorithms
45
46export const drawExample = async (rootElement: string | HTMLDivElement) => {
47    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
48        theme: appTheme.SciChartJsTheme
49    });
50
51    const radialYAxis = new PolarNumericAxis(wasmContext, {
52        polarAxisMode: EPolarAxisMode.Radial,
53        gridlineMode: EPolarGridlineMode.Polygons,
54        useNativeText: true,
55        labelPrecision: 0,
56        zoomExtentsToInitialRange: true,
57
58        majorGridLineStyle: {
59            color: EColor.BackgroundColor,
60            strokeThickness: 1,
61            strokeDashArray: [5, 5]
62        },
63        labelStyle: {
64            color: EColor.White,
65            fontSize: 16,
66        },
67        drawLabels: false,
68        drawMinorGridLines: false,
69        drawMajorTickLines: false,
70        drawMinorTickLines: false,
71        startAngle: Math.PI / 2, // start at 12 o'clock
72        innerRadius: 0, 
73    });
74    sciChartSurface.yAxes.add(radialYAxis); 
75
76    const angularXAxis = new PolarCategoryAxis(wasmContext, {
77        polarAxisMode: EPolarAxisMode.Angular,
78        labels: LABELS,
79        labelStyle: {
80            fontSize: 16,
81            color: EColor.White,
82        },
83        majorGridLineStyle: {
84            color: EColor.BackgroundColor,
85            strokeThickness: 1,
86            strokeDashArray: [5, 5]
87        },
88        flippedCoordinates: true, // go clockwise
89        drawMinorGridLines: false,
90        useNativeText: true,
91        polarLabelMode: EPolarLabelMode.Horizontal,
92        labelFormat: ENumericFormat.NoFormat,
93        startAngle: Math.PI / 2, // start at 12 o'clock
94    });
95    sciChartSurface.xAxes.add(angularXAxis);
96
97    const xValues = Array.from({ length: LABELS.length + 1 }, (_, i) => i); 
98    // +1 to complete the radar chart without overlap of first and last labels
99    
100    const polarMountain = new PolarMountainRenderableSeries(wasmContext, {
101        dataSeries: new XyDataSeries(wasmContext, {
102            xValues: xValues,
103            yValues: [...DATA_SET[0].values, DATA_SET[0].values[0]], // +1 append first value to complete the radar chart
104            dataSeriesName: DATA_SET[0].name
105        }),
106        stroke: DATA_SET[0].color,
107        fill: DATA_SET[0].color + "30",
108        strokeThickness: 4,
109        animation: new FadeAnimation({ duration: 1000 })
110    });
111    sciChartSurface.renderableSeries.add(polarMountain);
112
113    // You can just as well use a PolarLineRenderableSeries
114    const polarLine = new PolarLineRenderableSeries(wasmContext, {
115        dataSeries: new XyDataSeries(wasmContext, {
116            xValues: xValues,
117            yValues: [...DATA_SET[1].values, DATA_SET[1].values[0]], // +1 append first value to complete the radar chart
118            dataSeriesName: DATA_SET[1].name
119        }),
120        stroke: DATA_SET[1].color,
121        strokeThickness: 4,
122        pointMarker: new EllipsePointMarker(wasmContext, {
123            width: 10,
124            height: 10,
125            strokeThickness: 2,
126            fill: DATA_SET[1].color,
127            stroke: EColor.White,
128        }),
129        animation: new FadeAnimation({ duration: 1000 })
130    });
131    sciChartSurface.renderableSeries.add(polarLine);
132
133    sciChartSurface.chartModifiers.add(
134        new PolarPanModifier(),
135        new PolarZoomExtentsModifier(),
136        new PolarMouseWheelZoomModifier({ growFactor: 0.0002 }),
137        new PolarLegendModifier({ showSeriesMarkers: true, showCheckboxes: true }),
138    );
139
140    return { sciChartSurface, wasmContext };
141};
142