JavaScript/jQuery Chart - animation
Specifies animation options.
The widget animates its elements at the beginning of its lifetime and when the data source changes.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... animation: { easing: "linear", duration: 500, maxPointCountSupported: 100 } }); });
Angular
<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
<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
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;
easing
Specifies the easing function of the animation.
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
.
maxPointCountSupported
Specifies how many series points the widget should have before the animation will be disabled.
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.