CODEWITHSUNDEEP
highcharts
Jason Butera
Jason Butera

Reputation: 2440

Always display data labels above columns in HighCharts

How can I set the HighCharts options to ensure that column graphs are always rendered where the data label is always on top of the column? Attached is an example where one of my labels is forced below.

I've tried many combination in dataLabels with no luck:

    plotOptions: {
        column: {
            dataLabels: {
                enabled: true
            }
        }
    }

JSFiddle: Here

HighCharts Example

Upvotes: 27

Views: 36611

Answers (5)

Bruno Medeiros
Bruno Medeiros

Reputation: 2389

This seems to be easier:

dataLabels: {
    enabled: true,
    inside: false,
    ...
}

Upvotes: 3

yishaiz
yishaiz

Reputation: 2583

The crop&overflow/maxPadding options didn't work for me, this is what did the job for me to align it properly:

plotOptions: {
    column: {
        dataLabels: {
            enabled: true,
            y: -20,
            verticalAlign: 'top'
        }
     }
}

Upvotes: 3

Paweł Fus
Paweł Fus

Reputation: 45079

You need to disable crop and overflow, see: http://jsfiddle.net/NKXRk/4/

    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none'
            }
        }
    },

Upvotes: 47

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can also increase maxPadding parameter http://jsfiddle.net/NKXRk/3/

maxPadding:0.1

Upvotes: 3

kingkode
kingkode

Reputation: 2220

Set the data labels in your series call:

series:[{
name:"Odometer",
data:[{"y":94.98},{"y":182.96},{"y":160.97},{"y":18.00},{"y":117.97},{"y":6.00},{"y":127.97}],
dataLabels: {
            enabled: true,
            color: '#000000',
            backgroundColor: '#FFFFFF',
            borderWidth: '1',
            align: 'center',
            x: 0,
            y: 0,
            rotation: 0,
}

}]

http://jsfiddle.net/NKXRk/1/

Then if your labels still overlap the columns a bit (column 2 in fiddle above), set your yAxis max a bit higher:

yAxis:{ max: 250 },

http://jsfiddle.net/NKXRk/2/

Upvotes: 2

Related Questions