<!--  Font Awesome CDN CSS-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!--  Highcharts JS -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<h1>Pie highcharts legends with font awesome icons  and values inside plot area.</h1>

<div id="pieChart" class="pieChart"></div>
.pieChart{
    rect{
        display: none;
    }
}
// Build the chart
Highcharts.setOptions({
    colors: ['#ff1d8e', '#efad4f', '#5ab95d', '#dc5351']
  });

  Highcharts.chart('pieChart', {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: ""
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },

    plotOptions: {
      pie: {
        startAngle: 0,
        allowPointSelect: false,
        dataLabels: {
          softConnector: false,
          enabled: true,
          connectorWidth: 0,
          formatter: function () {
            return Math.round(this.percentage * 100) / 100 + ' %';
          },
          distance: -30,
          color: 'white'
        },
        showInLegend: true
      }
    },
    legend: {
      align: 'left',
      verticalAlign: 'top',
      layout: 'vertical',
      x: 40,
      y: 50,
      useHTML: true,
      itemMarginTop: 7,
      itemMarginBottom: 7,
    },

    series: [{
      type: 'pie',
      name: '',
      data: [
        ['<i class="fa fa-edit"></i>  Saved ', 40],
        ['<i class="fa fa-hourglass-o"></i>  Pending ', 60,],
        ['<i class="fa fa-check-circle"></i>  Approved ', 20],
        ['<i class="fa fa-times-circle"></i>  Rejected ', 20],
      ],
      dataLabels: {
        useHTML: true
      },
      animation: true
    }],

  });  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.