Angular 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};
161Angular Startup Animation
Overview
This example demonstrates how to implement startup animations in SciChart.js using Angular. It sequentially animates chart series with four distinct effects—Wave, Sweep, Scale, and Fade—while a custom typewriter animation updates a watermark annotation to display the current animation effect. This approach enhances chart visual appeal and interactivity in Angular applications.
Technical Implementation
The chart is initialized by creating a SciChartSurface with numeric axes and two primary series: a bubble series and a spline line series. Animation objects (WaveAnimation, SweepAnimation, ScaleAnimation, and FadeAnimation) are defined and applied sequentially by enqueuing them on the series. A custom typewriter effect is implemented using GenericAnimation, which gradually updates the watermark text. This chaining of animations ensures smooth transitions, and developers can explore similar techniques through the Angular Startup Animation Demo and the Generic Animations documentation for deeper insights.
Features and Capabilities
The example provides real-time animation updates through a continuous loop that alternates the animation state every two seconds. It also illustrates built-in interactivity with chart modifiers such as ZoomPanModifier, ZoomExtentsModifier, and MouseWheelZoomModifier, which enhance user experience by providing intuitive zooming and panning controls.
Integration and Best Practices
For Angular developers, managing component lifecycle and cleanup is essential. Although the example centralizes chart initialization in a shared function, proper integration in an Angular component would involve disposing of the SciChartSurface during the component’s ngOnDestroy lifecycle hook to prevent memory leaks. Best practices for Angular integration and lifecycle management can be found in resources like Component Lifecycle Management in Angular: A Comprehensive Guide and the Getting Started with SciChart JS documentation. Performance optimizations are achieved by leveraging WebAssembly contexts and minimizing excessive DOM updates, ensuring smooth animation even in data-intensive scenarios.
angular Chart Examples & Demos
See Also: Animation API (4 Demos)
Angular Chart Data Animation
Demonstrates how to run Dataset Animations with JavaScript.
Angular Style Animation
Demonstrates how to run Style Transition Animations with JavaScript.
Angular Generic Animation
Demonstrates how to run Generic Animation with JavaScript.
Angular Animated Bar Chart Example
Bring annual comparison data to life with the Angular Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.