JavaScript Band Chart

Demonstrates how to create a JavaScript Band Chart or High-Low Fill using SciChart.js, our High Performance JavaScript Chart Framework

Fullscreen

Edit

Docs

import {
    MouseWheelZoomModifier,
    ZoomExtentsModifier,
    ZoomPanModifier,
    XyyDataSeries,
    NumericAxis,
    FastBandRenderableSeries,
    SciChartSurface,
    NumberRange,
    SweepAnimation,
    GradientParams,
    Point,
} from "scichart";

import { appTheme } from "./appTheme";

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

    // Add an XAxis, YAxis
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));

    // Create some data for the example. We need X, Y and Y1 values
    const xValues = [];
    const yValues = [];
    const y1Values = [];
    const POINTS = 1000;
    const STEP = (3 * Math.PI) / POINTS;
    for (let i = 0; i <= 1000; i++) {
        const k = 1 - i / 2000;
        xValues.push(i);
        yValues.push(Math.sin(i * STEP) * k * 0.7);
        y1Values.push(Math.cos(i * STEP) * k);
    }

    // Create the band series and add to the chart
    // The bandseries requires a special dataseries type called XyyDataSeries with X,Y and Y1 values
    sciChartSurface.renderableSeries.add(
        new FastBandRenderableSeries(wasmContext, {
            dataSeries: new XyyDataSeries(wasmContext, { xValues, yValues, y1Values }),
            strokeThickness: 3,
            fill: appTheme.VividOrange + "33",
            fillY1: appTheme.VividSkyBlue + "33",
            stroke: appTheme.VividOrange,
            strokeY1: appTheme.VividSkyBlue,
            animation: new SweepAnimation({ duration: 800 }),
        })
    );

    sciChartSurface.renderableSeries.add(
        new FastBandRenderableSeries(wasmContext, {
            dataSeries: new XyyDataSeries(wasmContext, {
                xValues,
                yValues: yValues.map((y) => y - 2),
                y1Values: y1Values.map((y) => y - 2),
            }),
            strokeThickness: 3,
            stroke: appTheme.VividOrange,
            strokeY1: appTheme.VividSkyBlue,
            fillLinearGradient: new GradientParams(new Point(0, 0.6), new Point(0, 0.9), [
                { color: appTheme.MutedRed + "99", offset: 0 },
                { color: appTheme.MutedOrange + "99", offset: 1 },
            ]),
            fillLinearGradientY1: new GradientParams(new Point(0, 0.6), new Point(0, 0.9), [
                { color: appTheme.MutedPurple + "99", offset: 0 },
                { color: appTheme.MutedTeal + "99", offset: 1 },
            ]),
            animation: new SweepAnimation({ duration: 800 }),
        })
    );

    // Optional: Add some interactivity modifiers
    sciChartSurface.chartModifiers.add(
        new ZoomExtentsModifier(),
        new ZoomPanModifier({ enableZoom: true }),
        new MouseWheelZoomModifier()
    );

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

Band Series Chart in JavaScript

Overview

This example demonstrates how to create a high-performance band series chart using SciChart.js in a JavaScript environment. It visualizes high and low values using two band series, each with distinct visual styles and smooth animations.

Technical Implementation

The chart is initialized asynchronously with SciChartSurface.create, which efficiently sets up the WebGL context. The implementation adds numeric X and Y axes and prepares three arrays for X, Y, and Y1 values. These values are fed into the XyyDataSeries (see XyyDataSeries documentation) to supply the data for each band. Two FastBandRenderableSeries are then created. The first series applies solid color fills with transparency, while the second series demonstrates the use of linear gradient fills defined via GradientParams. Both series incorporate smooth transitioning effects using SweepAnimation (SweepAnimation documentation).

Features and Capabilities

This example highlights several advanced features: interactive modifiers such as ZoomExtentsModifier, ZoomPanModifier, and MouseWheelZoomModifier enhance user experience by providing intuitive zooming and panning (refer to the interactive modifier guide). Additionally, the implementation demonstrates robust handling of real-time data updates and performance optimizations through efficient WebGL rendering.

Integration and Best Practices

Using a pure JavaScript approach, the example directly calls an asynchronous function that both creates the chart and returns a destructor for proper resource management. Developers can cleanly dispose of the chart by invoking the delete method on the SciChartSurface, as described in the SciChartSurface API documentation. This methodical approach ensures optimal performance and memory usage, making it a strong foundation for integrating SciChart.js into broader JavaScript applications.