Vue ChartsAnimation


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, which can be observed for different series types in this example:


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