0

I create a packed bubbles with a useHTML option for the datalabels because I want these labels to be centered in each bubbles.

The result is fine, you can see it here : https://jsfiddle.net/vegaelce/1tk0m4qs/8/

My issue is about the parent node label, I would like it to be placed on top of each major bubble (as in the offical demo : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-packedbubble/packed-dashboard)

But as I need to set the useHTML flag on dataLabels, the label of parent node is placed in the center of each major bubble (which is not good).

If you set useHTML : false in my sample, the label of parent is correctly placed on top of the major bubbles but the labels of each bubbles is not centered anymore.

dataLabels: {
          useHTML: true,

How can I mix the two things (useHTML and place the parent label on top of bubble) ?

vegaelce
  • 115
  • 6

1 Answers1

0

You don't need to enable useHTML to center the labels. It is enough to set align: 'left' and 'text-anchor': 'middle' style. For example:

  plotOptions: {
    packedbubble: {
      ...,
      dataLabels: {
        ...,
        align: 'left',
        style: {
          'text-anchor': 'middle'
        }
      }
    }
  }

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

API Reference: https://api.highcharts.com/highcharts/series.packedbubble.dataLabels

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thanks, it works like a charm. I've 2 subsidiary questions about this chart : How can I change the style of the parent node label (on top of the node) to get a different style for node data labels and parent node data labels ? And how can I change the content of the parent node tooltip ? – vegaelce Jan 23 '23 at 13:16
  • 1
    Hi @vegaelce, You can use `parentNodeFormat` or `parentNodeFormatter`. For tooltip use `formatter` function and check `isParentNode` point's property. Live example: https://jsfiddle.net/BlackLabel/to5vcw4L/ – ppotaczek Jan 24 '23 at 09:19