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            DATA_UK.data.reduce((a, b) => Math.min(a, b), 0), 
79            DATA_UK.data.reduce((a, b) => Math.max(a, b), 0) + 4 // +4 to have space for the topmost datalabel
80        ),
81        drawMinorTickLines: false,
82        drawMajorTickLines: false,
83        useNativeText: true,
84        drawMinorGridLines: false,
85        zoomExtentsToInitialRange: true,
86        majorGridLineStyle: {
87            strokeDashArray: [6, 6],
88            strokeThickness: 1,
89            color: "gray"
90        },
91        labelPostfix: "%",
92        labelPrecision: 0,
93        labelStyle: {
94            color: "white",
95        },
96        innerRadius: 0.15,
97        startAngle: Math.PI / 2,
98    });
99    sciChartSurface.yAxes.add(radialYAxis);
100
101    const polarXAxis = new PolarCategoryAxis(wasmContext, {
102        polarAxisMode: EPolarAxisMode.Angular,
103        axisAlignment: EAxisAlignment.Top,
104        polarLabelMode: EPolarLabelMode.Parallel,
105        visibleRange: new NumberRange(-1, DATA_UK.data.length),
106        drawMajorGridLines: false,
107        drawMinorGridLines: false,
108        useNativeText: true,
109        zoomExtentsToInitialRange: true,
110        flippedCoordinates: true,
111        labelPrecision: 0,
112        labelStyle: {
113            color: "white",
114        },
115        totalAngle: Math.PI * 2,
116        startAngle: Math.PI / 2,
117        autoTicks: false,
118        majorDelta: 1,
119        labels: DATA_UK.labels
120    });
121    sciChartSurface.xAxes.add(polarXAxis);
122
123    const polarColumn = new PolarColumnRenderableSeries(wasmContext, {
124        dataSeries: new XyDataSeries(wasmContext, {
125            xValues: Array.from({ length: DATA_UK.data.length }, (_, i) => i),
126            yValues: DATA_UK.data
127        }),
128        // dataLabels: {
129        //     style: {
130        //         fontSize: 14,
131        //     },
132        //     color: "white",
133        //     precision: 0,
134        // },
135        dataPointWidth: 0.6,
136        strokeThickness: 2,
137        paletteProvider: new ColumnPaletteProvider(0), 
138        animation: new WaveAnimation({ duration: 800, zeroLine: 0, fadeEffect: true }),
139    });
140    sciChartSurface.renderableSeries.add(polarColumn);
141
142    sciChartSurface.chartModifiers.add(
143        new PolarPanModifier(),
144        new PolarZoomExtentsModifier(),
145        new PolarMouseWheelZoomModifier()
146    );
147
148    return { sciChartSurface, wasmContext };
149};