show dataLabels or tooltip on Highcharts packed bubble outer circle - highcharts

Question

How can I show dataLabels or tooltip for outer circle of packedbubble?
For example in Carbon emissions around the world (2014) sample, i need to show a tooltip for each continent, when hovering on them. or if possible show dataLabels for each of them

Answer 1

Notice that the outer circle is just a path without any properties like x, y etc, so it wouldn't work with the Highcharts tooltip feature. The only solution which came to my mind is to create a custom tooltip on mouseover event on this path.
Demo: https://jsfiddle.net/BlackLabel/9gkdfsnj/
Code:
events: {
render() {
var
chart = this,
series = chart.series[0],
graphic = series.parentNode.graphic,
tooltip = document.getElementById('tooltip'),
text;
text = "Sum value: " + Math.floor(series.yData.reduce((a, b) => a + b, 0));
graphic.element.onmouseover = function() {
tooltip.style.visibility = "visible";
tooltip.innerHTML = text;
tooltip.style.left = graphic.x + (tooltip.offsetWidth /2) - chart.plotLeft + 'px';
tooltip.style.top = graphic.y + graphic.height / 2 + 'px'
}
graphic.element.onmouseout = function() {
tooltip.style.visibility = "hidden"
}
}
}
It is just a simple example, feel free to improve it.

Answer 2

Add value key
[{
name: 'Animals',
value: 867,
data: [{
name: 'Lion',
value: 167
}, {
name: 'Croatia',
value: 200
},
{
name: "Dog",
value: 97
}],
}]
Add below lines inside Tooltip
tooltip: {
useHTML: true,
formatter : function(){
let childtooltip = "";
if(this.point != undefined && this.point != null){
if((this.point.name != undefined && this.point.name != null) && (this.point.value != undefined && this.point.value != null)){
childtooltip = `<b>${this.point.name}:</b> ${this.point.value}`;
}
}
if(childtooltip == ""){
return `<b>${this.series.userOptions.name}:</b> ${this.series.userOptions.value}<br>`
}else{
return `${childtooltip}`;
}
}
}
Demo