CODEWITHSUNDEEP
javascripthighcharts
hank
hank

Reputation: 9883

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?

Upvotes: 5

Views: 15788

Answers (4)

Pal
Pal

Reputation: 1

after enabling dataSorting highchart it is not showing data label properly in stacked column chart

reference image

Upvotes: 0

SteveP
SteveP

Reputation: 19103

One option is to move the position of the labels. e.g. this will move them inside the bars:

plotOptions: {
        column: {
            dataLabels: {
                y: 20,
                color:'white'
            }
        }
    },

http://jsfiddle.net/TBfLS/

An alternative is to manually set the max y value to make room for the label:

  yAxis: {
        max: 600,
        endOnTick: false
    },

http://jsfiddle.net/2AhVT/

Hopefully one of these options will help.

A third (and probably better) option was posted by Ivan Chau.

Upvotes: 0

Ivan Chau
Ivan Chau

Reputation: 1435

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'
            }

Upvotes: 16

Strikers
Strikers

Reputation: 4776

you can try max for yAxis,

calculate maximum value from you data and add some cushion say 100 to it and set it as max for yAxis

yAxis:{
                max: 600,
            },

updating your fiddle with max for yAxis at http://jsfiddle.net/J6WvR/3/

hope this will be of use for you

Upvotes: 1

Related Questions