Marking the legend in center for bubble chart

Question

I'm playing around this highchart:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/packed-bubble-split

Packed bubble split, I wanted to make the legends (Asia, Europe etc) to appear in the center of each bubble. Is it possible with events? I tried something like this:

Highcharts.chart(chartContainer, {
    chart: {
        type: 'packedbubble',
        renderTo: chartContainer,
        events: {
            render: function() {
                const chart = this;
                chart.series.forEach(function (series) {
                    var data = series.data; // Get all the data points for the series
                    var totalX = 0;
                    var totalY = 0;
                    var totalPoints = data.length;

                    // Calculate the total X and Y coordinates of the data points
                   
                        })
                        .add();
                });
            }
        }
    },

No luck, I can't place them in center. Wondering if there is a way I achieve it?

Answer 1

You can use the below plugin which will add the required custom label and position it during animation.

(function(H) {
    . . . .
    series.customLabel.attr({
      x: series.parentNode.plotX + chart.plotLeft,
      y: series.parentNode.plotY + chart.plotTop - 10
    });
  });
}(Highcharts));

---

Live demo: https://jsfiddle.net/BlackLabel/v1ew6bLc/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts