Highcharts, How can I change the datalable distance in a pie chart based on the value

Question

I am using Highcharts Pie Chart.
The chart has a few large wedges and then several smaller wedges. I can use the distance to pull the datalabel into the wedge or have it outside the pie, but I want a mix. I want the fat wedges to have the label in the pie, but the tiny wedges I want the label outside.
I can change the color of the label in the formatter function based on the value (this uses a span style="color:'+color'"). I tried adding distance to this span but it doesn't work. Can anyone help me here? Thanks, Brita

Barbara Laird Barbara Laird · Accepted Answer · 2016-02-29T19:42:30

The dataLabels distance in a pie chart cannot be overriden per data point (see the translate function in the pieSeries class in the source).

But, it can be set per series. And, you can set up a pie chart with a whole bunch of series with the same center and each taking up a wedge. It's a little more work.
This shows how to override the radius of each slice for a pie chart: Can I assign a different radius for each pie slice using Highcharts?

The same concept will work for you. But instead of changing the size for each series, conditionally change the dataLabels distance for each series: http://jsfiddle.net/f7m58t9j/1/

$(function() {
  var data = [{
    name: 'One',
    y: 5,
    color: 'red'
  }, {
    name: 'Two',
    y: 5,
    color: 'blue'
  }, {
    name: 'Three',
    y: 30,
    color: 'purple'
  }, {
    name: 'Four',
    y: 20,
    color: 'green'
  }, {
    name: 'Five',
    y: 30,
    color: 'black'
  }, {
    name: 'Six',
    y: 2,
    color: 'grey'
  }, {
    name: 'Seven',
    y: 1,
    color: 'pink'
  }];

  var total = data.map(function(el){return el.y;})
                                .reduce(function(p,c){
                    return p+c;
                  });
  var newData = data.map(function(el){
    el.count = el.y;
        el.y = el.y*100/total;
    return el;
  });
  data = newData;

  var start = -90;
  var series = [];
  for (var i = 0; i < data.length; i++) {
    var end = start + 360 * data[i].y / 100;
    series.push({
      name:"Count",
      type: 'pie',
      size: 200,
      dataLabels: {
        distance: data[i].y > 20 ? -30 : 30
      },
      startAngle: start,
      endAngle: end,
      data: [data[i]]
    });
    start = end;
  };
  console.log(series);
  $('#container').highcharts({
    series: series
  });
});

Highcharts, How can I change the datalable distance in a pie chart based on the value

1 Answers