Angular 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 ? this.positiveStroke : this.negativeStroke;
43    }
44
45    overrideFillArgb(xValue: number, yValue: number, index: number, opacity: number, metadata: any) {
46        return yValue < this.threshold ? this.positiveFillColor : this.negativeFillColor;
47    }
48}
49
50const DATA_UK = {
51    labels: [
52        "Poultry",
53        "Fruit",
54        "Milk",
55        "Cheese",
56        "Pizza",
57        "Meat",
58        "Cereals",
59        "Eggs",
60        "Oats",
61        "Lamb",
62        "Butter",
63        "Chocolate",
64        "Sheep",
65        "OliveOil",
66    ],
67    data: [-18.5, -12.5, -11.7, -9.2, -7.2, -6.8, -5.9, 7.8, 9.1, 10.2, 10.2, 11.7, 17.6, 22.1],
68};
69
70export const drawExample = async (rootElement: string | HTMLDivElement) => {
71    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
72        theme: appTheme.SciChartJsTheme,
73        title: "Cunsumer prices relative to past year in UK, 2024",
74        titleStyle: {
75            fontSize: 24,
76        },
77    });
78
79    const radialYAxis = new PolarNumericAxis(wasmContext, {
80        polarAxisMode: EPolarAxisMode.Radial,
81        axisAlignment: EAxisAlignment.Right,
82        visibleRange: new NumberRange(
83            Math.min(...DATA_UK.data),
84            Math.max(...DATA_UK.data) + 4 // Add some padding to fit data-label for topmost column
85        ),
86        drawMinorTickLines: false,
87        drawMajorTickLines: false,
88        useNativeText: true,
89        drawMinorGridLines: false,
90        zoomExtentsToInitialRange: true,
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        drawMinorTickLines: false, // ticks don't make sense on category axes
109        useNativeText: true,
110        zoomExtentsToInitialRange: true,
111        flippedCoordinates: true,
112        labelPrecision: 0,
113        // labelStyle: {
114        //     color: "white",
115        // },
116        totalAngle: Math.PI * 2,
117        startAngle: Math.PI / 2,
118        autoTicks: false,
119        majorDelta: 1,
120        labels: DATA_UK.labels,
121    });
122    sciChartSurface.xAxes.add(polarXAxis);
123
124    const polarColumn = new PolarColumnRenderableSeries(wasmContext, {
125        dataSeries: new XyDataSeries(wasmContext, {
126            xValues: Array.from({ length: DATA_UK.data.length }, (_, i) => i),
127            yValues: DATA_UK.data,
128        }),
129        dataLabels: {
130            style: {
131                fontSize: 14,
132                padding: Thickness.fromNumber(0),
133            },
134            polarLabelMode: EPolarLabelMode.Parallel,
135            // color: "white",
136            precision: 0,
137        },
138        dataPointWidth: 0.6,
139        strokeThickness: 2,
140        paletteProvider: new ColumnPaletteProvider(0),
141        animation: new WaveAnimation({ duration: 800, zeroLine: 0, fadeEffect: true }),
142    });
143    sciChartSurface.renderableSeries.add(polarColumn);
144
145    sciChartSurface.chartModifiers.add(
146        new PolarPanModifier(),
147        new PolarZoomExtentsModifier(),
148        new PolarMouseWheelZoomModifier()
149    );
150
151    return { sciChartSurface, wasmContext };
152};
153