Animating charts

There are two types of animations in Highcharts—initial and update animations. Initial animation is the animation when series data is ready and the chart is displayed; update animation is after the initial animation and when the series data or any parts of the chart anatomy have been changed.

The initial animation configurations can be specified through plotOptions.series.animation or plotOptions.{series-type}.animation, whereas the update animation is configured via the chart.animation property.

All the Highcharts animations use jQuery implementation. The animation property can be a boolean value or a set of animation options. Highcharts uses jQuery swing animation. The following are the options:

• duration: The time, in milliseconds, to complete the animation.

• easing: The type of animation jQuery provided. The variety of animations can be extended by importing the jQuery UI plugin. A good source of reference can be found at .

Here, we continue the example from the previous...