Example shows an animated Angular Chart with smooth transitions. Chart animates differently based on type of the dataseries involved. For example, if the type is column / bar, it animates by rising the columns / bars from the x-axis where as in line dataseries, it animates by drawing from left to right.
/* app.component.ts */ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { chartOptions = { animationEnabled: true, theme: "dark2", exportEnabled: true, title: { text: "Developer Work Week" }, subtitles: [{ text: "Median hours/week" }], data: [{ type: "pie", //change type to column, line, area, doughnut, etc indexLabel: "{name}: {y}%", dataPoints: [ { name: "Overhead", y: 9.1 }, { name: "Problem Solving", y: 3.7 }, { name: "Debugging", y: 36.4 }, { name: "Writing Code", y: 30.7 }, { name: "Firefighting", y: 20.1 } ] }] } }
/* app.component.html */ <div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
Animation duration can be controlled by setting required duration to animationDurationproperty. There is a seamless transition in toolTip while mouse hovers from one dataPoint to another this effect can be managed by animationEnabled Property.