Animate overlapping series

author(s): Koos Zoon

HTML

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

JavaScript

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Z index changed after update'
        },
        plotOptions: {
            series: {
                groupPadding: 0.1,
                pointPadding: -0.2
            }
        },
        series: [ {
            data: [1300],
            color: 'rgba(13,35,58,0.9)',
            index: 0,
            zIndex: 80000
        },{
            data: [1500],
            color: 'rgba(47,126,216,0.9)',
            index: 1,
            zIndex: 80000
        }]
    });
        chart.series[0].update({
            dataLabels: {
                enabled: true
            }})
});