Highchart - show values on Chart

Question

I am using pie chart from Highcharts and that work fine, however I get requirement to show percentage values like shown in below image.

I tried to play with legand option but that didn't work.

My settings are as below.

    $('#' + source).highcharts({
        credits: {
            enabled: false
        },
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: chartTitle
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                },
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                },
                connectorColor: 'silver',
                showInLegend: true
            }
        },
        legend: {
            enabled: true,
            layout: 'horizontal',
            verticalAlign: 'bottom',
            adjustChartSize: true
        },
        series: [{
            name: 'Total of ',
            colorByPoint: true,
            data: chartData
        }]
    });

Answer 1

In order to display one label outside of the chart you have to calculate its x and y values, taking into consideration label angle.

const options = {
  chart: {
    type: 'pie',
    events: {
      load: function() {
        const series = this.series[0];
        const points = series.data;
        const chart = this;

        points.forEach(function(point) {
            if (point.y <= 4) {
            const myOffset = 50;
            const {x: centerX, y: centerY} = point.graphic.attr();
            const {x, y} = point.dataLabel.attr();
            const angle = point.angle;
            point.dataLabel.attr({
              x: x + Math.cos(angle) * myOffset,
              y: y + Math.sin(angle) * myOffset
            });
          }
        });
      }
    }
  },
  title: {
    text: ''
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -40,
        formatter: function() {
          return this.y + '%';
        }
      },
      showInLegend: true
    }
  },
  series: [{
    //innerSize: '60%',
    data: [{name: 'Staff Delegation', y:77}, {name: 'AAP', y:11}, {name: 'DCC', y:8.5}, {name: 'Council', y:3.5}]
  }]
}

const chart = Highcharts.chart('container', options);

Live example: https://jsfiddle.net/16d8y6yj/

Output:

Answer 2

Take help of dataLabels and its distance attribute and formatter function. Use this fiddle:

JS:

var container = new Highcharts.Chart('container',{
        chart: {
             plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        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: '80%',
                cursor: 'pointer',
                data: [
                    ['Investment Grade Bonds', 100],
                    ['High Yield Bonds', 200],
                    ['Hedged Equity', 300],
                    ['Global Equity', 400],
                    ['Cash', 500]
                ]
            }
        },
        series: [{
                type: 'pie',
                name: 'Asset Allocation',
                dataLabels: {
                    verticalAlign: 'top',
                    enabled: true,
                    color: '#000000',
                    connectorWidth: 1,
                    distance: -30,
                    connectorColor: '#000000',
                    formatter: function() {
                        return Math.round(this.percentage) + ' %';
                    }
                }
            }, {
                type: 'pie',
                name: 'Asset Allocation',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorWidth: 1,
                    distance: 30,
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %';
                    }
                }
            }],
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        }
    });

HTML:

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 3

Try playing with the distance property:

plotOptions: {
    pie: {
        dataLabels: {
            distance: -30,
            format: '{point.percentage:.1f} %'
        }
    }
},

You will need to take care for when pie slices are much smaller.