React Stacked Column Side by Side

1import { appTheme } from "../../../theme";
2import {
3    ELegendOrientation,
4    ELegendPlacement,
5    ENumericFormat,
6    LegendModifier,
7    MouseWheelZoomModifier,
8    NumericAxis,
9    SciChartSurface,
10    StackedColumnCollection,
11    StackedColumnRenderableSeries,
12    WaveAnimation,
13    NumberRange,
14    XyDataSeries,
15    ZoomExtentsModifier,
16    ZoomPanModifier,
17    EVerticalTextPosition,
18    EColumnDataLabelPosition,
19    IStackedColumnSeriesDataLabelProviderOptions,
20    Thickness,
21} from "scichart";
22
23const xValues = [1997, 1998, 1999, 2000, 2001, 2002, 2003];
24const tomatoesData = [15, 17, 26, 22, 28, 21, 22];
25const cucumberData = [14, 12, 27, 25, 23, 17, 17];
26const pepperData = [17, 14, 27, 26, 22, 28, 16];
27
28export const drawExample = async (rootElement: string | HTMLDivElement) => {
29    // Create a SciChartSurface
30    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
31        theme: appTheme.SciChartJsTheme,
32    });
33
34    // Create XAxis, YAxis
35    sciChartSurface.xAxes.add(
36        new NumericAxis(wasmContext, {
37            labelFormat: ENumericFormat.Decimal,
38            labelPrecision: 0,
39            autoTicks: false,
40            majorDelta: 1,
41            minorDelta: 1,
42            drawMajorGridLines: false,
43            drawMinorGridLines: false,
44            drawMajorBands: false,
45            axisTitle: "Year",
46            growBy: new NumberRange(0.02, 0.02),
47        })
48    );
49    sciChartSurface.yAxes.add(
50        new NumericAxis(wasmContext, {
51            labelPrecision: 0,
52            drawMinorGridLines: false,
53            drawMinorTickLines: false,
54            axisTitle: "Produce sold (Tonnes)",
55            growBy: new NumberRange(0.02, 0.05),
56        })
57    );
58
59    const dataLabels: IStackedColumnSeriesDataLabelProviderOptions = {
60        style: {
61            fontSize: 12,
62            fontFamily: "Arial",
63            padding: new Thickness(0, 0, 2, 0), // lift label above the top by 2 pixels
64        },
65        color: "white",
66        positionMode: EColumnDataLabelPosition.Outside,
67        verticalTextPosition: EVerticalTextPosition.Center,
68        precision: 0,
69    };
70
71    // Create some RenderableSeries - for each part of the stacked column
72    // Notice the stackedGroupId. This defines if series are stacked (same), or grouped side by side (different)
73    const rendSeries1 = new StackedColumnRenderableSeries(wasmContext, {
74        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: tomatoesData, dataSeriesName: "Tomato" }),
75        fill: appTheme.VividPink,
76        stroke: "white",
77        stackedGroupId: "Group0",
78        dataLabels,
79    });
80
81    const rendSeries2 = new StackedColumnRenderableSeries(wasmContext, {
82        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: pepperData, dataSeriesName: "Pepper" }),
83        fill: appTheme.VividOrange,
84        stroke: "white",
85        stackedGroupId: "Group1",
86        dataLabels,
87    });
88
89    const rendSeries3 = new StackedColumnRenderableSeries(wasmContext, {
90        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: cucumberData, dataSeriesName: "Cucumber" }),
91        fill: appTheme.VividSkyBlue,
92        stroke: "white",
93        stackedGroupId: "Group2",
94        dataLabels,
95    });
96
97    // To add the series to the chart, put them in a StackedColumnCollection
98    const stackedColumnCollection = new StackedColumnCollection(wasmContext);
99    stackedColumnCollection.dataPointWidth = 0.5;
100    stackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
101    stackedColumnCollection.animation = new WaveAnimation({ duration: 1000, fadeEffect: true });
102
103    // Add the Stacked Column collection to the chart
104    sciChartSurface.renderableSeries.add(stackedColumnCollection);
105
106    // Add some interactivity modifiers
107    sciChartSurface.chartModifiers.add(
108        new ZoomExtentsModifier(),
109        new ZoomPanModifier({ enableZoom: true }),
110        new MouseWheelZoomModifier()
111    );
112
113    // Add a legend to the chart to show the series
114    sciChartSurface.chartModifiers.add(
115        new LegendModifier({
116            placement: ELegendPlacement.TopLeft,
117            orientation: ELegendOrientation.Vertical,
118            showLegend: true,
119            showCheckboxes: false,
120            showSeriesMarkers: true,
121        })
122    );
123
124    sciChartSurface.zoomExtents();
125
126    return { wasmContext, sciChartSurface };
127};
128