Question

http://jsfiddle.net/nUCBj/1/

How can I prevent the datalabels from overlapping? I have tried using the formatter option and positioning the dataLabel using CSS position/top/bottom, etc… The datalabels are required. I can’t just use the tooltip in it’s place 🙂

Thank you,

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                backgroundColor: 'rgba(255, 255, 255, 0.7)',
                borderWidth: 1,
                shadow: true,
                borderRadius: 1,
                useHTML: true,
                padding: 1
            }
        }
    },

    series: [{
                        name: 'test',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },{
            name: 'test2',
        data: [31, 80, 106.4, 22, 150, 17, 135.7, 14, 230, 181, 9, 54]
    }]
});

});

Answer 1

The data attribute in the series can be passed in as an array of objects instead of as an array of numbers. Each object can define it’s own dataLabels options (http://api.highcharts.com/highcharts#series.data). For the first series you can align the points to the left, and the second to the right so they do not overlap.