React Error Bars Chart

1import { appTheme } from "../../../theme";
2import {
3    NumericAxis,
4    XyDataSeries,
5    SciChartSurface,
6    NumberRange,
7    ZoomPanModifier,
8    ZoomExtentsModifier,
9    MouseWheelZoomModifier,
10    HlcDataSeries,
11    PinchZoomModifier,
12    EllipsePointMarker,
13    FastErrorBarsRenderableSeries,
14    EErrorMode,
15    EErrorDirection,
16    EDataPointWidthMode,
17    EAnimationType,
18    SplineMountainRenderableSeries,
19    GradientParams,
20    Point,
21} from "scichart";
22
23export const drawExample = async (rootElement: string | HTMLDivElement) => {
24    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
25        theme: appTheme.SciChartJsTheme,
26    });
27
28    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
29    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
30
31    // Xy values for the data
32    const xValues = [0, 1, 2, 2.5, 4.5, 5, 6, 7, 8];
33    const yValues = [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0];
34
35    const randomError = () => Math.random() * 0.2 + 0.2;
36    // Low high error (absolute values)
37    const lowValues = yValues.map((y) => y - randomError());
38    const highValues = yValues.map((y) => y + randomError());
39
40    // Left/right error (absolute values)
41    const leftValues = xValues.map((x) => x - randomError());
42    const rightValues = xValues.map((x) => x + randomError());
43
44    // add optional mountain series. We use Spline type, for higher performance use FastLine or FastMountainRenderableSeries
45    const lineSeries = new SplineMountainRenderableSeries(wasmContext, {
46        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
47        strokeThickness: 5,
48        stroke: appTheme.VividSkyBlue,
49        fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
50            { offset: 0, color: appTheme.VividSkyBlue + "77" },
51            { offset: 1, color: "Transparent" },
52        ]),
53        animation: { type: EAnimationType.Scale, options: { zeroLine: -1, duration: 500 } },
54    });
55    sciChartSurface.renderableSeries.add(lineSeries);
56
57    // Define Horizontal Error Bars Series, Error bars require HLC data with absolute values for error whiskers
58    const errorBarsHorizontalSeries = new FastErrorBarsRenderableSeries(wasmContext, {
59        dataSeries: new HlcDataSeries(wasmContext, {
60            xValues,
61            yValues,
62            highValues: leftValues,
63            lowValues: rightValues,
64        }),
65        errorMode: EErrorMode.Both,
66        errorDirection: EErrorDirection.Horizontal,
67        dataPointWidthMode: EDataPointWidthMode.Relative,
68        dataPointWidth: 0.3,
69        strokeThickness: 4,
70        stroke: appTheme.VividSkyBlue + "77",
71        animation: { type: EAnimationType.Scale, options: { zeroLine: 0, duration: 500 } },
72    });
73    sciChartSurface.renderableSeries.add(errorBarsHorizontalSeries);
74
75    // Define Vertical Error Bars Series, Error bars require HLC data with absolute values for error whiskers
76    const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
77        dataSeries: new HlcDataSeries(wasmContext, { xValues, yValues, highValues, lowValues }),
78        errorMode: EErrorMode.Both,
79        errorDirection: EErrorDirection.Vertical,
80        dataPointWidthMode: EDataPointWidthMode.Relative,
81        dataPointWidth: 0.3,
82        strokeThickness: 4,
83        stroke: appTheme.VividSkyBlue,
84        animation: { type: EAnimationType.Scale, options: { zeroLine: 0, duration: 500 } },
85        // Add optional pointmarker (or use separate XyScatterRenderableSeries)
86        pointMarker: new EllipsePointMarker(wasmContext, {
87            width: 9,
88            height: 9,
89            strokeThickness: 0,
90            fill: appTheme.VividOrange,
91        }),
92    });
93    sciChartSurface.renderableSeries.add(errorBarsSeries);
94
95    // add some interactivity
96    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
97    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
98    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
99
100    sciChartSurface.zoomExtents();
101
102    return { sciChartSurface };
103};
104