How to Control the Animation of Kendo UI Charts?

Question

Is There Anyway to slow the initial speed of animation when kendo ui chart control loads ?

I am Using Panel Bar control and in that i am loading kendo ui pie chart. when i click item of panel bar, content is loaded using ajax request in to panel bar. In that content there is a Kendo ui chart control. i am not able to see the animation of chart properly.

Is there any way to slow down the animation of kendo ui chart ?

https://i.stack.imgur.com/wEJwc.png

Answer 1

The Chart does not provide means for controlling the initial animation duration. We'll correct this in future versions. Thank you for noticing.

We can make initial animations smoother by instantiating the charts with a slight delay.

var DELAY = 100,
    chartIndex = 0;

function createChart() {
    $("<div />", {
        id: "chart" + chartIndex++
    }).css({
        width: "100px",
        height: "100px",
        "float": "left"
    }).appendTo(document.body).kendoChart({
        legend: {
            visible: false
        },
        series: [
            {
            name: "Value A",
            data: [10, 15, 20, 30]}
        ],
        valueAxis: {
            labels: {
                visible: false
            }
        },
        categoryAxis: {
            labels: {
                visible: false
            }
        }
    });
}

$(document).ready(function() {
    for (var i = 0; i < 42; i++) {
        setTimeout(function() {
            createChart();
        }, i * DELAY);
    }
});

So, please try to bind the chart once your panel bar expanded completely.