React Polar Radial Column Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    XyDataSeries,
5    PolarNumericAxis,
6    SciChartPolarSurface,
7    EPolarAxisMode,
8    NumberRange,
9    EAxisAlignment,
10    EPolarLabelMode,
11    PolarColumnRenderableSeries,
12    EStrokePaletteMode,
13    parseColorToUIntArgb,
14    DefaultPaletteProvider,
15    Thickness,
16    EColumnDataLabelPosition,
17    WaveAnimation,
18    PolarArcZoomModifier,
19} from "scichart";
20import { appTheme } from "../../../theme";
21
22class ColumnPaletteProvider extends DefaultPaletteProvider {
23    private readonly strokePalette: number[];
24    private readonly fillPalette: number[];
25
26    constructor() {
27        super();
28        this.strokePaletteMode = EStrokePaletteMode.SOLID;
29
30        this.strokePalette = [
31            parseColorToUIntArgb(appTheme.VividPink),
32            parseColorToUIntArgb(appTheme.MutedRed),
33            parseColorToUIntArgb(appTheme.VividOrange),
34            parseColorToUIntArgb(appTheme.VividSkyBlue),
35            parseColorToUIntArgb(appTheme.Indigo),
36        ];
37
38        this.fillPalette = [
39            parseColorToUIntArgb(appTheme.VividPink + "88"),
40            parseColorToUIntArgb(appTheme.MutedRed + "88"),
41            parseColorToUIntArgb(appTheme.VividOrange + "88"),
42            parseColorToUIntArgb(appTheme.VividSkyBlue + "88"),
43            parseColorToUIntArgb(appTheme.Indigo + "88"), // fills have 50% opacity
44        ];
45    }
46
47    private getThresholdIndex(yValue: number): number {
48        // Clamp value between 0 and 99, then divide into 5 equal parts
49        const clamped = Math.max(0, Math.min(99, yValue));
50        return Math.floor(clamped / 20);
51    }
52
53    overrideStrokeArgb(xValue: number, yValue: number, index: number, opacity: number, metadata: any) {
54        const idx = this.getThresholdIndex(yValue);
55        return this.strokePalette[idx];
56    }
57
58    overrideFillArgb(xValue: number, yValue: number, index: number, opacity: number, metadata: any) {
59        const idx = this.getThresholdIndex(yValue);
60        return this.fillPalette[idx];
61    }
62}
63
64export const drawExample = async (rootElement: string | HTMLDivElement) => {
65    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
66        theme: appTheme.SciChartJsTheme,
67    });
68
69    const xAxis = new PolarNumericAxis(wasmContext, {
70        polarAxisMode: EPolarAxisMode.Radial,
71        axisAlignment: EAxisAlignment.Left,
72        visibleRange: new NumberRange(0.5, 15),
73        polarLabelMode: EPolarLabelMode.Horizontal,
74
75        flippedCoordinates: true,
76        zoomExtentsToInitialRange: true,
77        autoTicks: false,
78        majorDelta: 1,
79        useNativeText: true,
80        labelStyle: {
81            padding: new Thickness(4, 4, 4, 4),
82        },
83
84        drawMinorTickLines: false,
85        drawMinorGridLines: false,
86        drawMajorGridLines: true,
87        drawMajorTickLines: false,
88        labelPrecision: 0,
89        innerRadius: 0.2, // donut hole
90        startAngle: 0, // start at 9 o'clock (since we are have flipped coorinates and default "0" is at 3 o'clock)
91    });
92    sciChartSurface.xAxes.add(xAxis);
93
94    const yAxis = new PolarNumericAxis(wasmContext, {
95        polarAxisMode: EPolarAxisMode.Angular,
96        axisAlignment: EAxisAlignment.Top,
97        visibleRange: new NumberRange(0, 100),
98        zoomExtentsToInitialRange: true,
99
100        flippedCoordinates: true,
101
102        drawMajorGridLines: true,
103        drawMinorTickLines: false,
104        drawMinorGridLines: false,
105        drawMajorTickLines: false,
106        labelPrecision: 0,
107        useNativeText: true,
108        autoTicks: false,
109        majorDelta: 10,
110
111        totalAngle: Math.PI,
112        startAngle: 0,
113    });
114    sciChartSurface.yAxes.add(yAxis);
115
116    const polarColumn = new PolarColumnRenderableSeries(wasmContext, {
117        dataSeries: new XyDataSeries(wasmContext, {
118            xValues: Array.from({ length: 15 }, (_, i) => i + 1),
119            yValues: [90, 18, 71, 32, 82, 92, 51, 25, 6, 38, 61, 84, 45, 21, 88],
120        }),
121        dataPointWidth: 0.8,
122        paletteProvider: new ColumnPaletteProvider(),
123        dataLabels: {
124            color: "white",
125            style: {
126                fontSize: 12,
127                padding: new Thickness(0, 0, 0, 0),
128            },
129            precision: 0,
130            labelYPositionMode: EColumnDataLabelPosition.Inside,
131            polarLabelMode: EPolarLabelMode.Parallel,
132        },
133        animation: new WaveAnimation({ duration: 1000 }),
134    });
135
136    sciChartSurface.renderableSeries.add(polarColumn);
137
138    // CHART MODIFIERS
139    sciChartSurface.chartModifiers.add(new PolarArcZoomModifier());
140    sciChartSurface.chartModifiers.add(new PolarZoomExtentsModifier());
141    sciChartSurface.chartModifiers.add(new PolarMouseWheelZoomModifier());
142
143    return { sciChartSurface, wasmContext };
144};
145