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 
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        drawMinorTickLines: false, // ticks don't make sense on category axes
104        useNativeText: true,
105        zoomExtentsToInitialRange: true,
106        flippedCoordinates: true,
107        labelPrecision: 0,
108        // labelStyle: {
109        //     color: "white",
110        // },
111        totalAngle: Math.PI * 2,
112        startAngle: Math.PI / 2,
113        autoTicks: false,
114        majorDelta: 1,
115        labels: DATA_UK.labels
116    });
117    sciChartSurface.xAxes.add(polarXAxis);
118
119    const polarColumn = new PolarColumnRenderableSeries(wasmContext, {
120        dataSeries: new XyDataSeries(wasmContext, {
121            xValues: Array.from({ length: DATA_UK.data.length }, (_, i) => i),
122            yValues: DATA_UK.data
123        }),
124        dataLabels: {
125            style: {
126                fontSize: 14,
127                padding: Thickness.fromNumber(0),
128            },
129            polarLabelMode: EPolarLabelMode.Parallel,
130            // color: "white",
131            precision: 0,
132        },
133        dataPointWidth: 0.6,
134        strokeThickness: 2,
135        paletteProvider: new ColumnPaletteProvider(0), 
136        animation: new WaveAnimation({ duration: 800, zeroLine: 0, fadeEffect: true }),
137    });
138    sciChartSurface.renderableSeries.add(polarColumn);
139
140    sciChartSurface.chartModifiers.add(
141        new PolarPanModifier(),
142        new PolarZoomExtentsModifier(),
143        new PolarMouseWheelZoomModifier()
144    );
145
146    return { sciChartSurface, wasmContext };
147};