Demonstrates loading 500 series, each with 500 points (250k points total) instantly. Click the Reload button at the bottom of the demo to see the chart draw again.

Fullscreen

Edit

Docs

drawExample.ts

index.tsx

containerSizeHooks.ts

theme.ts

Copy to clipboard

Minimise

Fullscreen

1import {
2    SciChartSurface,
3    NumericAxis,
4    NumberRange,
5    EAutoRange,
6    TextAnnotation,
7    EHorizontalAnchorPoint,
8    EVerticalAnchorPoint,
9    ECoordinateMode,
10    EAnnotationLayer,
11    XyDataSeries,
12    FastLineRenderableSeries,
13    ZoomExtentsModifier,
14    ZoomPanModifier,
15    MouseWheelZoomModifier,
16    EAxisAlignment,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20export type TTimeSpan = {
21    title: string;
22    durationMs: number;
23};
24
25const SERIES = 500;
26const POINTS = 500;
27
28export const drawExample = async (
29    rootElement: string | HTMLDivElement,
30    updateTimeSpans: (newTimeSpans: TTimeSpan[]) => void,
31    useVerticalChart = false
32) => {
33    // Create the SciChartSurface
34    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
35        theme: appTheme.SciChartJsTheme,
36    });
37
38    // Create an X,Y Axis
39    sciChartSurface.xAxes.add(
40        new NumericAxis(wasmContext, {
41            isVisible: false,
42            axisAlignment: useVerticalChart ? EAxisAlignment.Left : EAxisAlignment.Bottom,
43            flippedCoordinates: useVerticalChart,
44            visibleRange: new NumberRange(0, POINTS),
45            autoRange: EAutoRange.Never,
46            axisTitle: "X Axis",
47        })
48    );
49    sciChartSurface.yAxes.add(
50        new NumericAxis(wasmContext, {
51            isVisible: false,
52            axisAlignment: useVerticalChart ? EAxisAlignment.Bottom : EAxisAlignment.Left,
53            visibleRange: new NumberRange(-250, 250),
54            autoRange: EAutoRange.Never,
55            axisTitle: "Y Axis",
56        })
57    );
58
59    if (!useVerticalChart) {
60        const watermarkAnnotation = (text: string, offset: number = 0) => {
61            return new TextAnnotation({
62                text,
63                fontSize: 42,
64                fontWeight: "Bold",
65                textColor: appTheme.ForegroundColor,
66                x1: 0.5,
67                y1: 0.5,
68                yCoordShift: offset,
69                opacity: 0.43,
70                horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
71                verticalAnchorPoint: EVerticalAnchorPoint.Center,
72                xCoordinateMode: ECoordinateMode.Relative,
73                yCoordinateMode: ECoordinateMode.Relative,
74                annotationLayer: EAnnotationLayer.AboveChart,
75            });
76        };
77        // add a title annotation
78        sciChartSurface.annotations.add(watermarkAnnotation("SciChart.js Performance Demo", -52));
79        sciChartSurface.annotations.add(watermarkAnnotation(`${SERIES} Series x ${POINTS} Points per series`, 0));
80        sciChartSurface.annotations.add(watermarkAnnotation(`(${(SERIES * POINTS) / 1000}k DataPoints)`, 52));
81    }
82
83    // // add a title annotation
84    // // Add title annotation
85    // sciChartSurface.annotations.add(new TextAnnotation({
86    //     text: "SciChart.js Performance Demo: Draw 500 Series x 500 Points (250k Points total)",
87    //     fontSize: 16,
88    //     textColor: appTheme.ForegroundColor,
89    //     x1: 1,
90    //     y1: 0,
91    //     xCoordShift: -20,
92    //     opacity: 0.77,
93    //     horizontalAnchorPoint: EHorizontalAnchorPoint.Right,
94    //     xCoordinateMode: ECoordinateMode.Relative,
95    //     yCoordinateMode: ECoordinateMode.Relative,
96    // }));
97
98    // We pre-create N empty FastLineRenderableSeries for the performance test. Going to fill these with data below
99    const dataSeriesArray: XyDataSeries[] = new Array<XyDataSeries>(SERIES);
100    const rendSeriesArray: FastLineRenderableSeries[] = new Array<FastLineRenderableSeries>(SERIES);
101    for (let i = 0; i < SERIES; i++) {
102        const dataSeries: XyDataSeries = new XyDataSeries(wasmContext);
103        const rendSeries: FastLineRenderableSeries = new FastLineRenderableSeries(wasmContext, {
104            dataSeries,
105            strokeThickness: 2,
106            stroke: "auto",
107        });
108
109        dataSeriesArray[i] = dataSeries;
110        rendSeriesArray[i] = rendSeries;
111
112        sciChartSurface.renderableSeries.add(rendSeries);
113    }
114
115    // Add some interactivity modifiers
116    sciChartSurface.chartModifiers.add(
117        new ZoomExtentsModifier(),
118        new ZoomPanModifier({ enableZoom: true }),
119        new MouseWheelZoomModifier()
120    );
121
122    // Buttons for chart
123    const loadPoints = () => {
124        const newTimeSpans: TTimeSpan[] = [];
125
126        // Start counting Points generation time
127        const generateTimestamp = Date.now();
128
129        const xValuesArray: number[][] = new Array<number[]>(SERIES);
130        const yValuesArray: number[][] = new Array<number[]>(SERIES);
131        for (let i = 0; i < SERIES; i++) {
132            // Allocate data arrays
133            xValuesArray[i] = new Array<number>(POINTS);
134            yValuesArray[i] = new Array<number>(POINTS);
135
136            // Clear data, if any
137            dataSeriesArray[i].clear();
138
139            // Generate points
140            let prevYValue = 0;
141            for (let j = 0; j < POINTS; j++) {
142                const curYValue = Math.random() * 10 - 5;
143
144                xValuesArray[i][j] = j;
145                yValuesArray[i][j] = prevYValue + curYValue;
146
147                prevYValue += curYValue;
148            }
149        }
150
151        // Add the first time span: Generating 500 series x 500 points
152        newTimeSpans.push({
153            title: "Generate Data Points",
154            durationMs: Date.now() - generateTimestamp,
155        });
156
157        // Start counting batch append time
158        const appendTimestamp = Date.now();
159        for (let i = 0; i < SERIES; i++) {
160            dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
161        }
162
163        // Add the second time span: Generation of data point
164        newTimeSpans.push({
165            title: "Append Data Points",
166            durationMs: Date.now() - appendTimestamp,
167        });
168
169        // Subscribe to sciChartSurface.rendered event,
170        // and calculate time duration between the append and
171        // the first frame after it
172        const firstFrameTimestamp = Date.now();
173        let frameIndex: number = 0;
174        let nextFramesTimestamp: number;
175        const handler = () => {
176            if (frameIndex === 0) {
177                // Add the third time span: Render the first frame
178                newTimeSpans.push({
179                    title: "Render the frame",
180                    durationMs: Date.now() - firstFrameTimestamp,
181                });
182                nextFramesTimestamp = Date.now();
183            } else {
184                // Unsubscribe from sciChartSurface.rendered
185                updateTimeSpans(newTimeSpans);
186                sciChartSurface.rendered.unsubscribe(handler);
187
188                // Zoom extents at the end of performance measurement
189                // sciChartSurface.zoomExtents();
190            }
191            setTimeout(sciChartSurface.invalidateElement, 0);
192            // Increment frame index
193            frameIndex++;
194        };
195        sciChartSurface.rendered.subscribe(handler);
196    };
197
198    let timerId: NodeJS.Timeout;
199    const startUpdate = () => {
200        timerId = setInterval(loadPoints, 200);
201    };
202
203    const stopUpdate = () => {
204        clearInterval(timerId);
205    };
206
207    const reloadOnce = () => {
208        loadPoints();
209    };
210
211    return { wasmContext, sciChartSurface, controls: { startUpdate, stopUpdate, reloadOnce } };
212};
213

