animation

Specifies animation options.

Type: Object|Boolean

To make your chart "live", enable animation for it. To do this, set the enabled option of the animation object to true. In this instance, the chart series will appear in motion. The animation object provides more options to set up chart animation. Refer to their description for details.

Show Example:
jQuery

In the example below, the animation's duration option is altered to 2000 milliseconds and the type of easing is set to linear.


                                    

                                    

duration

Determines how long the animation runs.

Type: Number
Default Value: 1000

When animation is enabled for a chart, you can specify the required duration. To do this, set the duration option to a numeric value in milliseconds. The higher the value, the slower the animation.

Show Example:
jQuery

In the example below, the animation's duration option is altered to 2000 milliseconds.


                                    

                                    

easing

Specifies the animation easing mode.

Type: String
Default Value: 'easeOutCubic'
Accepted Values: 'easeOutCubic' | 'linear'

The animation easing mode specifies the speed at which the animation progresses at different points within the animation. The following values are available.

  • easeOutCubic
    The animation progresses according to the Ease-out cubic interpolation function - fast at the beginning and slow at the end of the animation process.
  • linear
    The animation progresses at a constant pace.
Show Example:
jQuery

In the following example, you can see the difference between the 'ease-out cubic' and 'linear' algorithms of performing animation. To change the animation mode, choose the corresponding value from the drop-down list in the bottom of the example.


                                    

                                    

enabled

Indicates whether or not to enable animation in the widget.

Type: Boolean
Default Value: true

Show Example:
jQuery

In this example, you can enable/disable animation using the check box at the bottom.


                                    

                                    

maxPointCountSupported

Specifies the maximum series point count in the chart that the animation supports.

Type: Number
Default Value: 300

When there is a very large number of series points, animation reduces the chart's performance. So, it is better to set an optimal number for the chart to disable animation when the point count exceeds this number. To set this number, use the animation's maxPointCountSupported option.