React Polar Stacked Radial 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    PolarStackedMountainCollection,
14    PolarStackedMountainRenderableSeries,
15    PolarLegendModifier,
16} from "scichart";
17import { appTheme } from "../../../theme";
18
19const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
20const MountainsDatasets = [
21    {
22        yValues: [2.7, 1.4, 2.3, 2.1, 1.2, 1.5, 2.4, 1.5, 2.7, 1.3],
23        fillColor: appTheme.DarkIndigo,
24    },
25    {
26        yValues: [3.2, 0.9, 2, 2.5, 1.3, 2.8, 2.1, 2, 1.2, 2.4],
27        fillColor: appTheme.VividBlue,
28    },
29    {
30        yValues: [0.3, 2.3, 1.7, 3.2, 2, 2.9, 1, 2, 2.1, 1.1],
31        fillColor: appTheme.VividOrange,
32    },
33    {
34        yValues: [2.1, 1.8, 2.7, 0.5, 2.2, 0.3, 3, 1.6, 2.1, 1],
35        fillColor: appTheme.VividPink,
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    // add Radial Y axis
45    const radialYAxis = new PolarNumericAxis(wasmContext, {
46        polarAxisMode: EPolarAxisMode.Radial,
47        axisAlignment: EAxisAlignment.Right,
48
49        visibleRange: new NumberRange(0, 9),
50        drawMinorTickLines: false,
51        drawMajorTickLines: false,
52        useNativeText: true,
53        drawMinorGridLines: false,
54
55        startAngle: Math.PI / 2,
56        zoomExtentsToInitialRange: true,
57        labelPrecision: 0,
58        labelStyle: {
59            color: "white",
60        },
61    });
62    sciChartSurface.yAxes.add(radialYAxis);
63
64    // add Angular X axis
65    const polarXAxis = new PolarNumericAxis(wasmContext, {
66        polarAxisMode: EPolarAxisMode.Angular,
67        axisAlignment: EAxisAlignment.Top,
68
69        visibleRange: new NumberRange(0, 10),
70        polarLabelMode: EPolarLabelMode.Parallel,
71        
72        startAngle: Math.PI / 2, // start at 12 o'clock
73        flippedCoordinates: true, // go clockwise
74        zoomExtentsToInitialRange: true,
75        
76        useNativeText: true,
77        labelPrecision: 0,
78        labelStyle: {
79            color: "white",
80        },
81    });
82    sciChartSurface.xAxes.add(polarXAxis);
83
84    // Make collection to hold all the stacked mountains renderable series
85    const mountainCollection = new PolarStackedMountainCollection(wasmContext);
86    mountainCollection.separatePositiveNegativeStacks = false;
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};