There are two types of animations in Highcharts: initial and update animations. An initial animation is the animation that happens when the series data is ready and the chart is displayed. An update animation occurs after the initial animation, 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 Highcharts animations use jQuery implementation. The animation property can be a Boolean value or a set of options. For Boolean values, it is true. Highcharts can use jQuery for swing animation. These are the options:
duration: This is the time, in milliseconds, to complete the animation.easing: This is the type of animation jQuery provides. The variety of animations can be extended by importing the jQuery UI plugin. A good reference can be found at http://plugindetector.com/demo/easing-jquery-ui/.
Here, we continue the example from the previous section. We will apply the animation settings to plotOptions.column and plotOptions.line, as follows:
plotOptions: {
column: {
... ,
animation: {
duration: 2000,
easing: 'swing'
}
},
line: {
.... ,
animation: {
duration: 3000,
easing: 'linear'
}
}
},The animations are tuned into at a much slower pace, so we can see the difference between linear and swing animations. The line series appears at a linear speed along the x axis, whereas the column series expands upwards at a linear speed and then decelerates sharply when approaching the end of the display. The following is a screenshot showing an ongoing linear animation:
