Vue CircularGauge - animation

Specifies animation properties.

Selector: DxAnimation
Type: viz/gauges/base_gauge:BaseGaugeAnimation

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

jQuery
index.js
$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        // ...
        animation: {
            easing: "linear",
            duration: 500
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-circular-gauge ... >
    <dxo-animation
        easing="linear"
        [duration]="500">
    </dxo-animation>
</dx-circular-gauge>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxCircularGaugeModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxCircularGaugeModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxCircularGauge ... >
        <DxAnimation
            easing="linear"
            :duration="500"
        />
    </DxCircularGauge>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxCircularGauge, {
    DxAnimation
} from 'devextreme-vue/circular-gauge';

export default {
    components: {
        DxCircularGauge,
        DxAnimation
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import CircularGauge, {
    Animation 
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge ... >
                <Animation
                    easing="linear"
                    duration={500}
                />
            </CircularGauge>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    @* ... *@
    .Animation(a => a
        .Easing(VizAnimationEasing.Linear)
        .Duration(500)
    )
)

duration

Determines how long animation runs.

Type:

Number

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 property to a numeric value in milliseconds. The bigger the value, the slower the animation.

easing

Specifies the animation easing mode.

Type:

AnimationEaseMode

Default Value: 'easeOutCubic'

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.

enabled

Indicates whether or not animation is enabled.

Type:

Boolean

Default Value: true

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