React Spline Mountain Chart

1import { appTheme } from "../../../theme";
2import {
3    EllipsePointMarker,
4    GradientParams,
5    MouseWheelZoomModifier,
6    NumericAxis,
7    NumberRange,
8    Point,
9    RubberBandXyZoomModifier,
10    SciChartSurface,
11    SplineMountainRenderableSeries,
12    WaveAnimation,
13    XyDataSeries,
14    ZoomExtentsModifier,
15} from "scichart";
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    // Create an XAxis and YAxis
24    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis" }));
25    sciChartSurface.yAxes.add(
26        new NumericAxis(wasmContext, {
27            growBy: new NumberRange(0.05, 0.2),
28            axisTitle: "Y Axis",
29        })
30    );
31
32    // Create some data to add to the chart
33    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
34    const yValues = [50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60];
35
36    // Create a Spline Mountain Series and add to the chart
37    sciChartSurface.renderableSeries.add(
38        new SplineMountainRenderableSeries(wasmContext, {
39            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
40            interpolationPoints: 20, // Sets number of points to interpolate to smooth the line
41            stroke: appTheme.VividSkyBlue,
42            strokeThickness: 5,
43            zeroLineY: 0.0,
44            fill: appTheme.VividSkyBlue, // when a solid color is required, use fill
45            // when a gradient is required, use fillLinearGradient
46            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
47                { color: appTheme.MutedSkyBlue, offset: 0 },
48                { color: "Transparent", offset: 1 },
49            ]),
50            pointMarker: new EllipsePointMarker(wasmContext, {
51                strokeThickness: 3,
52                width: 13,
53                height: 13,
54                stroke: appTheme.VividSkyBlue,
55                fill: appTheme.ForegroundColor,
56            }),
57            animation: new WaveAnimation({ duration: 1000, fadeEffect: true, zeroLine: 10 }),
58        })
59    );
60
61    // Optional: Add some interactivity to the chart
62    sciChartSurface.chartModifiers.add(
63        new ZoomExtentsModifier(),
64        new RubberBandXyZoomModifier(),
65        new MouseWheelZoomModifier()
66    );
67
68    sciChartSurface.zoomExtents();
69
70    return { wasmContext, sciChartSurface };
71};
72