React Polar Column Chart

1import {
2    PolarColumnRenderableSeries,
3    PolarMouseWheelZoomModifier,
4    PolarZoomExtentsModifier,
5    PolarPanModifier,
6    XyDataSeries,
7    PolarNumericAxis,
8    SciChartPolarSurface,
9    EPolarAxisMode, 
10    NumberRange, 
11    EAxisAlignment, 
12    GradientParams, 
13    Point, 
14    EPolarLabelMode,
15    WaveAnimation,
16} from "scichart";
17import { appTheme } from "../../../theme";
18
19export const drawExample = async (rootElement: string | HTMLDivElement) => {
20    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
21        theme: appTheme.SciChartJsTheme,
22        drawSeriesBehindAxis: true
23    });
24
25    const radialYAxis = new PolarNumericAxis(wasmContext, {
26        polarAxisMode: EPolarAxisMode.Radial,
27        axisAlignment: EAxisAlignment.Right,
28        visibleRange: new NumberRange(0, 6),
29        zoomExtentsToInitialRange: true,
30        
31        drawMinorTickLines: false,
32        drawMajorTickLines: false,
33        drawMinorGridLines: false,
34        majorGridLineStyle: {
35            color: appTheme.DarkIndigo,
36            strokeThickness: 1,
37        },
38        startAngle: Math.PI / 2,
39        drawLabels: false, // no radial labels
40
41        innerRadius: 0.1, // donut hole
42    });
43    sciChartSurface.yAxes.add(radialYAxis);
44
45    const polarXAxis = new PolarNumericAxis(wasmContext, {
46        polarAxisMode: EPolarAxisMode.Angular,
47        axisAlignment: EAxisAlignment.Top,
48        polarLabelMode: EPolarLabelMode.Parallel,
49        visibleRange: new NumberRange(0, 9),
50        startAngle: Math.PI / 2, // start at 12 o'clock
51        flippedCoordinates: true, // go clockwise
52        zoomExtentsToInitialRange: true,
53
54        drawMinorTickLines: false,
55        drawMajorTickLines: false,
56        drawMinorGridLines: false,
57
58        useNativeText: true,
59        labelPrecision: 0,
60        labelStyle: {
61            color: "white",
62        },
63        majorGridLineStyle: {
64            color: appTheme.DarkIndigo,
65            strokeThickness: 1,
66        },
67    });
68    sciChartSurface.xAxes.add(polarXAxis);
69
70    const polarColumn = new PolarColumnRenderableSeries(wasmContext, {
71        dataSeries: new XyDataSeries(wasmContext, {
72            xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
73            yValues: [2.6, 5.3, 3.5, 2.7, 4.8, 3.8, 5, 4.5, 3.5]
74        }),
75        fillLinearGradient: new GradientParams(
76            new Point(0, 0), 
77            new Point(1, 0), // `new Point(0, 1)` for vertical gradient
78            [
79                { color: appTheme.DarkIndigo, offset: 0 },
80                { color: appTheme.Indigo, offset: 0.2 },
81                { color: appTheme.Indigo, offset: 0.8 },
82                { color: appTheme.MutedBlue, offset: 1 }
83            ]
84        ),
85        stroke: "white",
86        strokeThickness: 1.5,
87        dataPointWidth: 0.8,
88        dataLabels: {
89            color: "white",
90            style: {
91                fontSize: 14,
92                fontFamily: "Default",
93            },
94            polarLabelMode: EPolarLabelMode.Parallel,
95        },
96        animation: new WaveAnimation({ duration: 800, fadeEffect: true }),
97    });
98    sciChartSurface.renderableSeries.add(polarColumn);
99
100    sciChartSurface.chartModifiers.add(
101        new PolarPanModifier(),
102        new PolarZoomExtentsModifier(),
103        new PolarMouseWheelZoomModifier()
104    );
105
106    return { sciChartSurface, wasmContext };
107};