React Chart Data Animation
Demonstrates how to run Dataset Animations using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
theme.ts
1import {
2 SciChartSurface,
3 NumericAxis,
4 NumberRange,
5 EllipsePointMarker,
6 ScatterAnimation,
7 XyDataSeries,
8 PaletteFactory,
9 GradientParams,
10 Point,
11 FastLineRenderableSeries,
12 easing,
13} from "scichart";
14
15import { appTheme } from "../../../theme";
16
17export const drawExample = async (rootElement: string | HTMLDivElement) => {
18 // Create a SciChartSurface
19 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
20 theme: appTheme.SciChartJsTheme,
21 });
22
23 const length = 120;
24
25 sciChartSurface.xAxes.add(
26 new NumericAxis(wasmContext, {
27 visibleRange: new NumberRange(0, length),
28 growBy: new NumberRange(0.1, 0.1),
29 })
30 );
31 sciChartSurface.yAxes.add(
32 new NumericAxis(wasmContext, {
33 visibleRange: new NumberRange(0, length),
34 growBy: new NumberRange(0.1, 0.1),
35 })
36 );
37
38 let xValues = Array.from(Array(length).keys());
39 let yValues = Array.from({ length }, () => Math.random() * length);
40
41 // Create a scatter series with some initial data
42 const scatterSeries = new FastLineRenderableSeries(wasmContext, {
43 dataSeries: new XyDataSeries(wasmContext, {
44 xValues,
45 yValues,
46 }),
47 strokeThickness: 2,
48 pointMarker: new EllipsePointMarker(wasmContext, {
49 width: 11,
50 height: 11,
51 fill: appTheme.VividSkyBlue,
52 strokeThickness: 0,
53 }),
54 paletteProvider: PaletteFactory.createGradient(
55 wasmContext,
56 new GradientParams(new Point(0, 0), new Point(1, 1), [
57 { offset: 0, color: "#36B8E6" },
58 { offset: 0.2, color: "#5D8CC2" },
59 { offset: 0.4, color: "#8166A2" },
60 { offset: 0.6, color: "#AE418C" },
61 { offset: 1.0, color: "#CA5B79" },
62 ]),
63 { enableStroke: true, enablePointMarkers: true, strokeOpacity: 0.67 }
64 ),
65 });
66 sciChartSurface.renderableSeries.add(scatterSeries);
67
68 // create a temp series for passing animation values
69 const animationSeries = new XyDataSeries(wasmContext);
70 // register this so it is deleted along with the main surface
71 sciChartSurface.addDeletable(animationSeries);
72 // Update data using data animations
73 let timerId: NodeJS.Timeout;
74
75 const animateData = () => {
76 xValues = xValues.map((x) => x + ((Math.random() - 0.5) * length) / 5);
77 yValues = yValues.map((y) => y + ((Math.random() - 0.5) * length) / 5);
78 // Set the values on the temp series
79 animationSeries.clear();
80 animationSeries.appendRange(xValues, yValues);
81 scatterSeries.runAnimation(
82 new ScatterAnimation({
83 duration: 1000,
84 ease: easing.outQuad,
85 // Do not create a new DataSeries here or it will leak and eventually crash.
86 dataSeries: animationSeries,
87 })
88 );
89
90 timerId = setTimeout(animateData, 1200);
91 };
92 timerId = setTimeout(animateData, 1000);
93
94 const startUpdate = () => {
95 timerId = setTimeout(animateData, 1000);
96 };
97
98 const stopUpdate = () => {
99 clearTimeout(timerId);
100 };
101
102 return { wasmContext, sciChartSurface, controls: { startUpdate, stopUpdate } };
103};
104React Chart Data Animation
Overview
This example demonstrates a dynamic dataset animation using SciChart.js in a React environment. It showcases how to continuously update chart data in real-time and animate transitions in a high-performance WebGL canvas.
Technical Implementation
The core functionality is implemented in an external async function, which initializes a SciChart surface with numeric X and Y axes and a fast line series that mimics scatter data. Data is periodically updated using randomized adjustments to both the X and Y values, with animations controlled by the SciChart.js ScatterAnimation class. Developers can explore the details of dataset animations in the Dataset Animations documentation. As asynchronous initialization plays a key role, the code leverages async/await for efficient non-blocking setup, as discussed in Using async/await inside a React functional component.
Features and Capabilities
The example emphasizes real-time update capabilities with smooth and visually appealing transitions. It uses custom point markers and a gradient palette for enhanced visual output, while interactive controls allow starting and stopping of the animation update cycle. The design aligns with performance optimization practices, ensuring resource cleanup by leveraging the React component lifecycle via the onDelete callback in the <SciChartReact/> component. This approach helps maintain optimal performance for real-time chart animations, as detailed in the Performance Optimisation of JavaScript Applications & Charts guide.
Integration and Best Practices
Integration with React is achieved using the <SciChartReact/> component which ensures the chart is rendered as part of the React component hierarchy. The component accepts the async drawExample function via the initChart prop, allowing for clean initialization and proper resource management once the component unmounts. Lifecycle management is further enhanced by the onDelete callback, ensuring that any ongoing animations or data updates are properly halted, following best practices for React integration. This example demonstrates how to effectively combine realtime data streaming, asynchronous chart initialization, and interactive controls in a React application, showcasing a robust design for integrating third-party libraries like SciChart.js within modern React projects.
react Chart Examples & Demos
See Also: Animation API (4 Demos)
React Style Animation
Demonstrates how to run Style Transition Animations with JavaScript.
React Startup Animation
Demonstrates how to run Startup Animations with JavaScript.
React Generic Animation
Demonstrates how to run Generic Animation with JavaScript.
React Animated Bar Chart Example
Bring annual comparison data to life with the React Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.