Highcharts, How can I change the distance for data transfer in a pie chart based on the value

Question

I am using a Highcharts circle diagram.
There are several large wedges in the diagram, and then several smaller wedges. I can use the distance to pull the datalabel into the wedge or move it outside the cake, but I need a mixture. I want the thick wedges to have a label in the pie, but the tiny wedges I want the sticker to be on the outside.
I can change the color of the label in the formatting function based on the value (this uses span style = "color: '+ color'"). I tried to add a distance to this range, but it does not work. Can someone help me here? Thanks, Brita p>

Answer 1

The dataLabels distance in the pie chart cannot be redefined for each data point (see the translation function in the pieSeries class in the source).

But it can be installed for each series. And you can set up a pie chart with a series of TV shows with the same center, and each of them will be a wedge. This is a bit more work.
This shows how to redefine the radius of each slice for a pie chart: Is it possible to assign a different radius for each piece of cake using Highcharts?

The same concept will work for you. But instead of resizing for each series, conditionally change the distance of dataLabels 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
  });
});