React Polar Area Chart | Polar Mountain Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode, 
9    NumberRange, 
10    EAxisAlignment, 
11    GradientParams, 
12    Point, 
13    EPolarLabelMode,
14    WaveAnimation,
15    PolarMountainRenderableSeries,
16    PolarLegendModifier
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
21const MountainsDatasets = [
22    {
23        yValues: [2.6, 5.6, 3, 5, 4.8, 1.8, 5, 4.5, 3.5],
24        fillColor: appTheme.VividOrange,
25        interpolateLine: true,
26    },
27    {
28        yValues: [4.2, 2.5, 3.9, 2.5, 4, 5.5, 2.5, 4, 3],
29        fillColor: appTheme.VividTeal,
30        interpolateLine: false,
31    },
32    {
33        yValues: [1.3, 3.3, 2.5, 4.5, 5.5, 3, 4.5, 4.9, 2.4],
34        fillColor: appTheme.VividPink,
35        interpolateLine: false,
36    },
37]
38
39export const drawExample = async (rootElement: string | HTMLDivElement) => {
40    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
41        theme: appTheme.SciChartJsTheme,
42    });
43
44    const radialYAxis = new PolarNumericAxis(wasmContext, {
45        polarAxisMode: EPolarAxisMode.Radial,
46        axisAlignment: EAxisAlignment.Right,
47        visibleRange: new NumberRange(0, 6),
48        drawMinorTickLines: false,
49        drawMajorTickLines: false,
50        useNativeText: true,
51        drawMinorGridLines: false,
52        startAngle: Math.PI / 2,
53        zoomExtentsToInitialRange: true,
54        labelPrecision: 0,
55        labelStyle: {
56            color: "white",
57        },
58    });
59    sciChartSurface.yAxes.add(radialYAxis);
60
61    const polarXAxis = new PolarNumericAxis(wasmContext, {
62        polarAxisMode: EPolarAxisMode.Angular,
63        axisAlignment: EAxisAlignment.Top,
64        polarLabelMode: EPolarLabelMode.Parallel,
65        visibleRange: new NumberRange(0, 9),
66        flippedCoordinates: true, // go clockwise
67        useNativeText: true,
68        startAngle: Math.PI / 2, // start at 12 o'clock
69        zoomExtentsToInitialRange: true,
70        labelPrecision: 0,
71        labelStyle: {
72            color: "white",
73        },
74    });
75    sciChartSurface.xAxes.add(polarXAxis);
76
77    MountainsDatasets.forEach(({yValues, fillColor, interpolateLine}) => {
78        const polarMountain = new PolarMountainRenderableSeries(wasmContext, {
79            dataSeries: new XyDataSeries(wasmContext, {
80                xValues: [...xValues, xValues[xValues.length - 1] + 1], // add 1 more xValue to close the loop
81                yValues: [...yValues, yValues[0]], // close the loop by drawing to the first yValue
82                dataSeriesName: interpolateLine ? "Interpolated" : "Straight",
83            }),
84            fillLinearGradient: new GradientParams(
85                new Point(0, 0), 
86                new Point(0, 1), 
87                [
88                    { color: fillColor + "AA", offset: 0 },
89                    { color: fillColor + "33", offset: 0.3 },
90                ]
91            ),
92            interpolateLine: interpolateLine,
93            stroke: fillColor, // this also gives off the color for the legend marker
94            strokeThickness: 2,
95            animation: new WaveAnimation({ duration: 800, zeroLine: 0 }),
96        });
97        sciChartSurface.renderableSeries.add(polarMountain);
98    })
99
100    sciChartSurface.chartModifiers.add(
101        new PolarPanModifier(),
102        new PolarZoomExtentsModifier(),
103        new PolarMouseWheelZoomModifier(),
104        new PolarLegendModifier({
105            showCheckboxes: true,
106        })
107    );
108
109    return { sciChartSurface, wasmContext };
110};