Displaying max value in bottom of the pie chart - highcharts - vue.js

Question

I am using highchart. I want to display the maximum value and value label at the bottom of the pie chart.please see the attached screenshot. if the maximum value is equal display both value and that label.
this.pieChart.push(
{
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Question Title'
},
subtitle: {
text: ''
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
dataLabels: {
enabled: true,
format: '<b></b><br>{point.percentage:.1f} %',
distance: -50,
filter: {
property: 'percentage',
operator: '>',
value: 4
}
}
}
},
series: [{
name: 'Answer Selected',
data: [
['1st Que ans - 1', 3],
['1st Que ans - 2', 2],
['1st Que ans - 3', 1],
['1st Que ans - 4', 2]
]
}]
})

Answer 1

Here is an example of how to render a custom label base on the included data and using the render callback. The instruction what is happening is in the code. If something is unclear - feel free to ask.
Demo: https://jsfiddle.net/BlackLabel/euLyc49j/
events: {
render() {
let chart = this,
max = Math.max(...chart.series[0].processedYData);
chart.series[0].points.forEach(p => {
if (p.y === max) {
if (p.customLabel) {
p.customLabel.destroy();
}
//render label in the (0, 0)
p.customLabel = chart.renderer.label(p.name + ' - ' + p.y , 0, 0)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
// position label in the bottom center
p.customLabel.translate(chart.plotWidth / 2 - p.customLabel.getBBox().width / 2, chart.plotSizeY + chart.plotTop)
}
})
}
}
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
API: https://api.highcharts.com/highcharts/chart.events.render