Load 500 Series x 500 Points Performance Demo - React

Overview

This example demonstrates how to integrate SciChart.js into a React application to efficiently render and update a high-performance chart featuring 500 series with 500 data points each, totaling 250k points. The demo highlights real-time performance measurement and dynamic data reloading, making it suitable for applications requiring sophisticated visualizations with rapid updates.

Technical Implementation

The chart is initialized using the <SciChartReact/> component, which leverages React hooks such as useRef and useState for managing component state and accessing chart controls. The core chart setup is performed via an asynchronous function that uses SciChartSurface.create() to instantiate the WebGL accelerated chart. Data generation for each series is optimized by pre-allocating arrays and appending batches of points efficiently via dataSeries.appendRange(), ensuring minimal rendering delay. Developers looking for detailed guidance on React component creation with SciChart.js can refer to the Creating a SciChart React Component from the Ground Up documentation.

Features and Capabilities

The demo supports real-time data updates with controls to start, pause, and reload data at a regular interval (every 200 milliseconds). Advanced event handling is implemented by subscribing to the chart’s rendered events, which captures performance metrics such as data generation, data appending, and frame rendering times. With WebGL rendering at its core, the chart maintains high responsiveness even under heavy data loads. The integration of Material UI components for control elements also demonstrates how to build a polished user interface alongside powerful charting capabilities, as seen in React Charts with SciChart.js: Introducing “SciChart React”.

Integration and Best Practices

This implementation highlights key best practices for integrating SciChart.js into a React framework. It effectively uses React’s lifecycle management and hooks to initialize the chart, manage real-time updates, and ensure proper cleanup of chart resources upon component deletion. The use of useRef facilitates direct access to chart controls, enabling dynamic data reloading and update management—a pattern supported by React Charts with SciChart.js: Introducing “SciChart React”. Additionally, the demo applies performance optimization techniques such as pre-creating FastLineRenderableSeries and batch appending of large data sets, further aligning with the strategies discussed in Performance Tips & Tricks.

react Chart Examples & Demos

Realtime React Chart Performance Demo

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

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 React 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 React audio spectrum analyzer example from SciChart. This real-time audio visualizer demo uses a Fourier Transform.