Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Always display data labels above columns in HighCharts

Tags:

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

like image 397
Jason Butera Avatar asked Jul 18 '14 19:07

Jason Butera


People also ask

How do you get data labels above columns?

Right-click the data series or data label to display more data for, and then click Format Data Labels. Click Label Options and under Label Contains, pick the options you want.


2 Answers

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

    plotOptions: {         column: {             dataLabels: {                 enabled: true,                 crop: false,                 overflow: 'none'             }         }     }, 
like image 55
Paweł Fus Avatar answered Sep 18 '22 19:09

Paweł Fus


This seems to be easier:

dataLabels: {
    enabled: true,
    inside: false,
    ...
}
like image 42
BrunoJCM Avatar answered Sep 17 '22 19:09

BrunoJCM