React Polar Spline Line Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    PolarNumericAxis,
6    SciChartPolarSurface,
7    EPolarAxisMode,
8    NumberRange,
9    EAxisAlignment,
10    EPolarLabelMode,
11    PolarLegendModifier,
12    PolarLineRenderableSeries,
13    BezierRenderDataTransform,
14    XyDataSeries,
15    SplineRenderDataTransform,
16    WaveAnimation,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20export const drawExample = async (rootElement: string | HTMLDivElement) => {
21    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
22        theme: appTheme.SciChartJsTheme,
23    });
24
25    const radialYAxis = new PolarNumericAxis(wasmContext, {
26        polarAxisMode: EPolarAxisMode.Radial,
27        axisAlignment: EAxisAlignment.Right,
28        visibleRange: new NumberRange(0, 6),
29        drawMinorTickLines: false,
30        drawMajorTickLines: false,
31        useNativeText: true,
32        drawMinorGridLines: false,
33        zoomExtentsToInitialRange: true,
34        labelPrecision: 0,
35        innerRadius: 0.1, // donut hole
36    });
37    sciChartSurface.yAxes.add(radialYAxis);
38
39    const polarXAxis = new PolarNumericAxis(wasmContext, {
40        polarAxisMode: EPolarAxisMode.Angular,
41        axisAlignment: EAxisAlignment.Top,
42
43        polarLabelMode: EPolarLabelMode.Parallel,
44
45        autoTicks: false,
46        majorDelta: 1,
47
48        useNativeText: true,
49        flippedCoordinates: true, // go clockwise
50        totalAngle: Math.PI,
51        labelPrecision: 0,
52    });
53    sciChartSurface.xAxes.add(polarXAxis);
54
55    const ANIMATION_DURATION = 500;
56    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
57    const yValues = [3, 4, 2, 4, 5, 5, 3, 2, 4];
58
59    // 1. regular polar line
60    const regularPolarLine = new PolarLineRenderableSeries(wasmContext, {
61        dataSeries: new XyDataSeries(wasmContext, {
62            xValues,
63            yValues,
64            dataSeriesName: "Original Data",
65        }),
66        stroke: "white",
67        strokeThickness: 3,
68    });
69
70    // 2. cubic polar line
71    const cubicPolarLine = new PolarLineRenderableSeries(wasmContext, {
72        dataSeries: new XyDataSeries(wasmContext, {
73            xValues,
74            yValues,
75            dataSeriesName: "Cubic",
76        }),
77        stroke: appTheme.VividOrange,
78        strokeThickness: 5,
79        animation: new WaveAnimation({ duration: ANIMATION_DURATION, delay: ANIMATION_DURATION }),
80    });
81    // Add cubic bezier transform
82    const cubicTransform = new SplineRenderDataTransform(cubicPolarLine, wasmContext, [
83        cubicPolarLine.drawingProviders[0],
84    ]);
85    cubicTransform.interpolationPoints = 30;
86    cubicPolarLine.renderDataTransform = cubicTransform;
87
88    // 3. interpolated polar line
89    const interpolatedPolarLine = new PolarLineRenderableSeries(wasmContext, {
90        dataSeries: new XyDataSeries(wasmContext, {
91            xValues,
92            yValues,
93            dataSeriesName: "Interpolated",
94        }),
95        interpolateLine: true, //
96        stroke: appTheme.VividPurple,
97        strokeThickness: 5,
98        animation: new WaveAnimation({ duration: ANIMATION_DURATION, delay: 2 * ANIMATION_DURATION }),
99    });
100
101    sciChartSurface.renderableSeries.add(regularPolarLine, cubicPolarLine, interpolatedPolarLine);
102
103    sciChartSurface.chartModifiers.add(
104        new PolarPanModifier(),
105        new PolarZoomExtentsModifier(),
106        new PolarMouseWheelZoomModifier(),
107        new PolarLegendModifier({
108            showCheckboxes: true,
109        })
110    );
111
112    return { sciChartSurface, wasmContext };
113};
114