Animations occurring at the point of initialization of charts can be disabled or customized. The customization requires modifying two properties: animation.duration
and animation.easing
. The duration
property accepts the number of milliseconds for the duration of the animation. The easing
property can have various values depending on the framework currently being used. For a standalone jQuery framework, the values can be either linear
or swing
. Using the jQuery UI framework adds a couple of more options for the easing
property to choose from.
In order to follow this example, you must include the jQuery UI framework to the page. You can also grab the standalone easing plugin from http://gsgd.co.uk/sandbox/jquery/easing/ and include it inside your <head>
tag.
We can now modify the series to have a modified animation:
plotOptions: { ... series: { animation: { duration: 1000, easing: 'easeOutBounce' } } }
The preceding code will modify the animation
property for all the series in the chart to have duration
set to 1000
milliseconds and easing to easeOutBounce
. Each series can have its own different animation by defining the animation property separately for each series as follows:
series: [{ ... animation: { duration: 500, easing: 'easeOutBounce' } }, { ... animation: { duration: 1500, easing: 'easeOutBounce' } }, { ... animation: { duration: 2500, easing: 'easeOutBounce' } }]
Different animation properties for different series can pair nicely with column and bar charts to produce visually appealing effects.