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