React Startup Animation
Demonstrates how to run Startup Animations using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.tsx
theme.ts
1import {
2 WaveAnimation,
3 SweepAnimation,
4 ScaleAnimation,
5 FadeAnimation,
6 TextAnnotation,
7 GenericAnimation,
8 SciChartSurface,
9 NumericAxis,
10 FastBubbleRenderableSeries,
11 EllipsePointMarker,
12 XyzDataSeries,
13 SplineLineRenderableSeries,
14 XyDataSeries,
15 ECoordinateMode,
16 EHorizontalAnchorPoint,
17 EVerticalAnchorPoint,
18 SeriesAnimation,
19 ZoomPanModifier,
20 ZoomExtentsModifier,
21 MouseWheelZoomModifier,
22} from "scichart";
23import { appTheme } from "../../../theme";
24
25// Four Series Animations are defined below. We apply these to the chart sequentially
26const waveAnimation = new WaveAnimation({ zeroLine: 0, pointDurationFraction: 0.5, duration: 1000, fadeEffect: true });
27const sweepAnimation = new SweepAnimation({ duration: 1000 });
28const scaleAnimation = new ScaleAnimation({ duration: 1000, zeroLine: 0 });
29const fadeAnimation = new FadeAnimation({ duration: 1000 });
30
31// generic animation to create typewritter effect on the watermark
32const typeWriterAnimation = (textAnnotation: TextAnnotation, finalText: string) =>
33 new GenericAnimation<string>({
34 from: "",
35 to: finalText,
36 onAnimate: (from: string, to: string, progress: number) => {
37 const length = Math.floor(to.length * progress);
38 textAnnotation.text = to.substring(0, length);
39 },
40 duration: 1000,
41 setInitialValueImmediately: true,
42 });
43
44// Setup the example & chart
45
46export const drawExample = async (rootElement: string | HTMLDivElement) => {
47 // Create a SciChartSurface with theme
48 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
49 theme: appTheme.SciChartJsTheme,
50 });
51 // Create X and Y Axis
52 sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
53 sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
54
55 // Create some data
56 const xValues = [];
57 const yValues = [];
58 const zValues = [];
59 let prevYValue = 0;
60 for (let i = 0; i < 20; i++) {
61 const curYValue = Math.sin(i) * 10 + 5;
62 const size = Math.sin(i) * 60 + 3;
63
64 xValues.push(i);
65 yValues.push(prevYValue + curYValue);
66 zValues.push(size);
67
68 prevYValue += curYValue;
69 }
70
71 // Create a Bubble Series
72 const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
73 pointMarker: new EllipsePointMarker(wasmContext, {
74 width: 64,
75 height: 64,
76 fill: appTheme.VividSkyBlue + "77",
77 strokeThickness: 0,
78 }),
79 dataSeries: new XyzDataSeries(wasmContext, { xValues, yValues, zValues }),
80 });
81 sciChartSurface.renderableSeries.add(bubbleSeries);
82
83 // Create a Line Series
84 const lineSeries = new SplineLineRenderableSeries(wasmContext, {
85 stroke: appTheme.VividSkyBlue,
86 strokeThickness: 2,
87 opacity: 0.7,
88 dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
89 });
90 sciChartSurface.renderableSeries.add(lineSeries);
91
92 // Add watermark annotation
93 const watermark = new TextAnnotation({
94 text: "",
95 x1: 0.5,
96 y1: 0.5,
97 fontSize: 42,
98 opacity: 0.5,
99 xCoordinateMode: ECoordinateMode.Relative,
100 yCoordinateMode: ECoordinateMode.Relative,
101 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
102 verticalAnchorPoint: EVerticalAnchorPoint.Center,
103 });
104 sciChartSurface.annotations.add(watermark);
105
106 // Add title annotation
107 sciChartSurface.annotations.add(
108 new TextAnnotation({
109 text: "Series Startup Animations in SciChart.js",
110 fontSize: 18,
111 textColor: appTheme.ForegroundColor,
112 x1: 0.5,
113 y1: 0,
114 opacity: 0.77,
115 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
116 xCoordinateMode: ECoordinateMode.Relative,
117 yCoordinateMode: ECoordinateMode.Relative,
118 })
119 );
120
121 // Loop forever and update animations
122 let animationState = 0;
123 const updateAnimation = () => {
124 let currentAnimation: SeriesAnimation;
125 switch (animationState) {
126 case 0:
127 currentAnimation = waveAnimation;
128 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Wave Animation"));
129 animationState++;
130 break;
131 case 1:
132 currentAnimation = sweepAnimation;
133 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Sweep Animation"));
134 animationState++;
135 break;
136 case 2:
137 currentAnimation = scaleAnimation;
138 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Scale Animation"));
139 animationState++;
140 break;
141 case 3:
142 currentAnimation = fadeAnimation;
143 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Fade Animation"));
144 animationState = 0;
145 break;
146 }
147 lineSeries.enqueueAnimation(currentAnimation);
148 bubbleSeries.enqueueAnimation(currentAnimation);
149 // Loop forever while SciChartSurface is not deleted (see React Component unmount)
150 if (!sciChartSurface.isDeleted) setTimeout(updateAnimation, 2000);
151 };
152
153 updateAnimation();
154
155 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
156 sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
157 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
158 return { wasmContext, sciChartSurface };
159};
160React Startup Animation
Overview
This example demonstrates an interactive Chart Startup Animation built with SciChart.js in a React application. The implementation sequentially animates chart series using Wave, Sweep, Scale, and Fade animations, while a dynamic typewriter effect updates a watermark annotation. The example showcases both bubble and spline line renderable series, along with interactive zoom and pan modifiers.
Technical Implementation
The chart is initialized in a React component using the <SciChartReact/> element from the SciChart.js React integration, as described in the SciChart React integration guide. The primary animation logic is encapsulated in a function that alternates between different animations by enqueuing them on the renderable series. A custom typewriter effect is implemented through a GenericAnimation, following guidelines found in the Generic Animations documentation please also see Series Startup Animations. Furthermore, the example adds chart modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier to enhance interactivity; more details can be found in the Zooming and Panning Tutorial.
Features and Capabilities
The example illustrates several advanced features including real-time animation chaining and dynamic data binding. The series startup animations provide a visually appealing entrance effect, while the typewriter-based watermark animation adds a layer of customizability. Additionally, interactive controls are implemented through built-in chart modifiers, demonstrating how to provide an enhanced user experience with minimal performance overhead.
Integration and Best Practices
Integrating SciChart.js with React is streamlined using the <SciChartReact/> component, ensuring that the chart lifecycle is properly managed within a React application. Developers are encouraged to follow the best practices for lifecycle management, such as clean-up on component unmount, as detailed in the Reusable React Component tutorial. The example not only provides performance optimization and interactive features but also serves as a guide for integrating complex animations and custom theming in React-based chart applications.
react Chart Examples & Demos
See Also: Animation API (4 Demos)
React Chart Data Animation
Demonstrates how to run Dataset Animations with JavaScript.
React Style Animation
Demonstrates how to run Style Transition 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.