Custom Label Show Percentage on Highcharts - highcharts

Question

I want to customize non stacked column labels on highchats .
Instead of this
I want to show the labels like this
What i already tried is make another series that shows the percentage.but it's not showing like the expected results.
Is it possible to do in Highcharts ?
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Show Percentage'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb'
],
crosshair: true
},
yAxis: {
min: 0,
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
},
series : {
dataLabels : {
enabled :true
}
}
},
series: [
{
name: 'A',
data: [100, 80]
}, {
name: 'B',
data: [50, 40]
}]
});
</script>

Answer 1

You can enable the dataLabels only for the first series and use the render event to position the labels correctly:
chart: {
type: 'column',
events: {
render: function() {
var points = this.series[0].points,
shapeArgs,
y;
points.forEach(function(point, i) {
shapeArgs = point.shapeArgs;
if (point.y > this.series[1].points[i].y) {
y = shapeArgs.y;
} else {
y = this.series[1].points[i].shapeArgs.y;
}
y -= point.dataLabel.height;
point.dataLabel.attr({
x: shapeArgs.x + shapeArgs.width - point.dataLabel.width / 2,
y: y
});
}, this);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/rqp5nb0a/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.render