[Solved]-chart.js: Show labels outside pie chart-Chart.js

I resolved: We add script to file global:

if(window.Chartist && Chartist.Pie && !Chartist.Pie.prototype.resolveOverlap) {
        Chartist.Pie.prototype.resolveOverlap = function() {
            this.on('draw', function(ctx) {
                if(ctx.type == 'label') {
                    let gText = $(ctx.group._node).find('text');
                    let ctxHeight = ctx.element.height();
                    gText.each(function(index, ele){
                        let item = $(ele);
                        let diff = ctx.element.attr('dy') - item.attr('dy');
                        if(diff == 0) {
                            return false;
                        }
                        if(Math.abs(diff) < ctxHeight) {
                            ctx.element.attr({dy: ctx.element.attr('dy') - ctxHeight});
                        }
                    });
                }
            });
        };
    }

and then:

new Chartist.Pie(element, data, options).resolveOverlap();

The real problem lies with the overlapping of the labels when the slices are small.You can use PieceLabel.js which solves the issue of overlapping labels by hiding it . You mentioned that you cannot hide labels so use legends, which will display names of all slices

Or if you want exact behavior you can go with the highcharts, but it requires licence for commercial use.

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["January", "February", "March", "April", "May"],
    datasets: [{
      data: [
        250,
        30,
        5,
        4,
        2,

      ],
      backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'],
      borderColor: 'white',
      borderWidth: 5,
    }]
  },
  showDatapoints: true,
  options: {
    tooltips: {
      enabled: false
    },
    pieceLabel: {
      render: 'label',
      arc: true,
      fontColor: '#000',
      position: 'outside'
    },
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Testing',
      fontSize: 20
    },
    animation: {
      animateScale: true,
      animateRotate: true
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<canvas id="chart-area"></canvas>

Fiddle demo

There is a new plugin (since a year), called chartjs-plugin-piechart-outlabels

Just import the source
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
and use it with the outlabeledPie type

var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, {
type: 'outlabeledPie',
data: {
labels: ["January", "February", "March", "April", "May"],
...
plugins: {
        legend: false,
        outlabels: {
           text: '%l %p',
           color: 'white',
           stretch: 45,
           font: {
               resizable: true,
               minSize: 12,
               maxSize: 18
           }
        }
     }
})