Vue ChartsAnimation
vue logo

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.

Data Updates

A data update animation is split into three sequential phases — remove, update then add. Start and stop the ticking updates below, and toggle the speed at which they occur.


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.

animation: {
    duration: 500,

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

API Reference