React Polar Range Column Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    PolarNumericAxis,
6    SciChartPolarSurface,
7    EPolarAxisMode,
8    NumberRange,
9    PolarCategoryAxis,
10    PolarColumnRenderableSeries,
11    XyyDataSeries,
12    SweepAnimation,
13} from "scichart";
14import { appTheme } from "../../../theme";
15
16export const MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
17export const TEMPERATURE_DATA = {
18    min: [
19        11.81948, 12.034697, 12.778375, 13.789007, 14.624746, 15.316486, 15.89393, 15.517554, 14.725496, 13.799661,
20        12.776523, 12.119616,
21    ],
22    max: [
23        12.493054, 12.817261, 14.034957, 14.891214, 15.676935, 16.244125, 16.889472, 16.512617, 15.804098, 14.787963,
24        13.775281, 13.000732,
25    ],
26};
27
28export const drawExample = async (rootElement: string | HTMLDivElement) => {
29    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
30        theme: appTheme.SciChartJsTheme,
31        title: "Min and Max surface temperature of each month of 2024",
32        titleStyle: {
33            fontSize: 24,
34        },
35    });
36
37    const radialYAxis = new PolarNumericAxis(wasmContext, {
38        polarAxisMode: EPolarAxisMode.Radial,
39        drawLabels: true,
40        labelPrecision: 0,
41        labelStyle: {
42            color: "white",
43        },
44        labelPostfix: "°C",
45        autoTicks: false,
46        majorDelta: 1,
47        drawMinorGridLines: false,
48        majorGridLineStyle: {
49            color: appTheme.DarkIndigo,
50            strokeThickness: 1,
51        },
52        visibleRange: new NumberRange(11, 17), // min and max temperatures
53        zoomExtentsToInitialRange: true,
54        innerRadius: 0.05, // donut hole
55        startAngle: Math.PI / 2, // start only after 12 o'clock
56    });
57    sciChartSurface.yAxes.add(radialYAxis);
58
59    const polarXAxis = new PolarCategoryAxis(wasmContext, {
60        polarAxisMode: EPolarAxisMode.Angular,
61        labels: MONTHS_SHORT,
62        autoTicks: false,
63        majorDelta: 1, // one tick per month
64
65        // replace minors with majors by not drawing majors and setting this:
66        minorsPerMajor: 2,
67        drawMajorGridLines: false,
68        drawMinorGridLines: true,
69        minorGridLineStyle: {
70            color: appTheme.DarkIndigo,
71            strokeThickness: 1,
72        },
73
74        drawMajorTickLines: false,
75        drawMinorTickLines: false,
76        flippedCoordinates: true, // grow clockwise
77        startAngle: Math.PI / 2 - Math.PI / 12,
78        visibleRange: new NumberRange(0, 12), // 12 months
79        zoomExtentsToInitialRange: true,
80    });
81    sciChartSurface.xAxes.add(polarXAxis);
82
83    // Add series
84    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
85    const columns = new PolarColumnRenderableSeries(wasmContext, {
86        dataSeries: new XyyDataSeries(wasmContext, {
87            xValues,
88            yValues: TEMPERATURE_DATA.min,
89            y1Values: TEMPERATURE_DATA.max,
90        }),
91        dataPointWidth: 1,
92        fill: appTheme.VividSkyBlue + "44",
93        stroke: appTheme.VividSkyBlue,
94        animation: new SweepAnimation({ duration: 800 }),
95    });
96    sciChartSurface.renderableSeries.add(columns);
97
98    // Add modifiers
99    sciChartSurface.chartModifiers.add(
100        new PolarPanModifier(),
101        new PolarZoomExtentsModifier(),
102        new PolarMouseWheelZoomModifier()
103    );
104
105    return { sciChartSurface, wasmContext };
106};
107