DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.


Specifies animation options.



To make your gauge "live", enable animation for it by setting the enabled option of the animation object to true. In this instance, the gauge bars will appear in motion. In addition, within the animation object you can set an appropriate easing mode using the easing option, and specify how long the animation should run using the duration option.


Determines how long animation runs.



Default Value: 1000

When animation is enabled for a gauge, you can specify how long the animation must run. To do this, set the animation.duration option to a numeric value in milliseconds. The bigger the value, the slower the animation.


Specifies the animation easing mode.



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 - quickly at the beginning and slowly at the end of the animation process.
  • linear
    The animation progresses at a constant pace.

Use the VizAnimationEasing enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: EaseOutCubic and Linear.


Indicates whether or not animation is enabled.



Default Value: true

When this option is set to true, gauge indicators move smoothly to the specified values.