React Mountain Chart

1import {
2    FastMountainRenderableSeries,
3    GradientParams,
4    MouseWheelZoomModifier,
5    NumberRange,
6    NumericAxis,
7    Point,
8    RubberBandXyZoomModifier,
9    SciChartSurface,
10    WaveAnimation,
11    XyDataSeries,
12    ZoomExtentsModifier,
13} from "scichart";
14import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
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    // Create an XAxis and YAxis
24    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
25    sciChartSurface.yAxes.add(
26        new NumericAxis(wasmContext, {
27            growBy: new NumberRange(0.05, 0.05),
28        })
29    );
30
31    const POINTS = 1000;
32
33    // Create arrays of x, y values (just arrays of numbers)
34    const { xValues, yValues } = new RandomWalkGenerator().Seed(0).getRandomWalkSeries(POINTS);
35
36    // Create a Mountain Series and add to the chart
37    sciChartSurface.renderableSeries.add(
38        new FastMountainRenderableSeries(wasmContext, {
39            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
40            stroke: appTheme.VividSkyBlue,
41            strokeThickness: 3,
42            zeroLineY: 0.0,
43            fill: appTheme.VividSkyBlue, // when a solid color is required, use fill
44            // when a gradient is required, use fillLinearGradient
45            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
46                { color: appTheme.MutedSkyBlue, offset: 0 },
47                { color: "Transparent", offset: 1 },
48            ]),
49            animation: new WaveAnimation({ duration: 1000, fadeEffect: true, zeroLine: 0 }),
50        })
51    );
52
53    // Optional: Add some interactivity to the chart
54    sciChartSurface.chartModifiers.add(
55        new ZoomExtentsModifier(),
56        new RubberBandXyZoomModifier(),
57        new MouseWheelZoomModifier()
58    );
59
60    sciChartSurface.zoomExtents();
61
62    return { wasmContext, sciChartSurface };
63};
64