Accepted answer

I looked up the API documentation (see and found something that may be useful for you.

Try adding verticalAlign: bottom to your stackLabels attribute. This will push your label to the inside bottom of your columns. If you wish, you can also add a value to y to move them directly under the column.

I'm curious why you're choosing to display your columns this way, as this presentation usually indicates negative value.

I hope this is helpful for you!

stackLabels: {
    enabled: true,
    style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    // verticalAlign puts the stack labels at the bottom
    verticalAlign: 'bottom',
    // the y value moves the label outside the stack; 
    // note that "15" or higher in your fiddle will push it off the chart altogether
    y: 12

enter image description here


If you wish to have the labels still appear at the 0 mark for the axis you can either:

  1. Pad the axis so that there is space in the plot area for the labels to be visible (JSFiddle):

    yAxis: {
        min: -10, // Now there is space in the plot area for the labels to show
        // ...
  2. Allow the stack labels to show outside the plot area by setting the crop value (JSFiddle):

    yAxis: {
        stackLabels: {
            crop: false, // Now the labels ignore being outside the plot area
            // ...

If you want them to appear at the top of the columns I suggest the verticalAlign and y approach detailed by @brightmatrix.

Related Query

More Query from same tag