JavaScript 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        useNativeText: true,
74        flippedCoordinates: true, // Norway will be outermost, Finland innermost
75        innerRadius: 0.1, // donut hole
76        drawMinorTickLines: false,
77        drawMinorGridLines: false,
78        drawMajorTickLines: false,
79        startAngle: Math.PI,
80    });
81    xAxis.labelProvider = new TextLabelProvider({
82        labels: Object.keys(DATA),
83    });
84    sciChartSurface.xAxes.add(xAxis);
85
86    const yAxis = new PolarNumericAxis(wasmContext, {
87        polarAxisMode: EPolarAxisMode.Angular,
88        axisAlignment: EAxisAlignment.Top,
89        polarLabelMode: EPolarLabelMode.Parallel,
90        drawMinorTickLines: false,
91        drawMinorGridLines: false,
92        drawMajorTickLines: false,
93        flippedCoordinates: true,
94        labelPrecision: 0,
95        useNativeText: true,
96        autoTicks: false,
97        majorDelta: 25,
98        startAngle: Math.PI,
99        totalAngle: Math.PI * 3 / 2 // 270 degrees, 3/4 of the circle
100    });
101    sciChartSurface.yAxes.add(yAxis);
102
103    // SERIES
104    const collection = new PolarStackedColumnCollection(wasmContext);
105    collection.animation = new WaveAnimation({ duration: 1000, fadeEffect: true });
106    
107    const xValues = Array.from({ length: COUNTRIES.length }, (_, i) => i);
108    for(let i = 0; i < 3; i++){
109        const polarColumn = new PolarStackedColumnRenderableSeries(wasmContext, {
110            dataSeries: new XyDataSeries(wasmContext, {
111                xValues,
112                yValues: COUNTRIES.map(country => DATA[country][i]),
113                dataSeriesName: MEDALS[i].type,
114            }),
115            // stroke: "white",
116            strokeThickness: 1.5,
117            fill: MEDALS[i].color, // keep the "fill" although overriden by "fillLinearGradient" for legend marker color
118            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
119                { color: MEDALS[i].color, offset: 0.5 },
120                { color: "#222222", offset: 1 },
121            ]),
122        });
123        collection.add(polarColumn);
124    }
125
126    sciChartSurface.renderableSeries.add(collection);
127
128    // MODIFIERS
129    sciChartSurface.chartModifiers.add(
130        new PolarPanModifier({
131            xyDirection: EXyDirection.XyDirection,
132            zoomSize: true,
133            growFactor: 1
134        }),
135        new PolarZoomExtentsModifier(),
136        new PolarMouseWheelZoomModifier(),
137        new PolarLegendModifier({
138            placement: ELegendPlacement.TopLeft,
139            backgroundColor: "rgba(0,0,0,0.3)",
140            showCheckboxes: true,
141        })
142    );
143
144    return { sciChartSurface, wasmContext };
145};