React Polar Band Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    PolarNumericAxis,
6    SciChartPolarSurface,
7    EPolarAxisMode, 
8    NumberRange, 
9    EAxisAlignment, 
10    EPolarLabelMode,
11    PolarBandRenderableSeries,
12    XyyDataSeries,
13    PolarLegendModifier,
14    SweepAnimation,
15} from "scichart";
16import { appTheme } from "../../../theme";
17
18export const drawExample = async (rootElement: string | HTMLDivElement) => {
19    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
20        theme: appTheme.SciChartJsTheme,
21    });
22
23    const radialYAxis = new PolarNumericAxis(wasmContext, {
24        polarAxisMode: EPolarAxisMode.Radial,
25        axisAlignment: EAxisAlignment.Right,
26        visibleRange: new NumberRange(0, 6),
27        drawMinorTickLines: false,
28        drawMajorTickLines: false,
29        useNativeText: true,
30        drawMinorGridLines: false,
31        startAngle: Math.PI / 2,
32        zoomExtentsToInitialRange: true,
33        labelPrecision: 0,
34        innerRadius: 0.1, // donut hole
35    });
36    sciChartSurface.yAxes.add(radialYAxis);
37
38    const polarXAxis = new PolarNumericAxis(wasmContext, {
39        polarAxisMode: EPolarAxisMode.Angular,
40        axisAlignment: EAxisAlignment.Top,
41
42        polarLabelMode: EPolarLabelMode.Parallel,
43        visibleRange: new NumberRange(0, 12),
44
45        autoTicks: false,
46        majorDelta: 1,
47
48        useNativeText: true,
49        flippedCoordinates: true, // go clockwise
50        startAngle: Math.PI / 2, // start at 12 o'clock
51        zoomExtentsToInitialRange: true,
52        labelPrecision: 0,
53    });
54    sciChartSurface.xAxes.add(polarXAxis);
55
56    // regular (non-interpolated) band
57    const polarBand1 = new PolarBandRenderableSeries(wasmContext, {
58        dataSeries: new XyyDataSeries(wasmContext, {
59            xValues: [0, 1, 2, 3, 4, 5],
60            yValues: [1, 2, 3, 4, 5, 6],
61            y1Values: [6, 5, 1, 5, 4, 2],
62            dataSeriesName: "Regular Band",
63        }),
64        stroke: appTheme.VividOrange,
65        strokeY1: appTheme.VividSkyBlue,
66        fill: appTheme.VividOrange + "88",
67        fillY1: appTheme.VividSkyBlue + "88",
68        strokeThickness: 3,
69        interpolateLine: false, // not interpolated
70        animation: new SweepAnimation({ duration: 400, delay: 400 }),
71    });
72    sciChartSurface.renderableSeries.add(polarBand1);
73
74    // interpolated band
75    const polarBand2 = new PolarBandRenderableSeries(wasmContext, {
76        dataSeries: new XyyDataSeries(wasmContext, {
77            xValues: [6, 7, 8, 9, 10, 11],
78            yValues: [1, 2, 3, 4, 5, 6],
79            y1Values: [6, 5, 1, 5, 4, 2],
80            dataSeriesName: "Interpolated Band",
81        }),
82        stroke: appTheme.VividPink,
83        strokeY1: appTheme.VividGreen,
84        fill: appTheme.VividPink + "88",
85        fillY1: appTheme.VividGreen + "88",
86        strokeThickness: 3,
87        interpolateLine: true,
88        animation: new SweepAnimation({ duration: 400 }),
89    });
90    sciChartSurface.renderableSeries.add(polarBand2);
91
92    sciChartSurface.chartModifiers.add(
93        new PolarPanModifier(),
94        new PolarZoomExtentsModifier(),
95        new PolarMouseWheelZoomModifier(),
96        new PolarLegendModifier({
97            showCheckboxes: true,
98        })
99    );
100
101    return { sciChartSurface, wasmContext };
102};