All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
Box
Map
Vue
A newer version of this page is available. Switch to the current version.

jQuery Chart - animation

Specifies animation options.

Type:

Object

|

Boolean

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

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        // ...
        animation: {
            easing: "linear",
            duration: 500,
            maxPointCountSupported: 100
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
    <dxo-animation
        easing="linear"
        [duration]="500"
        [maxPointCountSupported]="100">
    </dxo-animation>
</dx-chart>
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 { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxChart ... >
        <DxAnimation
            easing="linear"
            :duration="500"
            :max-point-count-supported="100"
        />
    </DxChart>
</template>

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

import DxChart, {
    DxAnimation
} from 'devextreme-vue/chart';

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

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

import Chart, {
    Animation 
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Animation
                    easing="linear"
                    duration={500}
                    maxPointCountSupported={100}
                />
            </Chart>
        );
    }
}
export default App;

duration

Specifies how long the animation runs in milliseconds.

Type:

Number

Default Value: 1000

easing

Specifies the easing function of the animation.

Type:

String

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

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.

Use the VizAnimationEasing enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: EaseOutCubic and Linear.

enabled

Enables the animation in the widget.

Type:

Boolean

Default Value: true

maxPointCountSupported

Specifies how many series points the widget 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 widget performance. In this case, use the maxPointCountSupported option to specify a limit for the number of points. When this limit is exceeded, the animation will be disabled.