Highcharts hide overlapping data labels

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate from 2006 through 2008'
        },
        series: [{
            type: 'line',
            name: 'USD to EUR',
            data: [ 10, 10, 10, 10, 10, 10, 50],
            dataLabels: {
              enabled: true,
              color: 'blue',
              zIndex: 10
            }
        },
        {
            type: 'line',
            name: 'USD to EUR',
            data: [ 11, 11, 11, 11, 11, 11, 49],
            dataLabels: {
              enabled: true,
              color: 'red',
              zIndex: 10
            }
        }]
    }, function() {
    	var mySeriesIndex = 1;
        
        // For each point in the preferred series
        for(i = 0; i < this.series[mySeriesIndex].points.length; i++)
        	// Set a labelrank
            this.series[mySeriesIndex].points[i].labelrank = 0;
    });
});