JavaScript Spline Line Chart

Demonstrates how to create a JavaScript Spline Line Chart using SciChart.js, our feature-rich JavaScript Chart Library

Fullscreen

Edit

Docs

import { appTheme } from "./appTheme";
import {
    ELegendOrientation,
    EllipsePointMarker,
    FastLineRenderableSeries,
    LegendModifier,
    MouseWheelZoomModifier,
    NumericAxis,
    NumberRange,
    SciChartSurface,
    SplineLineRenderableSeries,
    WaveAnimation,
    XyDataSeries,
    ZoomExtentsModifier,
    ZoomPanModifier,
    BezierRenderDataTransform,
    AxisMarkerAnnotation,
    ECoordinateMode,
} from "scichart";

export const drawExample = async (rootElement: string | HTMLDivElement) => {
    // Create a SciChartSurface
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
        theme: appTheme.SciChartJsTheme,
    });

    // Create the X,Y Axis
    const xAxis = new NumericAxis(wasmContext);
    sciChartSurface.xAxes.add(xAxis);

    const yAxis = new NumericAxis(wasmContext, { growBy: new NumberRange(0.05, 0.2) });
    sciChartSurface.yAxes.add(yAxis);

    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
    const yValues = [50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60];

    // Create an XyDataSeries as data source
    const xyDataSeries = new XyDataSeries(wasmContext, {
        dataSeriesName: "Original Data ",
        xValues,
        yValues,
    });

    const splineXyDataSeries = new XyDataSeries(wasmContext, {
        dataSeriesName: "Default Spline",
        xValues,
        yValues,
    });

    // Create and add a standard line series to the chart.
    // This will be used to compare the spline (smoothed) algorithm
    const lineSeries = new FastLineRenderableSeries(wasmContext, {
        stroke: appTheme.VividOrange,
        strokeThickness: 3,
        dataSeries: xyDataSeries,
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 11,
            height: 11,
            fill: appTheme.ForegroundColor,
            stroke: appTheme.VividSkyBlue,
        }),
        animation: new WaveAnimation({ zeroLine: 10, pointDurationFraction: 0.5, duration: 1000 }),
    });
    sciChartSurface.renderableSeries.add(lineSeries);

    // Create and add a Spline line series to the chart
    const splineSeries = new SplineLineRenderableSeries(wasmContext, {
        stroke: appTheme.VividSkyBlue,
        strokeThickness: 4,
        dataSeries: splineXyDataSeries,
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 11,
            height: 11,
            fill: appTheme.ForegroundColor,
            stroke: appTheme.VividSkyBlue,
        }),
        interpolationPoints: 10, // Set interpolation points to decide the amount of smoothing,
        animation: new WaveAnimation({ zeroLine: 10, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true }),
    });
    sciChartSurface.renderableSeries.add(splineSeries);

    const bezierDataSeries = new XyDataSeries(wasmContext, {
        dataSeriesName: "Bezier (Range Restricted)",
        xValues,
        yValues,
    });

    const bezierSeries = new FastLineRenderableSeries(wasmContext, {
        stroke: appTheme.VividPurple,
        strokeThickness: 4,
        dataSeries: bezierDataSeries,
        pointMarker: new EllipsePointMarker(wasmContext, {
            width: 11,
            height: 11,
            fill: appTheme.ForegroundColor,
            stroke: appTheme.VividSkyBlue,
        }),
        animation: new WaveAnimation({ zeroLine: 10, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true }),
    });
    const bezierTransform = new BezierRenderDataTransform(bezierSeries, wasmContext, [
        bezierSeries.drawingProviders[0],
    ]);
    bezierSeries.renderDataTransform = bezierTransform;
    sciChartSurface.renderableSeries.add(bezierSeries);

    const curvatureAnnotation = new AxisMarkerAnnotation({
        yCoordinateMode: ECoordinateMode.Relative,
        y1: 0.5,
        formattedValue: "Bezier Curvature 0.5",
        backgroundColor: appTheme.VividPurple,
        isEditable: true,
        onDrag: (args) => {
            bezierTransform.curvature = curvatureAnnotation.y1;
            curvatureAnnotation.formattedValue = "Bezier Curvature " + curvatureAnnotation.y1.toFixed(2);
        },
    });
    sciChartSurface.annotations.add(curvatureAnnotation);

    // OPTIONAL: Add some interactivity modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
    sciChartSurface.chartModifiers.add(
        new LegendModifier({ orientation: ELegendOrientation.Vertical, showCheckboxes: true })
    );

    sciChartSurface.zoomExtents();
    return { sciChartSurface, wasmContext };
};

JavaScript Spline Line Chart

Overview

This example demonstrates how to implement a high-performance spline line chart using SciChart.js in a pure JavaScript environment. The chart displays three distinct series: a FastLineRenderableSeries for original data, a SplineLineRenderableSeries with smooth interpolation, and an advanced Bezier-transformed series using BezierRenderDataTransform with interactive curvature adjustments.

Technical Implementation

The implementation begins by initializing a SciChartSurface via an asynchronous factory method, as detailed in the Getting Started with SciChart JS guide. NumericAxis are added, with axis scaling managed through properties such as growBy; further specifics are available in the NumericAxis API Documentation. Data is provided to the chart using XyDataSeries structures, and series animations are implemented via WaveAnimation to achieve dynamic transitions. The example further enhances the visual output by using the SplineLineRenderableSeries with adjustable interpolation points for smooth curve rendering and employs a Bezier render data transform, which allows for runtime adjustments of the smoothing curvature through interactive axis marker annotations—more details can be found in the Spline Line Chart Documentation.

Features and Capabilities

This example not only illustrates real-time data updates and animated transitions but also demonstrates advanced customization capabilities. Interactive modifiers such as ZoomPanModifier and MouseWheelZoomModifier are integrated to enhance user experience, with additional insights available in the ZoomPanModifier API Documentation. Custom point markers, created using the EllipsePointMarker class, add clarity to data points while maintaining consistent visual styling.

Integration and Best Practices

Following best practices, the chart’s resources are properly managed by disposing of the SciChartSurface with its delete() method, ensuring efficient WebGL context management and avoiding memory leaks; these strategies are outlined in the Memory Best Practices documentation. This JavaScript implementation serves as a robust example of how to integrate SciChart.js into a project while leveraging its advanced charting features and interactive capabilities for a seamless data visualization experience.