React Polar Pie Chart

1import {
2    PolarColumnRenderableSeries,
3    PolarMouseWheelZoomModifier,
4    PolarZoomExtentsModifier,
5    PolarPanModifier,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode, 
9    NumberRange, 
10    XyxDataSeries,
11    EColumnMode,
12    MetadataPaletteProvider,
13    IPointMetadata,
14    EColumnDataLabelPosition,
15    EPolarLabelMode,
16    EMultiLineAlignment,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20const DATA = [
21    { label: "React.js", color: appTheme.MutedBlue, value: 45.3 },
22    { label: "Angular", color: appTheme.VividRed, value: 31.9 },
23    { label: "Vue.js", color: appTheme.VividTeal, value: 14.2 },
24    { label: "Svelte", color: appTheme.VividOrange, value: 4.8 },
25    { label: "Next.js", color: appTheme.Indigo, value: 3.8 },
26    { label: "Ember.js", color: appTheme.MutedRed, value: 2.1 }
27];
28
29type ICustomMetadataPoint = { label: string; fill: string; value: number } & IPointMetadata;
30
31export const drawExample = async (rootElement: string | HTMLDivElement) => {
32    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
33        theme: appTheme.SciChartJsTheme,
34        title: "Most Popular JS Frameworks 2024",
35        titleStyle: {
36            fontSize: 24
37        }
38    });
39
40    const radialYAxis = new PolarNumericAxis(wasmContext, {
41        polarAxisMode: EPolarAxisMode.Radial,
42        visibleRangeLimit: new NumberRange(0, 1),
43        startAngleDegrees: 90,
44        isVisible: false
45    });
46    sciChartSurface.yAxes.add(radialYAxis);
47
48    const angularXAxis = new PolarNumericAxis(wasmContext, {
49        polarAxisMode: EPolarAxisMode.Angular,
50        startAngleDegrees: 90,
51        isVisible: false
52    });
53    sciChartSurface.xAxes.add(angularXAxis);
54
55    const metadata: ICustomMetadataPoint[] = [];
56    const xValues: number[] = [];
57    const x1Values: number[] = [];
58
59    let cumulative = 0;
60    for (let i = 0; i < DATA.length; i++) {
61        xValues.push(cumulative);
62        cumulative += DATA[i].value;
63        x1Values.push(cumulative);
64        metadata.push({ 
65            isSelected: false,
66            fill: DATA[i].color,
67            label: DATA[i].label,
68            value: DATA[i].value
69        });
70    }
71
72    const pieSegmentsFromColumns = new PolarColumnRenderableSeries(wasmContext, {
73        dataSeries: new XyxDataSeries(wasmContext, {
74            xValues: xValues,
75            x1Values: x1Values,
76            yValues: Array(xValues.length).fill(1),
77            metadata
78        }),
79        stroke: "#000000",
80        strokeThickness: 2,
81        columnXMode: EColumnMode.StartEnd, // each segment starts at value `x` and ends at value `x1`
82        paletteProvider: new MetadataPaletteProvider(), // use colors from the metadata for each column value
83        dataLabels: {
84            metaDataSelector: (metadata: IPointMetadata) => {
85                const label = (metadata as ICustomMetadataPoint).label;
86                const value = (metadata as ICustomMetadataPoint).value;
87
88                if (value < 5) {
89                    return label + ' - ' + value + '%'; // keep smaller segments' label single-line
90                } else {
91                    return label + '\n' + value + '%';
92                }
93            },
94            style: {
95                fontSize: 18,
96                multiLineAlignment: EMultiLineAlignment.Center,
97                lineSpacing: 12 
98            },
99            color: "#FFFFFF",
100            labelYPositionMode: EColumnDataLabelPosition.Inside,
101            polarLabelMode: EPolarLabelMode.Perpendicular
102        }
103    });
104    sciChartSurface.renderableSeries.add(pieSegmentsFromColumns);
105
106    sciChartSurface.chartModifiers.add(
107        new PolarPanModifier(),
108        new PolarZoomExtentsModifier(),
109        new PolarMouseWheelZoomModifier()
110    );
111
112    return { sciChartSurface, wasmContext };
113};