Highcharts dataLabel overlap

Question

I have a highcharts stacked barchart that has a few values that are extremely low. This causes the two dataLabels to overlap, like this fiddle: http://jsfiddle.net/cerjps88/

What is the best means to ensure that the labels can't overlap?

Here's my highchart code:

function getCostStackedColumnChart(series) {

    function costFilterPluck(costCollection, propertyName) {
        return _.chain(costCollection)
                .filter(function (f){
                    return Math.abs(f.metric_mean_patient_cost) > 0 && Math.abs(f.metric_mean_patient_cost_rx) > 0
                })
                .pluck(propertyName)
                .take(10)
                .value();
    }

    function shapeCostData(costCollection) {

        return [
            {
                name: 'RxCost Per Prescription',
                color: '#1aadce',
                data: costFilterPluck(series, 'metric_mean_patient_cost_rx')
            },
            {
                name: 'Retail Price Per Prescription (2014)',
                color: '#00FFFF',
                data: costFilterPluck(series, 'metric_drug_price_rx')
            }
        ];
    }

    return {
        options: {
            chart: {
                type: 'column'
            },
            tooltip: {
                formatter: function () {
                    var format = d3.format(",.2f");
                    var chart = this.point.series.chart;
                    var index = chart.xAxis[0].categories.indexOf(this.x);
                    var series1 = this.point.series;
                    return '<b>' + this.x + '</b><br/>' +
                            series1.name + ': $' + format(this.y);
                }
            },
            showInLegend: true,
            plotOptions: {
                column: {
                    grouping: true,
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        allowOverlap: false,
                        format: '${y:,.2f}',
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
                        style: {
                            fontWeight: 'bold',
                            textShadow: '0 0 3px white'
                        },
                    }
                }
            }
        },
        xAxis: {
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            },
            categories: costFilterPluck(series, 'aedrug_label'),
            title: {text: 'Drug'}
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total Cost Per Prescription'
            }
        },
        tooltip: {
            shared: true
        },
        title: {
            text: drugGroupName + ' RxCost'
        },
        series: shapeCostData(series)
    };
}

Answer 1

The newest version of highcharts automatically hides overlapping labels. After upgrading the new version, the issue was resolved.