React Band Chart

1import {
2    MouseWheelZoomModifier,
3    ZoomExtentsModifier,
4    ZoomPanModifier,
5    XyyDataSeries,
6    NumericAxis,
7    FastBandRenderableSeries,
8    SciChartSurface,
9    NumberRange,
10    SweepAnimation,
11    GradientParams,
12    Point,
13} from "scichart";
14
15import { appTheme } from "../../../theme";
16
17export const drawExample = async (rootElement: string | HTMLDivElement) => {
18    // Create a SciChartSurface
19    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
20        theme: appTheme.SciChartJsTheme,
21    });
22
23    // Add an XAxis, YAxis
24    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
25    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
26
27    // Create some data for the example. We need X, Y and Y1 values
28    const xValues = [];
29    const yValues = [];
30    const y1Values = [];
31    const POINTS = 1000;
32    const STEP = (3 * Math.PI) / POINTS;
33    for (let i = 0; i <= 1000; i++) {
34        const k = 1 - i / 2000;
35        xValues.push(i);
36        yValues.push(Math.sin(i * STEP) * k * 0.7);
37        y1Values.push(Math.cos(i * STEP) * k);
38    }
39
40    // Create the band series and add to the chart
41    // The bandseries requires a special dataseries type called XyyDataSeries with X,Y and Y1 values
42    sciChartSurface.renderableSeries.add(
43        new FastBandRenderableSeries(wasmContext, {
44            dataSeries: new XyyDataSeries(wasmContext, { xValues, yValues, y1Values }),
45            strokeThickness: 3,
46            fill: appTheme.VividOrange + "33",
47            fillY1: appTheme.VividSkyBlue + "33",
48            stroke: appTheme.VividOrange,
49            strokeY1: appTheme.VividSkyBlue,
50            animation: new SweepAnimation({ duration: 800 }),
51        })
52    );
53
54    sciChartSurface.renderableSeries.add(
55        new FastBandRenderableSeries(wasmContext, {
56            dataSeries: new XyyDataSeries(wasmContext, {
57                xValues,
58                yValues: yValues.map((y) => y - 2),
59                y1Values: y1Values.map((y) => y - 2),
60            }),
61            strokeThickness: 3,
62            stroke: appTheme.VividOrange,
63            strokeY1: appTheme.VividSkyBlue,
64            fillLinearGradient: new GradientParams(new Point(0, 0.6), new Point(0, 0.9), [
65                { color: appTheme.MutedRed + "99", offset: 0 },
66                { color: appTheme.MutedOrange + "99", offset: 1 },
67            ]),
68            fillLinearGradientY1: new GradientParams(new Point(0, 0.6), new Point(0, 0.9), [
69                { color: appTheme.MutedPurple + "99", offset: 0 },
70                { color: appTheme.MutedTeal + "99", offset: 1 },
71            ]),
72            animation: new SweepAnimation({ duration: 800 }),
73        })
74    );
75
76    // Optional: Add some interactivity modifiers
77    sciChartSurface.chartModifiers.add(
78        new ZoomExtentsModifier(),
79        new ZoomPanModifier({ enableZoom: true }),
80        new MouseWheelZoomModifier()
81    );
82
83    sciChartSurface.zoomExtents();
84    return { wasmContext, sciChartSurface };
85};
86