React Digital 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 { appTheme } from "../../../theme";
15import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
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.05),
28            axisTitle: "Y Axis",
29        })
30    );
31
32    const POINTS = 200;
33
34    // Create arrays of x, y values
35    const xValues = Array.from(Array(POINTS).keys());
36    const yValues = new RandomWalkGenerator().Seed(0).getRandomWalkSeries(POINTS).yValues;
37
38    // Create a Mountain Series and add to the chart
39    const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
40        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
41        stroke: appTheme.VividOrange,
42        strokeThickness: 3,
43        zeroLineY: 0.0,
44        fill: appTheme.VividOrange, // 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.MutedOrange, offset: 0 },
48            { color: "Transparent", offset: 1 },
49        ]),
50        isDigitalLine: true,
51        animation: new WaveAnimation({ duration: 1000, fadeEffect: true, zeroLine: 0 }),
52    });
53    sciChartSurface.renderableSeries.add(mountainSeries);
54
55    // Optional: Add some interactivity to the chart
56    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
57    sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier());
58    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
59
60    sciChartSurface.zoomExtents();
61    return { wasmContext, sciChartSurface };
62};
63