JavaScript Digital Line Chart

1import {
2    EllipsePointMarker,
3    FastLineRenderableSeries,
4    MouseWheelZoomModifier,
5    NumberRange,
6    NumericAxis,
7    ScaleAnimation,
8    SciChartSurface,
9    XyDataSeries,
10    ZoomExtentsModifier,
11    ZoomPanModifier,
12} from "scichart";
13import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
14import { appTheme } from "../../../theme";
15
16export const drawExample = async (rootElement: string | HTMLDivElement) => {
17    // Create a SciChartSurface
18    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
19        theme: appTheme.SciChartJsTheme,
20    });
21
22    // Create the X,Y Axis
23    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
24    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.05) }));
25
26    // Create some xValues, yValues arrays
27    const { xValues, yValues } = new RandomWalkGenerator().Seed(1337).getRandomWalkSeries(25);
28
29    // Create and add a line series to the chart
30    sciChartSurface.renderableSeries.add(
31        new FastLineRenderableSeries(wasmContext, {
32            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
33            stroke: appTheme.VividPink,
34            strokeThickness: 3,
35            // Flag isDigitalLine turns a normal line series into a digital line series
36            isDigitalLine: true,
37            pointMarker: new EllipsePointMarker(wasmContext, {
38                width: 11,
39                height: 11,
40                fill: appTheme.VividPink,
41                stroke: appTheme.PaleSkyBlue,
42                strokeThickness: 2,
43            }),
44            animation: new ScaleAnimation({ zeroLine: -1, duration: 500, fadeEffect: true }),
45        })
46    );
47
48    // OPTIONAL: Add some interactivity modifiers
49    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
50    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
51    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
52
53    // Zoom to fit
54    sciChartSurface.zoomExtents();
55
56    return { sciChartSurface, wasmContext };
57};
58