title: Highcharts Annotations for donut chart
body: <p>I am trying to implement position of Annotations for donut chart outside of donut.
  I tried distance, x &amp; y property, but they are not providing the desired result.
  Is there any way we can position the annotations for donut chart?
  Jsfiddle link is: <a href="http://jsfiddle.net/83dhb04j/5/" rel="nofollow noreferrer">http://jsfiddle.net/83dhb04j/5/</a></p>
  
  <p>Code is:</p>
  
  <pre><code>    Highcharts.chart('container', {
    title: {
      text: 'Highcharts Annotations'
    },
  
    subtitle: {
      text: 'Annotation label shapes'
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: false
        }
      }
    },
    series: [{
      type: 'pie',
      innerSize: '90%',
      keys: ['y', 'id'],
      data: [
        [29.9, '0'],
        [71.5, '1'],
        [106.4, '2'],
        [129.2, '3'],
        [144.0, '4'],
        [176.0, '5']
      ]
    }],
  
    tooltip: {
      enabled: false
    },
  
    annotations: [{
      labels: [{
        point: '0',
        shape: 'callout',
        y: -65,
        useHTML:true,
        formatter: function() {
          return "&lt;span onclick='getVal("+this.y+")' style='cursor: pointer'&gt;$" + this.y+"&lt;/span&gt;"
        }
  
      }, {
        point: '1',
        shape: 'callout',
        useHTML:true,
        y: -50,
        formatter: function() {
          return "&lt;span onclick='getVal("+this.y+")' style='cursor: pointer'&gt;$" + this.y+"&lt;/span&gt;"
        }
  
      }, {
        point: '2',
        shape: 'callout',
        useHTML:true,
        y: -50,
        x: 10,
        formatter: function() {
          return "&lt;span onclick='getVal("+this.y+")' style='cursor: pointer'&gt;$" + this.y+"&lt;/span&gt;"
        }
  
  
      }, {
        point: '3',
        shape: 'callout',
        useHTML:true,
        y: 70,
        formatter: function() {
          return "&lt;span onclick='getVal("+this.y+")' style='cursor: pointer'&gt;$" + this.y+"&lt;/span&gt;"
        }
  
      }, {
        point: '4',
        shape: 'callout',
        useHTML:true,
        y: 80,
        formatter: function() {
         return "&lt;span onclick='getVal("+this.y+")' style='cursor: pointer'&gt;$" + this.y+"&lt;/span&gt;"
        }
  
      }, {
        point: '5',
        shape: 'callout',
        useHTML:true,
        y: -60,
        formatter: function() {
          return "&lt;span onclick='getVal("+this.y+")' style='cursor: pointer'&gt;$" + this.y+"&lt;/span&gt;"
        }
      }]
    }]
  });
  function getVal(obj){
  alert("value of y is $"+ obj)
  }    
  </code></pre>
  
  <p>If this is possible using datalabel property, please suggest that solution as well..</p>