1import {
2    SciChartSurface,
3    NumericAxis,
4    EAxisAlignment,
5    NumberRange,
6    FastLineRenderableSeries,
7    XyDataSeries,
8    AUTO_COLOR,
9    SweepAnimation,
10    ZoomExtentsModifier,
11    MouseWheelZoomModifier,
12    ZoomPanModifier,
13    RolloverModifier,
14} from "scichart";
15import { RandomWalkGenerator } from "../../../ExampleData/RandomWalkGenerator";
16import { GridLayoutModifier } from "./GridLayoutModifier";
17
18export const drawExample = async (rootElement: string | HTMLDivElement) => {
19    // Create a SciChartSurface
20    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement);
21
22    // Create an XAxis and YAxis
23    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
24    sciChartSurface.yAxes.add(
25        new NumericAxis(wasmContext, {
26            axisAlignment: EAxisAlignment.Left,
27            growBy: new NumberRange(0.05, 0.05),
28        })
29    );
30
31    const POINTS = 1000;
32    for (let i = 0; i < 10; i++) {
33        // Create arrays of x, y values (just arrays of numbers)
34        const { xValues, yValues } = new RandomWalkGenerator().getRandomWalkSeries(POINTS);
35
36        // Create a Series and add to the chart
37        sciChartSurface.renderableSeries.add(
38            new FastLineRenderableSeries(wasmContext, {
39                dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: `Series ${i + 1}` }),
40                stroke: AUTO_COLOR,
41                strokeThickness: 3,
42                animation: new SweepAnimation({ duration: 500, fadeEffect: true }),
43            })
44        );
45    }
46
47    // Optional: Add some interactivity to the chart
48    sciChartSurface.chartModifiers.add(
49        new ZoomExtentsModifier({ modifierGroup: "chart" }),
50        new MouseWheelZoomModifier({ modifierGroup: "chart" }),
51        new ZoomPanModifier({ modifierGroup: "chart" }),
52        new RolloverModifier({ modifierGroup: "chart" })
53    );
54
55    const glm = new GridLayoutModifier();
56    sciChartSurface.chartModifiers.add(glm);
57
58    sciChartSurface.zoomExtents();
59
60    const setIsGridLayoutMode = (value: boolean) => {
61        glm.isGrid = value;
62    };
63
64    return { wasmContext, sciChartSurface, setIsGridLayoutMode };
65};
66

Dynamic Chart Layout in JavaScript with SciChart

Overview

This example demonstrates how to create a dynamic chart layout using SciChart.js with JavaScript. The primary purpose is to switch between a single chart view and a grid layout where each series is displayed as a sub-chart. The example includes a custom chart modifier that implements smooth animated transitions between layouts using the SciChart.js API.

Technical Implementation

The custom chart modifier (implemented in GridLayoutModifier.ts) watches a boolean property and, when toggled, calculates grid positions using relative coordinates. It uses the parent surface's JSON definition (via the .toJSON() method) to configure sub-charts. The modifier leverages the GenericAnimation and the DoubleAnimator.interpolate method along with easing functions such as easing.outCubic to animate layout transitions smoothly. This approach allows each sub-chart to animate from a full-size position into its respective grid cell, and vice versa.

Developers can refer to the Custom Chart Modifier API for additional details on extending chart behavior. Moreover, the example shows how to convert the overall chart state into a JSON configuration and then reapply it to each sub-chart, following best practices for dynamic layout updates.

Features and Capabilities

Dynamic Layout Switching: The modifier enables users to flip between a single chart view and a grid layout where each series appears in its sub-chart. This grid layout uses relative coordinate modes and configurable padding to create visually distinct sub-charts. For more details on customizing sub-chart positioning, see the SubCharts Positioning documentation.
Smooth Animations: Utilizing GenericAnimation with interpolation via DoubleAnimator, the chart animates transitions between layouts. This provides a polished user experience during dynamic updates.
Data Series Sharing: The implementation shares dataSeries between the parent surface and sub-charts, ensuring that the underlying data remains synchronized while the series on the parent chart are hidden during grid mode. This approach is in line with best practices for managing dynamic series control in SciChart.js.

Integration and Best Practices

Even though SciChart.js supports multiple frameworks, this example focuses on the JavaScript implementation. The example avoids using builder APIs or hooks and instead relies entirely on standard JavaScript techniques combined with SciChart.js's powerful API. For further insights on dynamic layout techniques and real-time chart updates, refer to Worked Example: Re-usable Chart Groups with SubCharts and the Performance Optimisation of JavaScript Applications & Charts guide.

Additionally, the interpolation techniques used for animating numerical values are essential for creating smooth visual transitions. Developers interested in understanding how interpolation works in this context can review the documentation for Animations API for more technical details.

This example serves as a solid reference for implementing dynamic grid layouts and animated transitions in real-time charts using SciChart.js with JavaScript.

javascript Chart Examples & Demos

Realtime JavaScript Chart Performance Demo

This demo showcases the incredible realtime performance of our JavaScript charts by updating the series with millions of data-points!

Load 500 Series x 500 Points Performance Demo

This demo showcases the incredible performance of our JavaScript Chart by loading 500 series with 500 points (250k points) instantly!

Load 1 Million Points Performance Demo

This demo showcases the incredible performance of our JavaScript Chart by loading a million points instantly.

Realtime Ghosted Traces

This demo showcases the realtime performance of our JavaScript Chart by animating several series with thousands of data-points at 60 FPS

Realtime Audio Spectrum Analyzer Chart | SciChart.js Demo

Realtime Audio Spectrum Analyzer Chart Example

See the frequency of recordings with the JavaScript audio spectrum analyzer example from SciChart. This real-time visualizer demo uses a Fourier Transform.