React Stacked Radial Column Chart | Stacked Radial Bar Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode, 
9    NumberRange, 
10    EAxisAlignment, 
11    EXyDirection,
12    PolarCategoryAxis,
13    TextLabelProvider,
14    PolarStackedColumnCollection,
15    PolarStackedColumnRenderableSeries,
16    EPolarLabelMode,
17    PolarLegendModifier,
18    ELegendPlacement,
19    GradientParams,
20    Point,
21    WaveAnimation
22} from "scichart";
23import { appTheme } from "../../../theme";
24
25const DATA: Record<string, number[]> = {
26    "Norway": [122, 125, 111],
27    "USA": [105, 110, 88],
28    "Germany": [92, 88, 60],
29    "Canada": [73, 64, 62],
30    "Austria": [64, 81, 87],
31    "Sweden": [57, 46, 55],
32    "Switzerland": [56, 45, 52],
33    "Russia": [47, 38, 35],
34    "Netherlands": [45, 44, 41],
35    "Finland": [43, 55, 59]
36}
37const COUNTRIES = Object.keys(DATA);
38
39const MEDALS = [
40    {
41        type: "Gold",
42        color: appTheme.MutedOrange,
43    },
44    {
45        type: "Silver",
46        color: appTheme.PaleBlue,
47    },
48    {
49        type: "Bronze",
50        color: appTheme.MutedRed,
51    }
52];
53
54export const drawExample = async (rootElement: string | HTMLDivElement) => {
55    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
56        theme: appTheme.SciChartJsTheme,
57        title: "Winter Olympic medals per country",
58        titleStyle: {
59            fontSize: 24,
60        }
61    });
62
63    // Create Polar, Radial axes
64    const xAxis = new PolarCategoryAxis(wasmContext, {
65        polarAxisMode: EPolarAxisMode.Radial,
66        axisAlignment: EAxisAlignment.Left,
67        visibleRange: new NumberRange(-1, 9),
68        zoomExtentsToInitialRange: true,
69
70        autoTicks: false,
71        majorDelta: 1,
72
73        labelStyle: {
74            color: "white",
75        },
76        useNativeText: true,
77        flippedCoordinates: true, // Norway will be outermost, Finland innermost
78        innerRadius: 0.1, // donut hole
79        drawMinorTickLines: false,
80        drawMinorGridLines: false,
81        drawMajorTickLines: false,
82        startAngle: Math.PI,
83    });
84    xAxis.labelProvider = new TextLabelProvider({
85        labels: Object.keys(DATA),
86    });
87    sciChartSurface.xAxes.add(xAxis);
88
89    const yAxis = new PolarNumericAxis(wasmContext, {
90        polarAxisMode: EPolarAxisMode.Angular,
91        axisAlignment: EAxisAlignment.Top,
92        polarLabelMode: EPolarLabelMode.Parallel,
93        drawMinorTickLines: false,
94        drawMinorGridLines: false,
95        drawMajorTickLines: false,
96        flippedCoordinates: true,
97        labelPrecision: 0,
98        useNativeText: true,
99        autoTicks: false,
100        majorDelta: 25,
101        startAngle: Math.PI,
102        totalAngle: Math.PI * 3 / 2 // 270 degrees, 3/4 of the circle
103    });
104    sciChartSurface.yAxes.add(yAxis);
105
106    // SERIES
107    const collection = new PolarStackedColumnCollection(wasmContext);
108    collection.animation = new WaveAnimation({ duration: 1000, fadeEffect: true });
109    
110    const xValues = Array.from({ length: COUNTRIES.length }, (_, i) => i);
111    for(let i = 0; i < 3; i++){
112        const polarColumn = new PolarStackedColumnRenderableSeries(wasmContext, {
113            dataSeries: new XyDataSeries(wasmContext, {
114                xValues,
115                yValues: COUNTRIES.map(country => DATA[country][i]),
116                dataSeriesName: MEDALS[i].type,
117            }),
118            stroke: "white",
119            strokeThickness: 1.5,
120            fill: MEDALS[i].color, // keep the "fill" although overriden by "fillLinearGradient" for legend marker color
121            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
122                { color: MEDALS[i].color, offset: 0.5 },
123                { color: "#222222", offset: 1 },
124            ]),
125        });
126        collection.add(polarColumn);
127    }
128
129    sciChartSurface.renderableSeries.add(collection);
130
131    // MODIFIERS
132    sciChartSurface.chartModifiers.add(
133        new PolarPanModifier({
134            xyDirection: EXyDirection.XyDirection,
135            zoomSize: true,
136            growFactor: 1
137        }),
138        new PolarZoomExtentsModifier(),
139        new PolarMouseWheelZoomModifier(),
140        new PolarLegendModifier({
141            placement: ELegendPlacement.TopLeft,
142            backgroundColor: "rgba(0,0,0,0.3)",
143            showCheckboxes: true,
144        })
145    );
146
147    return { sciChartSurface, wasmContext };
148};