JavaScript Column Chart

Creates a JavaScript Column Chart using SciChart.js, with the following features: DataLabels, Rounded corners, Gradient-palette fill, startup animations.

Fullscreen

Edit

Docs

import { appTheme } from "./appTheme";
import {
    NumericAxis,
    FastColumnRenderableSeries,
    XyDataSeries,
    ZoomPanModifier,
    ZoomExtentsModifier,
    MouseWheelZoomModifier,
    SciChartSurface,
    NumberRange,
    WaveAnimation,
    GradientParams,
    Point,
    EHorizontalTextPosition,
    EVerticalTextPosition,
    PaletteFactory,
    Thickness,
} from "scichart";

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

    // Add an X, Y Axis
    sciChartSurface.xAxes.add(
        new NumericAxis(wasmContext, {
            labelPrecision: 0,
        })
    );
    sciChartSurface.yAxes.add(
        new NumericAxis(wasmContext, {
            growBy: new NumberRange(0, 0.1),
            labelPrecision: 0,
        })
    );

    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
    const yValues = [1, 2, 4, 8, 11, 15, 24, 46, 81, 117, 144, 160, 137, 101, 64, 35, 25, 14, 4, 1];

    // Create an add a column series
    sciChartSurface.renderableSeries.add(
        new FastColumnRenderableSeries(wasmContext, {
            dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
            // Fill & stroke support Hex strings and rgba()
            fill: appTheme.PaleSkyBlue + "77",
            stroke: appTheme.PaleSkyBlue,
            strokeThickness: 2,
            dataPointWidth: 0.7,
            cornerRadius: 8,
            // Optional datalabels on series. To enable set a style and position
            dataLabels: {
                horizontalTextPosition: EHorizontalTextPosition.Center,
                verticalTextPosition: EVerticalTextPosition.Above,
                style: { fontFamily: "Arial", fontSize: 16, padding: new Thickness(0, 0, 8, 0) },
                color: appTheme.ForegroundColor,
                precision: 0,
            },
            // Optional series animation executed when series shows
            animation: new WaveAnimation({ duration: 1000 }),
            // Horizontal gradient in X. For Y gradient choose fillLinearGradient property
            paletteProvider: PaletteFactory.createGradient(
                wasmContext,
                new GradientParams(new Point(0, 0), new Point(1, 1), [
                    { offset: 0, color: appTheme.VividOrange },
                    { offset: 0.67, color: appTheme.VividSkyBlue },
                    { offset: 1.0, color: appTheme.VividTeal },
                ]),
                { enableFill: true }
            ),
        })
    );

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

    sciChartSurface.zoomExtents();

    return { sciChartSurface, wasmContext };
};

Column Chart Example (JavaScript)

Overview

This example demonstrates how to create an interactive Column Chart using SciChart.js in a JavaScript environment. The chart illustrates key features such as data labels, rounded corners, gradient palette fills, and startup animations, providing a high-performance real-time data visualization solution.

Technical Implementation

The chart is initialized by creating a SciChartSurface via the asynchronous call to SciChartSurface.create(), a method detailed in the Tutorial 01 - Including SciChart.js in an HTML Page using CDN. The implementation sets up numeric axes using the NumericAxis class and populates the chart with a FastColumnRenderableSeries, which uses an XyDataSeries to manage the data points. Advanced customizations include setting rounded corners, a gradient fill created with PaletteFactory, and a WaveAnimation to animate the chart on startup. For more details on these aspects, refer to the The Column Series Type and The Animations API documentation.

Features and Capabilities

Key technical features of this example include interactive modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier which enhance user interaction by providing seamless zooming and panning capabilities. The series is further enhanced with data labels that are styled and positioned above each column for improved readability. The use of gradient fills via PaletteFactory not only enhances visual appeal but also demonstrates advanced customization options, aligning with best practices for high-performance WebGL rendering. Details on gradient customization can be found in the The PaletteFactory Helper Class documentation.

Integration and Best Practices

In a JavaScript integration, the chart is created and managed by directly invoking the drawExample function. Resource management is handled by returning a destructor function that calls sciChartSurface.delete(), ensuring that resources are properly freed when the chart is no longer needed. This approach aligns with recommended practices for WebAssembly integration and efficient memory management as explained in the Getting Started with SciChart JS guide. Additionally, the direct method of instantiating and disposing of the chart ensures optimal performance in high-frequency data scenarios.