score:3

Accepted answer

I looked up the API documentation (see http://api.highcharts.com/highcharts#yAxis.stackLabels) 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

score:1

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