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 textColor: appTheme.TextColor
104 });
105 sciChartSurface.annotations.add(watermark);
106
107 // Add title annotation
108 sciChartSurface.annotations.add(
109 new TextAnnotation({
110 text: "Series Startup Animations in SciChart.js",
111 fontSize: 18,
112 textColor: appTheme.ForegroundColor,
113 x1: 0.5,
114 y1: 0,
115 opacity: 0.77,
116 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
117 xCoordinateMode: ECoordinateMode.Relative,
118 yCoordinateMode: ECoordinateMode.Relative,
119 })
120 );
121
122 // Loop forever and update animations
123 let animationState = 0;
124 const updateAnimation = () => {
125 let currentAnimation: SeriesAnimation;
126 switch (animationState) {
127 case 0:
128 currentAnimation = waveAnimation;
129 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Wave Animation"));
130 animationState++;
131 break;
132 case 1:
133 currentAnimation = sweepAnimation;
134 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Sweep Animation"));
135 animationState++;
136 break;
137 case 2:
138 currentAnimation = scaleAnimation;
139 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Scale Animation"));
140 animationState++;
141 break;
142 case 3:
143 currentAnimation = fadeAnimation;
144 sciChartSurface.addAnimation(typeWriterAnimation(watermark, "Fade Animation"));
145 animationState = 0;
146 break;
147 }
148 lineSeries.enqueueAnimation(currentAnimation);
149 bubbleSeries.enqueueAnimation(currentAnimation);
150 // Loop forever while SciChartSurface is not deleted (see React Component unmount)
151 if (!sciChartSurface.isDeleted) setTimeout(updateAnimation, 2000);
152 };
153
154 updateAnimation();
155
156 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
157 sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
158 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
159 return { wasmContext, sciChartSurface };
160};
161React 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.