I have a packed bubble chart with the following jsfiddle link: https://jsfiddle.net/ytvcjzx1/
Below is the code snippet:
(function(H) {
H.addEvent(H.Series, 'afterDrawDataLabels', function(e) {
const series = this;
const chart = series.chart;
if (!series.parentNode.plotX || chart.options.chart.type !== 'packedbubble') {
return;
}
if (!series.customLabel) {
series.customLabel = series.chart.renderer.label(
series.name, null, null, 'rect'
)
.attr({
align: 'center',
fill: 'rgba(255, 255, 255, 0.7)',
zIndex: 3
})
.css({
color: 'black',
fontSize: '12px',
fontWeight: 'bold',
whiteSpace: 'nowrap', // To prevent text wrapping
padding: '5px', // Add some padding around the label text
borderRadius: '5px' // Add rounded corners to the background
})
.add();
}
series.customLabel.attr({
x: series.parentNode.plotX + chart.plotLeft,
y: series.parentNode.plotY + chart.plotTop - 10
});
});
}(Highcharts));
...
The issue arises when dealing with the series name
Long word 1234432222 1234432222...