[SOLVED] Highcharts packed bubbles useHTML datalabels and add label on top of parent node

Highcharts packed bubbles useHTML datalabels and add label on top of parent node

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) ?

Solution

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