Highcharts stacked column stackLabels do not show when axis is reversed - highcharts

Question

I'm having an issue where the stackLabels do not show on my yAxis when reversed is enabled.
See fiddle; https://jsfiddle.net/mattscotty/vhv8p77v/2/
$(function () {
var chart = new Highcharts.chart( {
chart: {
renderTo :'container',
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
exporting:{enabled:false},
credits:{enabled:false},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,
max:100,
reversed:true, //Removing reversed fixes stack labels issue
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions:{
column:{
stacking:'normal'
}
},
series: [{
name: 'Category I',
data: [
[Date.UTC(2014, 5, 14), 20],
[Date.UTC(2014, 5, 15), 30],
[Date.UTC(2014, 5, 16), 25],
[Date.UTC(2014, 5, 19), 10],
[Date.UTC(2014, 5, 20), 15]
]
}, {
name: 'Category II',
data: [
[Date.UTC(2014, 5, 14), 25],
//[Date.UTC(2014, 5, 15), 10],
[Date.UTC(2014, 5, 16), 35],
[Date.UTC(2014, 5, 19), 25],
[Date.UTC(2014, 5, 20), 5]
]
}, {
name: 'Category III',
data: [
[Date.UTC(2014, 5, 14), 10],
[Date.UTC(2014, 5, 15), 20],
[Date.UTC(2014, 5, 16), 35],
//[Date.UTC(2014, 5, 19), 25],
[Date.UTC(2014, 5, 20), 15]
]
}]
});
});
Remove 'reversed' from yAxis and you will see it works fine, does anyone have a work around or suggestion?
Thanks in advance.

Answer 1

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
}

Answer 2

If you wish to have the labels still appear at the 0 mark for the axis you can either:
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
// ...
}
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.