CODEWITHSUNDEEP
highcharts
Capt. Rochefort
Capt. Rochefort

Reputation: 726

HighCharts DataLabels Overlap

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]
    }]
});

});

Upvotes: 1

Views: 4876

Answers (1)

Justin Bicknell
Justin Bicknell

Reputation: 4798

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.

Upvotes: 1

Related Questions