Labels above and below Highcharts chart

HTML

<script src="http://highcharts.com/js/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var test1 = [-29, -51, -10, 12, -14, 17, 13, -14, -21, 19, 55, 34];
var test2 = [0, 11, 10, 2, -16, 16, 31, 14, 21, 24, -10, -4];
var pointCounter = 0;

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        events: {
            load: function(){
                var series = this.series,
                    s1 = series[0].data,
                    s2 = series[1].data,
                    i=0, l=s1.length, higher;
                
                for(; i<l; i++) {
                    higher = s1[i].y > s2[i].y;
                    s1[i].dataLabel.translate(0, higher ? -10 : 30 );
                    s2[i].dataLabel.translate(0, !higher ? -10 : 30 );
                }
            }
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    },
    
    series: [{
        name: 'Test1',
        data: test1,
    },
    {
        name: 'Test2',
        data: test2,
    }
    ]
});