Stacked Bar Highcharts how to show the values - highcharts

Question

How to static values in stacked bar chart. Below is the code i am using
$(function () {
Highcharts.chart('container5', {
chart: {
type: 'bar'
},
title: {
text: null
},
xAxis: {
categories: [''],
lineWidth: 0, // STEP TWO
tickWidth: 0, // STEP ONE
labels: {
enabled: false
},
},
yAxis: {
min: 0,
title: {
text: ' '
},
labels: {
enabled: false,//default is true
},
gridLineWidth: 0,
minorGridLineWidth: 0,
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
column: { //at the top bar chart values
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
},
bar: {
dataLabels: {
enabled: true,
distance: -50,
formatter: function () {
var dlabel = this.series.name + '<br/>';
// dlabel += Math.round(this.percentage*100)/100 + ' %';
return dlabel
},
style: {
color: 'white',
},
},
}
},
series: [{
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}]
});
});
It is the output and refer the attachment.
In the screenshot marked in red rectangular box, want to show the values. Refer the screenshot attached below
Original Screenshot (sample one)
Like this screenshot i need to show the values at the top which can be seen at the top.

Answer 1

You can define multiple data labels and position one of them at the top of the column, for example:
series: [{
...,
dataLabels: [{}, {
format: '20yrs',
y: -100
}]
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4909/
API Reference: https://api.highcharts.com/highcharts/series.bar.dataLabels

Answer 2

Added,
y: -100 to the bar.dataLabel option (before the formatter) .
Image Output:
enter image description here
At the top of the label some of the name is missing:
5-9yrs & 15-20yrs ..printing alternatively
and also inside the stacked bar chart, values "20" not get displayed.