Highcharts datalabels are not showing infront of each slice in pie chart

Question

I am using highcharts and trying to draw pie chart from that but just got into a weird problem my datalabels are not showing correctly infront of slices and it is happening only when their are 10+ slices in a pie. I don't want to show connector I just want to show my datalabels near the pie and should show correctly infront of every slice. Also I don't want to increase the size of pie chart.

Pie Chart

$(function () {
var asset_allocation_pie_chart = new Highcharts.Chart({
    chart: {
        renderTo: 'asset_allocation_bottom_left_div'
    },
    title: {
        text: 'Current Asset Allocation',
        style: {
            fontSize: '17px',
            color: 'red',
            fontWeight: 'bold',
            fontFamily: 'Verdana'
        }
    },
    subtitle: {
        text: '(As of ' + 'dfdf' + ')',
        style: {
            fontSize: '15px',
            color: 'red',
            fontFamily: 'Verdana',
            marginBottom: '10px'
        },
        y: 40
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage}%</b>',
        percentageDecimals: 0
    },
    plotOptions: {
        pie: {
            size: '60%',
            cursor: 'pointer',
            data: [
                ['Investment Grade Bonds', 100],
                ['High Yield Bonds', 200],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
                ['Cash', 500],
                ['Cash', 500],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
                ['Cash', 500],
                ['High Yield Bonds', 200],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
                ['Cash', 500],
                ['High Yield Bonds', 200],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
            ]
        }
    },
    series: [{
        type: 'pie',
        name: 'Asset Allocation',
        dataLabels: {                
            enabled: true,
            color: '#000000',
            connectorWidth: 0,
            distance: 5,
            connectorColor: '#000000',
            formatter: function () {
                return Math.round(this.percentage) + ' %';
            }

        }
    }],
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    }
});

});

Answer 1

You have to position data labels on your own, if you want them place like in the image.

One way is calculating the positions manually, according to the pie slice value. The other, create another pie series with the same data, make it invisible and use its data labels.

series: [{
  enableMouseTracking: false,
  showInLegend: false,
  color: 'transparent',
  colorByPoint: false,
  size: '100%',
  innerSize: '60%',
  dataLabels: {
    style: {
      "color": "black",
      "fontSize": "11px",
      "fontWeight": "bold",
    },
    connectorWidth: 0,
    connectorPadding: 0,
    distance: -35,
    formatter: function() {
      return Math.round(this.percentage) + ' %';
    }
  },

}, {
  name: 'Asset Allocation',
  dataLabels: {
    enabled: false
  },
}]

example: https://jsfiddle.net/3me3pyyf/

Answer 2

Problem is you are rounding off the value,

Try this,

$(function() {
  var asset_allocation_pie_chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    title: {
      text: 'Current Asset Allocation',
      style: {
        fontSize: '17px',
        color: 'red',
        fontWeight: 'bold',
        fontFamily: 'Verdana'
      }
    },
    subtitle: {
      text: '(As of ' + 'dfdf' + ')',
      style: {
        fontSize: '15px',
        color: 'red',
        fontFamily: 'Verdana',
        marginBottom: '10px'
      },
      y: 40
    },

    plotOptions: {
      pie: {
        size: '60%',
        cursor: 'pointer',
        series: {
          dataLabels: {
            enabled: true,
            format: '{point.name}: {point.y:.1f}%'
          }
        }

      }
    },
    series: [{
      type: 'pie',
      name: 'Asset Allocation',

      data: [
        ['Investment Grade Bonds', 100],
        ['High Yield Bonds', 200],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
        ['Cash', 500],
        ['Cash', 500],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
        ['Cash', 500],
        ['High Yield Bonds', 200],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
        ['Cash', 500],
        ['High Yield Bonds', 200],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
      ]
    }],
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    }
  });

});

DEMO