I am having problems with my stack labels. I have them rotated -90 degrees and I have set align to left and vertical align to bottom. But for some reason the label is aligned to the bottom of each column but not as I expected it to do. The center of the text label is align to the bottom, not the first letter of the label. Is there a way to accomplish what I want without manually calculating the y offset for each individual stack label? And if not, how would I best do that tiresome calculation?
See attached fiddle:
$(function () {
$('#container').highcharts({
chart: { type: 'column' },
title: { text: '' },
xAxis: { categories: [""] },
yAxis: [{
title: { text: '', style: { color: '#4572A7'} },
labels: {
formatter: function () { return Highcharts.numberFormat(this.value, 0) + " USD" },
style: { color: '#4572A7' }
},
stackLabels: {
enabled: true,
style: { fontSize: '1.5em', fontWeight: 'bold', color: 'black' },
formatter: function () { return this.stack; },
rotation: -90, x: -5,
verticalAlign: 'bottom',
align: 'left'
}}],
legend: { borderWidth: 1, shadow: false },
plotOptions: {
column: { stacking: 'normal' },
series: { shadow: false}
},
series: [{ data: [34, 34, 54, 12, 23], stack: 'Stack 1' }]
});
});
Cheers!
EDIT
This is a simplified version of what I actually have. In my real chart I have dynamic content so there are different texts in the stack labels and the columns have various heights. None of this I know beforehand and thus I need to, somehow, dynamically adjust the stack labels to the bottom (and to the left of) of the columns regardless of the length of the text in the actual label.
Thanks again!