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 });
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};
160Angular 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.