React Box Plot Chart

1import {
2    BoxPlotDataSeries,
3    CategoryAxis,
4    EAutoRange,
5    EAxisAlignment,
6    EDataPointWidthMode,
7    ENumericFormat,
8    FastBoxPlotRenderableSeries,
9    ICategoryAxisOptions,
10    NumberRange,
11    NumericAxis,
12    Rect,
13    SciChartSubSurface,
14    SciChartSurface,
15    ZoomExtentsModifier,
16    ZoomPanModifier,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20export const drawExample = async (rootElement: string | HTMLDivElement) => {
21    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
22
23    // 1st sub-surface
24    const sub1 = SciChartSubSurface.createSubSurface(sciChartSurface, {
25        position: new Rect(0, 0, 0.5, 1),
26        theme: appTheme.SciChartJsTheme,
27    });
28
29    sub1.xAxes.add(
30        new CategoryAxis(wasmContext, {
31            growBy: new NumberRange(0.05, 0.05),
32            labels: ["P1", "P2", "P3", "P4", "P5", "P6"],
33            axisAlignment: EAxisAlignment.Left,
34        })
35    );
36    sub1.yAxes.add(
37        new NumericAxis(wasmContext, {
38            axisAlignment: EAxisAlignment.Bottom,
39            growBy: new NumberRange(0.05, 0.05),
40            autoRange: EAutoRange.Once,
41            flippedCoordinates: true,
42            labelFormat: ENumericFormat.Decimal,
43            labelPrecision: 0,
44        })
45    );
46
47    const boxSeries1 = new FastBoxPlotRenderableSeries(wasmContext, {
48        dataSeries: new BoxPlotDataSeries(wasmContext, {
49            xValues: [1, 2, 3, 4, 5, 6],
50            minimumValues: [0, 1, 0.5, 0, 1, 0.5],
51            maximumValues: [10, 9, 9.5, 10, 9, 9.5],
52            medianValues: [4.5, 5.5, 5, 4.5, 5.5, 5],
53            lowerQuartileValues: [3, 4, 3.5, 3, 4, 3.5],
54            upperQuartileValues: [7, 6, 6.5, 7, 6, 6.5],
55        }),
56        stroke: appTheme.MutedSkyBlue,
57        fill: appTheme.MutedSkyBlue + "66",
58        strokeThickness: 2,
59        dataPointWidthMode: EDataPointWidthMode.Relative,
60        dataPointWidth: 0.5,
61        opacity: 0.8,
62        whiskers: {
63            stroke: appTheme.MutedSkyBlue,
64            strokeThickness: 2,
65            strokeDashArray: [5, 5],
66        },
67        cap: {
68            stroke: appTheme.MutedOrange,
69            strokeThickness: 2,
70            dataPointWidth: 0.5,
71        },
72        medianLine: {
73            stroke: appTheme.MutedOrange,
74            strokeThickness: 2,
75        },
76    });
77    sub1.renderableSeries.add(boxSeries1);
78
79    // 2nd sub-surface
80    const sub2 = SciChartSubSurface.createSubSurface(sciChartSurface, {
81        position: new Rect(0.5, 0, 0.5, 1),
82        theme: appTheme.SciChartJsTheme,
83    });
84
85    sub2.xAxes.add(
86        new NumericAxis(wasmContext, {
87            growBy: new NumberRange(0.1, 0.1),
88            autoRange: EAutoRange.Once,
89            labelFormat: ENumericFormat.Decimal,
90            labelPrecision: 0,
91        })
92    );
93    sub2.yAxes.add(
94        new NumericAxis(wasmContext, {
95            axisAlignment: EAxisAlignment.Left,
96            growBy: new NumberRange(0.05, 0.05),
97            autoRange: EAutoRange.Once,
98            flippedCoordinates: false,
99            labelFormat: ENumericFormat.Decimal,
100            labelPrecision: 0,
101        })
102    );
103
104    const boxSeries2 = new FastBoxPlotRenderableSeries(wasmContext, {
105        dataSeries: new BoxPlotDataSeries(wasmContext, {
106            xValues: [1, 2, 5, 7.5, 12],
107            minimumValues: [0, 1, 2, 5, 7],
108            lowerQuartileValues: [1, 2, 3.5, 6, 9],
109            medianValues: [3, 2.8, 6, 7, 10],
110            upperQuartileValues: [4, 3, 8, 9, 11],
111            maximumValues: [5, 4, 9.5, 10, 13],
112        }),
113        stroke: appTheme.MutedTeal,
114        fill: appTheme.MutedPurple + "66",
115        strokeThickness: 1,
116        dataPointWidthMode: EDataPointWidthMode.Range,
117        dataPointWidth: 0.6,
118        opacity: 0.8,
119        whiskers: {
120            stroke: appTheme.MutedTeal,
121            strokeThickness: 1,
122        },
123        cap: {
124            stroke: appTheme.MutedPurple,
125            strokeThickness: 2,
126            dataPointWidth: 0.5,
127        },
128        medianLine: {
129            stroke: appTheme.MutedPurple,
130            strokeThickness: 2,
131        },
132    });
133    sub2.renderableSeries.add(boxSeries2);
134    
135    sub2.chartModifiers.add(
136        new ZoomPanModifier(), 
137        new ZoomExtentsModifier()
138    );
139
140    return { sciChartSurface, wasmContext };
141};
142