Configuration animation

Specifies animation options.

Type: Object|Boolean

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

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.
Show Example:
AngularJS
Knockout
jQuery

In this example, you can spot the difference between the "ease-out cubic" and "linear" animation algorithms. To change the applied algorithm, use the select box under the widget.

<div ng-controller="chartController">
    <div id="chartContainer" dx-chart="chartOptions"></div>
    <div class="inline" style="text-align:center">
        <div>animation | easing:&nbsp;</div>
        <div id="selectBoxContainer" dx-select-box="selectBoxOptions"></div>
    </div>
</div>
var createData = function () {
    var data = [];
    var max = 10;
    for (var i = 0; i < max; i++) {
        data.push({ arg: i, val: Math.random() * 10 });
    };
    return data;
};

angular
    .module('myApp', ['dx'])
    .controller('chartController', function ($scope) {
        $scope.chartOptions = {
            dataSource: createData(),
            series: {},
            animation: {
                easing: 'easeOutCubic',
                duration: 2000
            }
        };
        $scope.selectBoxOptions = {
            items: ['easeOutCubic', 'linear'],
            value: 'easeOutCubic',
            onValueChanged: function (e) {
                var chart = $("#chartContainer").dxChart('instance');
                chart.option({
                    dataSource: createData(),
                    animation: { easing: e.value }
                });
            }
        }
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});
#chartContainer {
    height: 350px;
    max-width: 800px;
    margin: 0 auto;
}

#selectBoxContainer {
    height: 35px;
    max-width: 200px;
    margin-top: 5px;
    vertical-align: middle;
}

.inline > div {
    display: inline-block;
}

In this example, you can spot the difference between the "ease-out cubic" and "linear" animation algorithms. To change the applied algorithm, use the select box under the widget.

<div id="chartContainer" data-bind="dxChart: chartOptions"></div>
<div class="inline" style="text-align:center">
    <div>animation | easing:&nbsp;</div>
    <div id="selectBoxContainer" data-bind="dxSelectBox: selectBoxOptions"></div>
</div>
var createData = function () {
    var data = [];
    var max = 10;
    for (var i = 0; i < max; i++) {
        data.push({ arg: i, val: Math.random() * 10 });
    };
    return data;
};

var viewModel = {
    chartOptions: {
        dataSource: createData(),
        series: {},
        animation: {
            easing: 'easeOutCubic',
            duration: 2000
        }
    },
    selectBoxOptions: {
        items: ['easeOutCubic', 'linear'],
        value: 'easeOutCubic',
        onValueChanged: function (e) {
            var chart = $("#chartContainer").dxChart('instance');
            chart.option({
                dataSource: createData(),
                animation: { easing: e.value }
            });
        }
    }
};

ko.applyBindings(viewModel);
#chartContainer {
    height: 350px;
    max-width: 800px;
    margin: 0 auto;
}

#selectBoxContainer {
    height: 35px;
    max-width: 200px;
    margin-top: 5px;
    vertical-align: middle;
}

.inline > div {
    display: inline-block;
}

In this example, you can spot the difference between the "ease-out cubic" and "linear" animation algorithms. To change the applied algorithm, use the select box under the widget.

<div id="chartContainer"></div>
<div class="inline" style="text-align:center">
    <div>animation | easing:&nbsp;</div>
    <div id="selectBoxContainer"></div>
</div>
var createData = function () {
    var data = [];
    var max = 10;
    for (var i = 0; i < max; i++) {
        data.push({ arg: i, val: Math.random() * 10 });
    };
    return data;
};

$(function () {
    var chart = $("#chartContainer").dxChart({
        dataSource: createData(),
        series: {},
        animation: {
            easing: 'easeOutCubic',
            duration: 2000
        }
    }).dxChart('instance');
	
    $("#selectBoxContainer").dxSelectBox({
        items: ['easeOutCubic', 'linear'],
        value: 'easeOutCubic',
        onValueChanged: function (e) {
            chart.option({
                dataSource: createData(),
                animation: { easing: e.value }
            });
        }
    });
});
#chartContainer {
    height: 350px;
    max-width: 800px;
    margin: 0 auto;
}

#selectBoxContainer {
    height: 35px;
    max-width: 200px;
    margin-top: 5px;
    vertical-align: middle;
}

.inline > div {
    display: inline-block;
}

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.