Vue Chart - animation
The UI component animates its elements at the beginning of its lifetime and when the data source changes.
- <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>
easing
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 property when the UI component 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 UI component should have before the animation will be disabled.
If you have technical questions, please create a support ticket in the DevExpress Support Center.