score:4

Accepted answer

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
  });
});

Related Query

More Query from same tag