Angular Polar Radar Chart with Multiple Radial Axes

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        drawLabels: false,
64        drawMinorGridLines: false,
65        drawMajorTickLines: false,
66        drawMinorTickLines: false,
67        startAngle: Math.PI / 2, // start at 12 o'clock
68        innerRadius: 0, 
69    });
70    sciChartSurface.yAxes.add(radialYAxis); 
71
72    const angularXAxis = new PolarCategoryAxis(wasmContext, {
73        polarAxisMode: EPolarAxisMode.Angular,
74        labels: LABELS,
75        majorGridLineStyle: {
76            color: EColor.BackgroundColor,
77            strokeThickness: 1,
78            strokeDashArray: [5, 5]
79        },
80        flippedCoordinates: true, // go clockwise
81        drawMinorGridLines: false,
82        useNativeText: true,
83        polarLabelMode: EPolarLabelMode.Horizontal,
84        labelFormat: ENumericFormat.NoFormat,
85        startAngle: Math.PI / 2, // start at 12 o'clock
86    });
87    sciChartSurface.xAxes.add(angularXAxis);
88
89    const xValues = Array.from({ length: LABELS.length + 1 }, (_, i) => i); 
90    // +1 to complete the radar chart without overlap of first and last labels
91    
92    const polarMountain = new PolarMountainRenderableSeries(wasmContext, {
93        dataSeries: new XyDataSeries(wasmContext, {
94            xValues: xValues,
95            yValues: [...DATA_SET[0].values, DATA_SET[0].values[0]], // +1 append first value to complete the radar chart
96            dataSeriesName: DATA_SET[0].name
97        }),
98        stroke: DATA_SET[0].color,
99        fill: DATA_SET[0].color + "30",
100        strokeThickness: 4,
101        animation: new FadeAnimation({ duration: 1000 })
102    });
103    sciChartSurface.renderableSeries.add(polarMountain);
104
105    // You can just as well use a PolarLineRenderableSeries
106    const polarLine = new PolarLineRenderableSeries(wasmContext, {
107        dataSeries: new XyDataSeries(wasmContext, {
108            xValues: xValues,
109            yValues: [...DATA_SET[1].values, DATA_SET[1].values[0]], // +1 append first value to complete the radar chart
110            dataSeriesName: DATA_SET[1].name
111        }),
112        stroke: DATA_SET[1].color,
113        strokeThickness: 4,
114        pointMarker: new EllipsePointMarker(wasmContext, {
115            width: 10,
116            height: 10,
117            strokeThickness: 2,
118            fill: DATA_SET[1].color,
119            stroke: EColor.White,
120        }),
121        animation: new FadeAnimation({ duration: 1000 })
122    });
123    sciChartSurface.renderableSeries.add(polarLine);
124
125    sciChartSurface.chartModifiers.add(
126        new PolarPanModifier(),
127        new PolarZoomExtentsModifier(),
128        new PolarMouseWheelZoomModifier({ growFactor: 0.0002 }),
129        new PolarLegendModifier({ showSeriesMarkers: true, showCheckboxes: true }),
130    );
131
132    return { sciChartSurface, wasmContext };
133};
134