React Polar Column Category Chart

1import {
2    PolarColumnRenderableSeries,
3    PolarMouseWheelZoomModifier,
4    PolarZoomExtentsModifier,
5    PolarPanModifier,
6    XyDataSeries,
7    PolarNumericAxis,
8    SciChartPolarSurface,
9    EPolarAxisMode, 
10    NumberRange, 
11    EAxisAlignment, 
12    EPolarLabelMode,
13    PolarCategoryAxis,
14    DefaultPaletteProvider,
15    parseColorToUIntArgb,
16    EStrokePaletteMode,
17    WaveAnimation,
18    Thickness,
19} from "scichart";
20import { appTheme } from "../../../theme";
21
22// Custom PaletteProvider for column series which colours datapoints above a threshold
23class ColumnPaletteProvider extends DefaultPaletteProvider {
24    private threshold: number;
25    private positiveFillColor: number;
26    private positiveStroke: number;
27
28    private negativeFillColor: number;
29    private negativeStroke: number;
30
31    constructor(threshold: number) {
32        super();
33        this.strokePaletteMode = EStrokePaletteMode.SOLID;
34        this.threshold = threshold;
35        this.positiveStroke = parseColorToUIntArgb(appTheme.VividRed);
36        this.positiveFillColor = parseColorToUIntArgb(appTheme.VividRed, 127);
37        this.negativeStroke = parseColorToUIntArgb(appTheme.VividBlue);
38        this.negativeFillColor = parseColorToUIntArgb(appTheme.VividBlue, 127); // 127/255 opacity
39    }
40
41    overrideStrokeArgb(xValue: number, yValue: number, index: number, opacity: number, metadata: any) {
42        return yValue < this.threshold 
43            ? this.positiveStroke 
44            : this.negativeStroke;
45    }
46
47    overrideFillArgb(xValue: number, yValue: number, index: number, opacity: number, metadata: any) {
48        return yValue < this.threshold 
49            ? this.positiveFillColor 
50            : this.negativeFillColor;
51    }
52}
53
54const DATA_UK = {
55    labels: [
56        "Poultry", "Fruit", "Milk", "Cheese", "Pizza", "Meat", "Cereals",
57        "Eggs", "Oats", "Lamb", "Butter", "Chocolate", "Sheep", "OliveOil"
58    ],
59    data: [
60        -18.5, -12.5, -11.7, -9.2, -7.2, -6.8, -5.9, 
61        7.8, 9.1, 10.2, 10.2, 11.7, 17.6, 22.1
62    ]
63}
64
65export const drawExample = async (rootElement: string | HTMLDivElement) => {
66    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
67        theme: appTheme.SciChartJsTheme,
68        title: "Cunsumer prices relative to past year in UK, 2024",
69        titleStyle: {
70            fontSize: 24,
71        }
72    });
73
74    const radialYAxis = new PolarNumericAxis(wasmContext, {
75        polarAxisMode: EPolarAxisMode.Radial,
76        axisAlignment: EAxisAlignment.Right,
77        visibleRange: new NumberRange(
78            Math.min(...DATA_UK.data),
79            Math.max(...DATA_UK.data) + 4 // Add some padding to fit data-label for topmost column
80        ),
81        drawMinorTickLines: false,
82        drawMajorTickLines: false,
83        useNativeText: true,
84        drawMinorGridLines: false,
85        zoomExtentsToInitialRange: true,
86        labelPostfix: "%",
87        labelPrecision: 0,
88        labelStyle: {
89            color: "white",
90        },
91        innerRadius: 0.15,
92        startAngle: Math.PI / 2,
93    });
94    sciChartSurface.yAxes.add(radialYAxis);
95
96    const polarXAxis = new PolarCategoryAxis(wasmContext, {
97        polarAxisMode: EPolarAxisMode.Angular,
98        axisAlignment: EAxisAlignment.Top,
99        polarLabelMode: EPolarLabelMode.Parallel,
100        visibleRange: new NumberRange(-1, DATA_UK.data.length),
101        drawMajorGridLines: false,
102        drawMinorGridLines: false,
103        useNativeText: true,
104        zoomExtentsToInitialRange: true,
105        flippedCoordinates: true,
106        labelPrecision: 0,
107        labelStyle: {
108            color: "white",
109        },
110        totalAngle: Math.PI * 2,
111        startAngle: Math.PI / 2,
112        autoTicks: false,
113        majorDelta: 1,
114        labels: DATA_UK.labels
115    });
116    sciChartSurface.xAxes.add(polarXAxis);
117
118    const polarColumn = new PolarColumnRenderableSeries(wasmContext, {
119        dataSeries: new XyDataSeries(wasmContext, {
120            xValues: Array.from({ length: DATA_UK.data.length }, (_, i) => i),
121            yValues: DATA_UK.data
122        }),
123        dataLabels: {
124            style: {
125                fontSize: 14,
126                padding: Thickness.fromNumber(0),
127            },
128            polarLabelMode: EPolarLabelMode.Parallel,
129            color: "white",
130            precision: 0,
131        },
132        dataPointWidth: 0.6,
133        strokeThickness: 2,
134        paletteProvider: new ColumnPaletteProvider(0), 
135        animation: new WaveAnimation({ duration: 800, zeroLine: 0, fadeEffect: true }),
136    });
137    sciChartSurface.renderableSeries.add(polarColumn);
138
139    sciChartSurface.chartModifiers.add(
140        new PolarPanModifier(),
141        new PolarZoomExtentsModifier(),
142        new PolarMouseWheelZoomModifier()
143    );
144
145    return { sciChartSurface, wasmContext };
146};