React Stacked Mountain Chart

1import {
2    ELegendOrientation,
3    ELegendPlacement,
4    LegendModifier,
5    MouseWheelZoomModifier,
6    NumericAxis,
7    SciChartSurface,
8    StackedMountainCollection,
9    StackedMountainRenderableSeries,
10    WaveAnimation,
11    XyDataSeries,
12    ZoomExtentsModifier,
13    ZoomPanModifier,
14} from "scichart";
15import { appTheme } from "../../../theme";
16import { xValues, y1Values, y2Values, y3Values, y4Values } from "./data/stackedMountainChartData";
17
18export const drawExample = async (rootElement: string | HTMLDivElement) => {
19    // Create a SciChartSurface
20    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
21        theme: appTheme.SciChartJsTheme,
22    });
23
24    // Create an xAxis, yAxis
25    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { labelPrecision: 0 }));
26    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { labelPrecision: 0 }));
27
28    // Create the three Stacked Mountain series
29    const stackedMountain1 = new StackedMountainRenderableSeries(wasmContext, {
30        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y1Values, dataSeriesName: "Apples" }),
31        fill: appTheme.VividPurple + "AA",
32        stroke: appTheme.PaleSkyBlue,
33        strokeThickness: 2,
34    });
35    const stackedMountain2 = new StackedMountainRenderableSeries(wasmContext, {
36        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y2Values, dataSeriesName: "Pears" }),
37        fill: appTheme.VividPink + "AA",
38        stroke: appTheme.PaleSkyBlue,
39        strokeThickness: 2,
40    });
41    const stackedMountain3 = new StackedMountainRenderableSeries(wasmContext, {
42        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y3Values, dataSeriesName: "Bananas" }),
43        fill: appTheme.VividSkyBlue + "AA",
44        stroke: appTheme.PaleSkyBlue,
45        strokeThickness: 2,
46    });
47    const stackedMountain4 = new StackedMountainRenderableSeries(wasmContext, {
48        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: y4Values, dataSeriesName: "Oranges" }),
49        fill: appTheme.VividOrange + "AA",
50        stroke: appTheme.PaleSkyBlue,
51        strokeThickness: 2,
52    });
53
54    // Group these StackedMountain series together in a StackedMountainCollection
55    const stackedMountainCollection = new StackedMountainCollection(wasmContext);
56    stackedMountainCollection.add(stackedMountain1, stackedMountain2, stackedMountain3, stackedMountain4);
57    stackedMountainCollection.animation = new WaveAnimation({ duration: 600, fadeEffect: true });
58
59    // Add the StackedMountainCollection to the chart
60    sciChartSurface.renderableSeries.add(stackedMountainCollection);
61
62    // Add some interactivity modifiers
63    sciChartSurface.chartModifiers.add(
64        new ZoomExtentsModifier(),
65        new ZoomPanModifier({ enableZoom: true }),
66        new MouseWheelZoomModifier()
67    );
68
69    // Add a legend to the chart to show the series
70    sciChartSurface.chartModifiers.add(
71        new LegendModifier({
72            placement: ELegendPlacement.TopLeft,
73            orientation: ELegendOrientation.Vertical,
74            showLegend: true,
75            showCheckboxes: false,
76            showSeriesMarkers: true,
77        })
78    );
79
80    sciChartSurface.zoomExtents();
81
82    return { wasmContext, sciChartSurface, stackedMountainCollection };
83};
84