Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts data labels overlapping columns

I have a problem with data labels overlapping columns in my chart.

$('#container').highcharts({
        chart: {
            type: 'column'
        },

        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169], 
                  [Date.UTC(2013, 4, 1, 0, 0, 0), 176], 
                  [Date.UTC(2013, 5, 1, 0, 0, 0), 470], 
                  [Date.UTC(2013, 6, 1, 0, 0, 0), 346], 
                  [Date.UTC(2013, 7, 1, 0, 0, 0), 252], 
                  [Date.UTC(2013, 8, 1, 0, 0, 0), 138]],
            dataLabels: {
                enabled: true
            }
        }]
    });
});

You can see an exmaple here: http://jsfiddle.net/J6WvR/1/

My chart should have fixed height and I don't understand why the largest column height cannot be calculated to fit its data label. How can I fix this?

like image 932
hank Avatar asked Oct 16 '13 07:10

hank


1 Answers

According to official API documentation: overflow property

To display data labels outside the plot area, set crop to false and overflow to "none".

            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none'
            }
like image 152
Ivan Chau Avatar answered Sep 18 '22 14:09

Ivan Chau