Show stackLabels at both top and bottom in highchart - highcharts

Question

I am using Stacked and grouped column where I needed to show stack name on the bottom and stack total on top of the stack.
JSFiddle link: Stacked and grouped
Found another way to do it but having problem with stack labels.
`https://jsfiddle.net/shak_imran/k58whtbx/5/`

Answer 1

Your attempt breaks the stackLabel calculations logic - implementing this type of solution will require some changes in the core code.
I think that a better solution will be rendering those labels under columns. Here is a guideline how to achieve it:
Demo: https://jsfiddle.net/BlackLabel/akoeyq5m/
events: {
render() {
let chart = this,
stackMale = chart.yAxis[0].stacks['column,male,,'],
stackFemale = chart.yAxis[0].stacks['column,female,,'];
// Male label
for (let i in stackMale) {
let x = stackMale[i].label.x + chart.plotLeft,
y = chart.plotHeight + chart.plotTop,
labelBBox;
if (stackMale[i].customLabel) {
stackMale[i].customLabel.destroy();
}
stackMale[i].customLabel = chart.renderer.text('Male', x, y)
.add();
labelBBox = stackMale[i].customLabel.getBBox();
stackMale[i].customLabel.translate(-labelBBox.width / 2, labelBBox.height)
}
// Female label
for (let i in stackFemale) {
let x = stackFemale[i].label.x + chart.plotLeft,
y = chart.plotHeight + chart.plotTop,
labelBBox;
if (stackFemale[i].customLabel) {
stackFemale[i].customLabel.destroy();
}
stackFemale[i].customLabel = chart.renderer.text('Female', x, y)
.add();
labelBBox = stackFemale[i].customLabel.getBBox();
stackFemale[i].customLabel.translate(-labelBBox.width / 2, labelBBox.height)
}
}
}
Feel free to test and improve this code. If something is unclear - just ask.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
API: https://api.highcharts.com/highcharts/chart.events.render