ElementStacks

by Ukjin Yang

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<button id="update">Update chart</button>

JavaScript

var chart;chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        animation: {
            duration: 0,
            complete: function(){
                chart.setDataLabelPosition = function(dataLabel){
                    dataLabel.attr('y', chart.plotHeight + 20)
                }
                
                $.each(chart.series, function(i, serie){
                    $.each(serie.data, function(j, point){
                        chart.setDataLabelPosition(point.dataLabel);
                    });
                });
            }
        }
    },
    xAxis: [{
        categories: ['2010', '2011'],
        labels: {
            y: 40
        }
    }],
    
    legend: {
        margin: 40
    },
    
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    },
    
    series: [{
        name: 'car',
        data: [29.9, 129.2]
    },{
        name: 'van',
        data: [71.5, 106.4]
    },{
        name: 'truck',
        data: [144.0, 176.0]
    }]
}, function(chart){
    
    chart.setDataLabelPosition = function(dataLabel){
        dataLabel.attr('y', chart.plotHeight + 20)
    }
    
    $.each(chart.series, function(i, serie){
        $.each(serie.data, function(j, point){
            chart.setDataLabelPosition(point.dataLabel);
        });
    });
});
i = 1;
$('#update').click(function() {
    chart.series[0].data[0].update(i++ % 2 ? 200 : 0);
});