---
product: "AG Charts"
title: "Animation"
description: "Switch between the different series types below to see their initial load animations. Toggling items in the legend will also animate the series in and out."
enterprise: true
framework: angular
version: "14.2.0"
related:
    - title: "Accessibility"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/accessibility/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/localisation/"
    - title: "Series Highlighting"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/series-highlighting/"
    - title: "Tooltips"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/tooltips/"
    - title: "Touch"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/touch/"
    - title: "Context Menu"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/context-menu/"
    - title: "Crosshairs & Band Highlight"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/axes-crosshairs/"
    - title: "Data Selection"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/selection/"
    - title: "Flash On Update"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/flash-on-update/"
    - title: "Navigator"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/navigator/"
    - title: "Range Controls"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/range-controls/"
    - title: "Scrollbar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/scrollbar/"
    - title: "Synchronization"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/sync/"
    - title: "Zoom"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/zoom/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Animation

## Initial Load

Switch between the different series types below to see their initial load animations. Toggling items in the legend will also animate the series in and out.

#### Initial Load

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Initial Load](https://www.ag-grid.com/charts/archive/14.2.0/angular/animation/examples/initial-load/)

## Data Updates

A data update animation is split into three sequential phases — remove, update then add, which can be observed for different series types in this example:

#### Line Series Data Updates

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Line Series Data Updates](https://www.ag-grid.com/charts/archive/14.2.0/angular/animation/examples/data-updates/)

## Duration

You can use the `duration` option to specify the length of all animations in milliseconds.

For an initial load, this is simply the duration of the whole animation.

For a data update, the duration is the total time of all three animation phases together — remove, update then add.

```js
{
    animation: {
        duration: 500,
    },
}
```

In this example, click a duration then change the series type to see the initial load animation.

#### Duration

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Duration](https://www.ag-grid.com/charts/archive/14.2.0/angular/animation/examples/duration/)

To highlight data changes with a flash effect, see [Flash On Update](https://www.ag-grid.com/charts/archive/14.2.0/angular/flash-on-update/).

## API Reference

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enabled | boolean |  | Set to `true` to enable the animation module. Defaults to `false` when `flashOnUpdate.enabled` is `true`. |
| duration | DurationMs |  | The total duration of the animation on initial load and updates. |