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