JavaScript Spline Mountain Chart

This example showcases how to create a JavaScript Spline Mountain Chart using SciChart.js' feature-rich and High Performance JavaScript Charts.

Fullscreen

Edit

Docs

import { appTheme } from "./appTheme";
import {
    EllipsePointMarker,
    GradientParams,
    MouseWheelZoomModifier,
    NumericAxis,
    NumberRange,
    Point,
    RubberBandXyZoomModifier,
    SciChartSurface,
    SplineMountainRenderableSeries,
    WaveAnimation,
    XyDataSeries,
    ZoomExtentsModifier,
} from "scichart";

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

    // Create an XAxis and YAxis
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "X Axis" }));
    sciChartSurface.yAxes.add(
        new NumericAxis(wasmContext, {
            growBy: new NumberRange(0.05, 0.2),
            axisTitle: "Y Axis",
        })
    );

    // Create some data to add to the chart
    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 a Spline Mountain Series and add to the chart
    sciChartSurface.renderableSeries.add(
        new SplineMountainRenderableSeries(wasmContext, {
            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
            interpolationPoints: 20, // Sets number of points to interpolate to smooth the line
            stroke: appTheme.VividSkyBlue,
            strokeThickness: 5,
            zeroLineY: 0.0,
            fill: appTheme.VividSkyBlue, // when a solid color is required, use fill
            // when a gradient is required, use fillLinearGradient
            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
                { color: appTheme.MutedSkyBlue, offset: 0 },
                { color: "Transparent", offset: 1 },
            ]),
            pointMarker: new EllipsePointMarker(wasmContext, {
                strokeThickness: 3,
                width: 13,
                height: 13,
                stroke: appTheme.VividSkyBlue,
                fill: appTheme.ForegroundColor,
            }),
            animation: new WaveAnimation({ duration: 1000, fadeEffect: true, zeroLine: 10 }),
        })
    );

    // Optional: Add some interactivity to the chart
    sciChartSurface.chartModifiers.add(
        new ZoomExtentsModifier(),
        new RubberBandXyZoomModifier(),
        new MouseWheelZoomModifier()
    );

    sciChartSurface.zoomExtents();

    return { wasmContext, sciChartSurface };
};

JavaScript Spline Mountain Chart

Overview

This example demonstrates how to create a high-performance Spline Mountain Chart using JavaScript and SciChart.js. The chart is initialized asynchronously and leverages modern WebAssembly techniques to deliver smooth interpolation, dynamic gradient fills, and interactive modifiers for an engaging data visualization experience.

Technical Implementation

The chart is created by asynchronously initializing a SciChartSurface from a WebAssembly context, following techniques outlined in the Getting Started with SciChart JS guide. A SplineMountainRenderableSeries is then configured with an associated XyDataSeries and 20 interpolation points, ensuring a smooth curve as detailed in The Spline (Smoothed) Mountain Series Type. The series utilizes a gradient fill set up with GradientParams and incorporates an animated wave effect via the WaveAnimation API for visual appeal. Interactive modifiers such as ZoomExtentsModifier, RubberBandXyZoomModifier, and MouseWheelZoomModifier are added to enable intuitive zooming and panning, as described in the Tutorial 03 - Adding Zooming, Panning Behavior documentation.

Features and Capabilities

The example provides real-time chart rendering with advanced customizations. It employs a smooth spline interpolation technique and utilizes an EllipsePointMarker for clear data point visualization, as documented in the PointMarkers API documentation. The inclusion of a WaveAnimation adds dynamic visual transitions, enhancing the overall user experience. Additionally, the use of WebAssembly technology helps achieve optimal performance, which is further explained in Surpassing the limits of JavaScript for Charting with WebAssembly.

Integration and Best Practices

Designed exclusively for JavaScript, this implementation follows best practices for asynchronous initialization and resource cleanup. Developers can easily integrate this pattern by targeting a root HTML element and disposing of the SciChartSurface when necessary, in line with recommendations from the Memory Best Practices guide. This clear and concise approach ensures efficient memory management and sets out a scalable path for further enhancements in high-performance charting solutions.