html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

var chart;

anychart.onDocumentReady(function () {

    var dataSet = anychart.data.set([

        ['1986', 41, 36],

        ['1987', 37, 34],

        ['1988', 48, 47],

        ['1989', 41, 39],

        ['1990', 39, 36],

        ['1991', 34, 31],

    ]);

​

    var data1 = dataSet.mapAs({'x': 0, 'value': 1});

    var data2 = dataSet.mapAs({'x': 0, 'value': 2});

​

    chart = anychart.column();

    chart.column(data1);

    chart.column(data2);

    chart.title('Set the type of event to start/end the animation');

    chart.container('container');

    chart.draw();

});

​

function animation() {

    chart.animation(true);

​

    // Set event type to start the animation

    chart.listen('animationStart', function(e) {

        chart.getSeries(0).getPoint(0).selected(true);

    });

​

    // Set event type to finish the animation

    chart.listen('animationEnd', function(e) {

        chart.getSeries(0).getPoint(5).selected(true);

    });

}