React Digital Band Chart

Demonstrates how to create a React Digital Band Chart or High-Low Fill using SciChart.js. This is our High Performance JavaScript Chart Library

Fullscreen

Edit

Docs

import {
    MouseWheelZoomModifier,
    ZoomExtentsModifier,
    ZoomPanModifier,
    XyyDataSeries,
    NumericAxis,
    FastBandRenderableSeries,
    SciChartSurface,
    NumberRange,
    SweepAnimation,
} 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,
    });

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

    // Create some data for the example. We need X, Y and Y1 values
    const xValues = [];
    const yValues = [];
    const y1Values = [];
    const POINTS = 50;
    const STEP = (3 * Math.PI) / POINTS;
    for (let i = 0; i <= POINTS; i++) {
        const k = 1 - i / 100;
        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,
            isDigitalLine: true,
            animation: new SweepAnimation({ duration: 800 }),
        })
    );

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

    return { wasmContext, sciChartSurface };
};

Digital Band Series Chart - React

Overview

This example demonstrates how to create a high-performance Digital Band Series Chart using SciChart.js within a React application. The chart showcases digital band rendering with high and low fill effects, animated transitions using a sweep animation, and interactive modifiers for zooming and panning.

Technical Implementation

The chart is initialized asynchronously through the <SciChartReact/> component by providing an initChart function. Within this function, a SciChartSurface is created along with numeric axes and a specialised data series (XyyDataSeries) that handles X, Y, and Y1 values. The series is configured with properties such as isDigitalLine and employs a SweepAnimation for smooth animated transitions. Interactive modifiers like ZoomExtentsModifier, ZoomPanModifier, and MouseWheelZoomModifier enhance user interaction with the chart. The asynchronous setup and integration are in line with React Charts with SciChart.js: Introducing “SciChart React” guidelines.

Features and Capabilities

The example showcases several advanced features including digital band rendering where different styles are applied to the upper and lower sections of the series. It leverages animated rendering and interactive zooming/panning to provide a responsive and dynamic user experience. Detailed configuration of the digital band is demonstrated based on The Digital (Step) Band Series Type documentation.

Integration and Best Practices

Integration with React is achieved by using the <SciChartReact/> component, which simplifies the chart lifecycle management. Developers are encouraged to follow best practices for async initialization and resource cleanup as outlined in Creating a SciChart React Component from the Ground Up. The example also adheres to performance optimization techniques by ensuring proper disposal of the SciChartSurface when necessary, a crucial aspect covered in the sciChart documentation. Additionally, the implementation and use of interactive chart modifiers reflect common techniques described in Tutorial 03 - Adding Zooming, Panning Behavior.