Configuration animation

Specifies animation options for the dxChart widget.

Type: Object|Boolean

To make your chart "live", enable animation for it. To do this, set the enabled property of the animation object to true. In this instance, the chart's series will appear in motion from the value axis' minimum point. The animation object provides more properties to set up chart animation. Refer to their description for details.

Show Example:
jQuery

In the example below, the animation's duration option is altered to 2000 milliseconds and the type of easing is set to linear.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

$(function () {
    $("#chartContainer").dxChart({
        commonSeriesSettings: {
            argumentField: 'arg'
        },
        argumentAxis: {
            indentFromMin: 0.02,
            indentFromMax: 0.02
        },
        dataSource: dataSource,
        series: [{
            valueField: 'y1'
        }, {
            valueField: 'y2'
        }, {
            valueField: 'y3'
        }],
        legend: {
            visible: false
        },
        animation: {
            duration: 2000,
            easing: 'linear'
        }
    });
});

duration

Determines how long the animation runs.

Type: Number
Default Value: 1000

When animation is enabled for a chart, set the required duration. To do this, set the duration property to a numeric value in milliseconds. The higher the value, the slower the animation.

Show Example:
jQuery

In the example below, the animation's duration option is altered to 2000 milliseconds.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

$(function () {
    $("#chartContainer").dxChart({
        commonSeriesSettings: {
            argumentField: 'arg'
        },
        argumentAxis: {
            indentFromMin: 0.02,
            indentFromMax: 0.02
        },
        dataSource: dataSource,
        series: [{
            valueField: 'y1'
        }, {
            valueField: 'y2'
        }, {
            valueField: 'y3'
        }],
        legend: {
            visible: false
        },
        animation: {
            duration: 2000
        }
    });
});

easing

Specifies the animation easing function.

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

The animation easing function 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 - fast at the beginning and slow at the end of the animation process.
  • linear
    The animation progresses at a constant pace.
Show Example:
jQuery

In the following example, you can see the difference between the 'ease-out cubic' and 'linear' algorithms of performing animation. To change the animation mode, choose the corresponding value from the drop-down list in the bootom of the example.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    Animation Mode:
    <select id="dropdownListSelector">
        <option value="easeOutCubic">easeOutCubic</option>
        <option value="linear">linear</option>
    </select>
</div>
var dataSource = [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 }
];

$(function () {
    $('#chartContainer').dxChart({
        commonSeriesSettings: {
            argumentField: 'arg'
        },
        argumentAxis: {
            indentFromMin: 0.02,
            indentFromMax: 0.02
        },
        dataSource: dataSource,
        series: [{
            valueField: 'y1'
        }, {
            valueField: 'y2'
        }, {
            valueField: 'y3'
        }],
        legend: {
            visible: false
        },
        animation: {
            easing: 'easeOutCubic',
            duration: 1500
        }
    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            animation: { easing: this.value },
            dataSource: dataSource
        });
    });
});

enabled

Indicates whether or not to enable animation for the dxChart widget.

Type: Boolean
Default Value: true
Accepted Values: true|false

An animated chart appears in motion from the value axis' minimum point when the parent page refreshes.

Show Example:
jQuery

In this example, you can enable/disable animation using the check box at the bottom.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;max-width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="animationEnabledCheckbox" checked> Animation Enabled
</div>
var dataSource = [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

$(function () {
    $('#chartContainer').dxChart({
        commonSeriesSettings: {
            argumentField: 'arg'
        },
        argumentAxis: {
            indentFromMin: 0.02,
            indentFromMax: 0.02
        },
        dataSource: dataSource,
        series: [{
            valueField: 'y1'
        }, {
            valueField: 'y2'
        }, {
            valueField: 'y3'
        }],
        legend: {
            visible: false
        },
        animation: {
            enabled: true
        }
    });

    $('#animationEnabledCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            animation: { enabled: this.checked },
            dataSource: dataSource
        });
    });
});

maxPointCountSupported

Specifies the maximum series point count in the chart that the animation supports.

Type: Number
Default Value: 300

When there is a very large number of series points, animation reduces the chart's performance. So, it is better to set an optimal number for the chart, to disable animation when the point count exceeds this number. To set this number, use the animation's maxPointCountSupported property.