React Polar Stacked Mountain Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode, 
9    NumberRange, 
10    EAxisAlignment,  
11    EPolarLabelMode,
12    WaveAnimation,
13    PolarMountainRenderableSeries,
14    PolarStackedMountainCollection,
15    PolarStackedMountainRenderableSeries,
16    PolarLegendModifier,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
21const MountainsDatasets = [
22    {
23        yValues: [2.7, 1.4, 2.3, 2.1, 1.2, 1.5, 2.4, 1.5, 2.7, 1.3],
24        fillColor: appTheme.DarkIndigo,
25    },
26    {
27        yValues: [3.2, 0.9, 2, 2.5, 1.3, 2.8, 2.1, 2, 1.2, 2.4],
28        fillColor: appTheme.VividBlue,
29    },
30    {
31        yValues: [0.3, 2.3, 1.7, 3.2, 2, 2.9, 1, 2, 2.1, 1.1],
32        fillColor: appTheme.VividOrange,
33    },
34    {
35        yValues: [2.1, 1.8, 2.7, 0.5, 2.2, 0.3, 3, 1.6, 2.1, 1],
36        fillColor: appTheme.VividPink,
37    },
38];
39
40export const drawExample = async (rootElement: string | HTMLDivElement) => {
41    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
42        theme: appTheme.SciChartJsTheme,
43    });
44
45    // add Radial Y axis
46    const radialYAxis = new PolarNumericAxis(wasmContext, {
47        polarAxisMode: EPolarAxisMode.Radial,
48        axisAlignment: EAxisAlignment.Right,
49
50        visibleRange: new NumberRange(0, 9),
51        drawMinorTickLines: false,
52        drawMajorTickLines: false,
53        useNativeText: true,
54        drawMinorGridLines: false,
55
56        startAngle: Math.PI / 2,
57        zoomExtentsToInitialRange: true,
58        labelPrecision: 0,
59        labelStyle: {
60            color: "white",
61        },
62    });
63    sciChartSurface.yAxes.add(radialYAxis);
64
65    // add Angular X axis
66    const polarXAxis = new PolarNumericAxis(wasmContext, {
67        polarAxisMode: EPolarAxisMode.Angular,
68        axisAlignment: EAxisAlignment.Top,
69
70        visibleRange: new NumberRange(0, 10),
71        polarLabelMode: EPolarLabelMode.Parallel,
72        
73        startAngle: Math.PI / 2, // start at 12 o'clock
74        flippedCoordinates: true, // go clockwise
75        zoomExtentsToInitialRange: true,
76        
77        useNativeText: true,
78        labelPrecision: 0,
79        labelStyle: {
80            color: "white",
81        },
82    });
83    sciChartSurface.xAxes.add(polarXAxis);
84
85    // Make collection to hold all the stacked mountains renderable series
86    const mountainCollection = new PolarStackedMountainCollection(wasmContext)
87    mountainCollection.animation = new WaveAnimation({ duration: 800, zeroLine: 0 }),
88
89    MountainsDatasets.forEach(({yValues, fillColor}) => {
90        const polarMountain = new PolarStackedMountainRenderableSeries(wasmContext, {
91            dataSeries: new XyDataSeries(wasmContext, {
92                xValues: [...xValues, xValues[xValues.length - 1] + 1], // add 1 more xValue to close the loop
93                yValues: [...yValues, yValues[0]] // close the loop by drawing to the first yValue
94            }),
95            fill: fillColor + "BB", // 75% opacity
96            stroke: "white",
97            strokeThickness: 1,
98        });
99        mountainCollection.add(polarMountain);
100    })
101    sciChartSurface.renderableSeries.add(mountainCollection);
102
103    sciChartSurface.chartModifiers.add(
104        new PolarPanModifier(),
105        new PolarZoomExtentsModifier(),
106        new PolarMouseWheelZoomModifier(),
107        new PolarLegendModifier({
108            showCheckboxes: true,
109            backgroundColor: "#88888833",
110        })
111    );
112
113    return { sciChartSurface, wasmContext };
114};