Highcharts pie/variablepie align multilines label on plotedge

Question

I use variable pie with some long and multi-lines labels (label
value1
value 2). To optimize the rendering of the chart, I use the alignTo "plotEdges" option and it's working well but it seems it cannot align on the plot edge all the lines of the labels. My options are :

dataLabels: {
        enabled: true,
        alignTo: "plotEdges",
        formatter: function () { return "<b>"+this.point.name+"</b><br><i>"+""+Highcharts.numberFormat(this.point.y, 0, ".", " ")+" </i> <i>("+Highcharts.numberFormat((this.y/11999*100), 2, ".", " ")+"%)</i><br><i>"+""+Highcharts.numberFormat(this.point.z, 0, ".", " ")+" </i>";}},
    innerSize: "20%",
}

You can see the result here : https://jsfiddle.net/vegaelce/95ochyqz/

I would like all labels on the right of the chart right aligned (values right aligned under the title of the label). The labels on the left of the chart are correctly left aligned near the plotEdge.

Is it possible ?

Thanks

Answer 1

1. Set the dataLabels.useHTML to true to render them as outstanding elements,

2. In the dataLabels.formatter callback check the label alignment and add a float styling for the according to the left:

   formatter: function() {
   if (this.point.labelPosition.alignment === 'left') {
     return "<b>" + this.point.name + "</b><br><i style='float: right'>" + "" + Highcharts.numberFormat(this.point.y, 0, ".", " ") + " </i> <i style='float: right'>(" + Highcharts.numberFormat((this.y / 11999 * 100), 2, ".", " ") + "%)</i><br><i style='float: right'>" + "" + Highcharts.numberFormat(this.point.z, 0, ".", " ") + " </i>";
   } else {
     return "<b>" + this.point.name + "</b><br><i>" + "" + Highcharts.numberFormat(this.point.y, 0, ".", " ") + " </i> <i>(" + Highcharts.numberFormat((this.y / 11999 * 100), 2, ".", " ") + "%)</i><br><i>" + "" + Highcharts.numberFormat(this.point.z, 0, ".", " ") + " </i>";
   }
   }
   

Feel free to improve the code. Demo: https://jsfiddle.net/BlackLabel/2vt7394m/

API: https://api.highcharts.com/highcharts/series.line.dataLabels.useHTML