React Spline Line Chart

1import { appTheme } from "../../../theme";
2import {
3    ELegendOrientation,
4    EllipsePointMarker,
5    FastLineRenderableSeries,
6    LegendModifier,
7    MouseWheelZoomModifier,
8    NumericAxis,
9    NumberRange,
10    SciChartSurface,
11    SplineLineRenderableSeries,
12    WaveAnimation,
13    XyDataSeries,
14    ZoomExtentsModifier,
15    ZoomPanModifier,
16    BezierRenderDataTransform,
17    AxisMarkerAnnotation,
18    ECoordinateMode,
19} from "scichart";
20
21export const drawExample = async (rootElement: string | HTMLDivElement) => {
22    // Create a SciChartSurface
23    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
24        theme: appTheme.SciChartJsTheme,
25    });
26
27    // Create the X,Y Axis
28    const xAxis = new NumericAxis(wasmContext);
29    sciChartSurface.xAxes.add(xAxis);
30
31    const yAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.2) });
32    sciChartSurface.yAxes.add(yAxis);
33
34    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
35    const yValues = [50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60];
36
37    // Create an XyDataSeries as data source
38    const xyDataSeries = new XyDataSeries(wasmContext, {
39        dataSeriesName: "Original Data ",
40        xValues,
41        yValues,
42    });
43
44    const splineXyDataSeries = new XyDataSeries(wasmContext, {
45        dataSeriesName: "Default Spline",
46        xValues,
47        yValues,
48    });
49
50    // Create and add a standard line series to the chart.
51    // This will be used to compare the spline (smoothed) algorithm
52    const lineSeries = new FastLineRenderableSeries(wasmContext, {
53        stroke: appTheme.VividOrange,
54        strokeThickness: 3,
55        dataSeries: xyDataSeries,
56        pointMarker: new EllipsePointMarker(wasmContext, {
57            width: 11,
58            height: 11,
59            fill: appTheme.ForegroundColor,
60            stroke: appTheme.VividSkyBlue,
61        }),
62        animation: new WaveAnimation({ zeroLine: 10, pointDurationFraction: 0.5, duration: 1000 }),
63    });
64    sciChartSurface.renderableSeries.add(lineSeries);
65
66    // Create and add a Spline line series to the chart
67    const splineSeries = new SplineLineRenderableSeries(wasmContext, {
68        stroke: appTheme.VividSkyBlue,
69        strokeThickness: 4,
70        dataSeries: splineXyDataSeries,
71        pointMarker: new EllipsePointMarker(wasmContext, {
72            width: 11,
73            height: 11,
74            fill: appTheme.ForegroundColor,
75            stroke: appTheme.VividSkyBlue,
76        }),
77        interpolationPoints: 10, // Set interpolation points to decide the amount of smoothing,
78        animation: new WaveAnimation({ zeroLine: 10, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true }),
79    });
80    sciChartSurface.renderableSeries.add(splineSeries);
81
82    const bezierDataSeries = new XyDataSeries(wasmContext, {
83        dataSeriesName: "Bezier (Range Restricted)",
84        xValues,
85        yValues,
86    });
87
88    const bezierSeries = new FastLineRenderableSeries(wasmContext, {
89        stroke: appTheme.VividPurple,
90        strokeThickness: 4,
91        dataSeries: bezierDataSeries,
92        pointMarker: new EllipsePointMarker(wasmContext, {
93            width: 11,
94            height: 11,
95            fill: appTheme.ForegroundColor,
96            stroke: appTheme.VividSkyBlue,
97        }),
98        animation: new WaveAnimation({ zeroLine: 10, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true }),
99    });
100    const bezierTransform = new BezierRenderDataTransform(bezierSeries, wasmContext, [
101        bezierSeries.drawingProviders[0],
102    ]);
103    bezierSeries.renderDataTransform = bezierTransform;
104    sciChartSurface.renderableSeries.add(bezierSeries);
105
106    const curvatureAnnotation = new AxisMarkerAnnotation({
107        yCoordinateMode: ECoordinateMode.Relative,
108        y1: 0.5,
109        formattedValue: "Bezier Curvature 0.5",
110        backgroundColor: appTheme.VividPurple,
111        isEditable: true,
112        onDrag: (args) => {
113            bezierTransform.curvature = curvatureAnnotation.y1;
114            curvatureAnnotation.formattedValue = "Bezier Curvature " + curvatureAnnotation.y1.toFixed(2);
115        },
116    });
117    sciChartSurface.annotations.add(curvatureAnnotation);
118
119    // OPTIONAL: Add some interactivity modifiers
120    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
121    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
122    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
123    sciChartSurface.chartModifiers.add(
124        new LegendModifier({ orientation: ELegendOrientation.Vertical, showCheckboxes: true })
125    );
126
127    sciChartSurface.zoomExtents();
128    return { sciChartSurface, wasmContext };
129};
130