Highcharts pie series label

Question

How can i do single label for each series? something like in img.

Answer 1

The best option to create this labels is using renderer function:

function renderLabel(chart) {

  chart.labelsGroup = chart.renderer.g("labelsGroup").attr({
    zIndex: 100
  }).add();
  chart.series.forEach((series, i) => {
    chart.labelGroup = chart.renderer.g("labelGroup").attr({
      zIndex: 100
    }).add(chart.labelsGroup);

    chart.label = chart.renderer.label(
        series.name,
        chart.plotSizeX / 2 + chart.plotLeft - series.data[0].shapeArgs.r + (series.data[0].shapeArgs.r - series.data[0].shapeArgs.innerR) / 2,
        (chart.plotHeight) / 2 + chart.plotTop)
      .css({
        color: '#FFFFFF',
        zIndex: 999,
      })
      .attr({
        align: 'center',
        padding: 0,
        zIndex: 999,
      }).add(chart.labelGroup)
    let height = chart.label.getBBox().height;
    chart.labelGroup.translate(null, -height / 2)
  })
}

and use render event to redraw it when the window size changes API

Check this example: DEMO