Highchart: why can I not set the duration in this case?
<p>Relevant code is here: <a href="http://jsfiddle.net/e0qxfLtt/5/" rel="nofollow">http://jsfiddle.net/e0qxfLtt/5/</a></p>

<pre><code>$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
    var buttonB =  document.getElementById('b');
    buttonB.disabled = true;
    if(index &lt; chartData.length){
        var x = index, // current time
        y = chartData[index];
        $('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
        setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
        setTimeout(function(){
            if(index === 1){
                $('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
            }
            $('#container1').highcharts().series[0].addPoint([x,y]);
                index++;  
            }, 1000);
    }
    setTimeout(function(){buttonB.disabled = false;}, 3000);

})
$(document).ready(function () {
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'line',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    series = this.series[0];
                },
            }
        },
        title: {
            text: '' 
        },
        xAxis: {
            title: {
                text: ''
            },
            gridLineWidth: 1,
            startOnTick: true,
            tickPixelInterval: 40,
            min:0,
            max:10
        },
        yAxis: {
            title: {
                text: ''
            },
            min:0,
            max:200
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                }
            },
            series: {
                animation: {
                    duration: 1000
                }
            }
        },
        tooltip: {
            formatter: function () {
                return Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        credits:{
            enabled:false
        },
        series: [{
            name: '',
            data: []
        }]
    });
    var chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    series = this.series[0];
                },
            }
        },
        title: {
            text: '' 
        },
        xAxis: {
            title: {
                text: ''
            },
            gridLineWidth: 1,
            startOnTick: true,
            tickPixelInterval: 80,
            categories: ['a', 'b'],
            min: 0,
            max: 1
        },
        yAxis: {
            title: {
                text: ''
            },
            min:0,
            max:200
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                }
            },
            series: {
                animation: {
                    duration: 2000
                }
            }
        },
        tooltip: {
            formatter: function () {
                return Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        credits:{
            enabled:false
        },
        series: [{
            name: '',
            data: []
        }]
    });
});
</code></pre>

<p>});</p>

<p>I would like the chart on the left to animate over a duration of 2 seconds, and used this code for the purpose:</p>

<pre><code>plotOptions: {
        series: {
            animation: {
                duration: 2000
            }
        }
    }
</code></pre>

<p>However, that chart seems to animate over an instant despite the setting.</p>

<p>Could it due to the setTimeout functions?
If so, is there any way around that?</p>