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