Box
Map

JavaScript/jQuery Chart - animation

Specifies animation properties.

Type:

Object

|

Boolean

The UI component animates its elements at the beginning of its lifetime and when the data source changes.

NOTE
If multiple charts on the page do not fit in the window, the animation may not work smoothly. Disable the animation or adjust the markup to fit the charts.
index.js
  • $(function() {
  • $("#chartContainer").dxChart({
  • // ...
  • animation: {
  • easing: "linear",
  • duration: 500,
  • maxPointCountSupported: 100
  • }
  • });
  • });

duration

Specifies how long the animation runs in milliseconds.

Type:

Number

Default Value: 1000

easing

Specifies the easing function of the animation.

Default Value: 'easeOutCubic'

Easing functions specify how the speed of the animation changes over time. The following easing functions are available.

  • easeOutCubic
    The animation starts fast and slows down gradually towards the end.
  • linear
    The animation progresses at a constant pace.

enabled

Enables the animation in the UI component.

Type:

Boolean

Default Value: true

maxPointCountSupported

Specifies how many series points the UI component should have before the animation will be disabled.

Type:

Number

Default Value: 300

If the number of series points in your chart increases over time, animating them may affect UI component performance. In this case, use the maxPointCountSupported property to specify a limit for the number of points. When this limit is exceeded, the animation will be disabled.