Position single data label of highcharts pie chart centered below the chart

Question

I am using Highcharts and have initialized a pie chart, but with 4 pies in it, lined up in a row. Each pie has 2 slices, the second one is always transparent and has no datalabel, so every single chart has only 1 data label to show a value.

The only thing I want is to center the data label below the pie chart.

The problem is that dependent on the size of the visible slice the data label is moving because it is kinda bound to it?

Image to show the problem and the current state:

I tried to position the labels by using x and distance:

plotOptions: {
        pie: {
            dataLabels: {
                distance: 0,
                x: -100

which is actually working; I would have to fix the position for each chart and its data label. But since the chart data can be changed by click the filled slice will change and so the data labels would reposition themselves. So I kinda need a way to fix their position relative to the center of the chart or something like that.

Maybe better is using renderer and place label in right place? — Sebastian Bochan

tommygun tommygun · Accepted Answer · 2016-01-17T19:26:14

Thanks to Sebastian Bochan for the comment. I ended up using the renderer:

this.renderer.label(
 this.series[0].data[0].name + '<br>'
 + Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
 80, 320,'callout')}).add();

Just an example. The 80 and 320 here set the position of the label in the plot area. Renderer

Position single data label of highcharts pie chart centered below the chart

1 Answers