How to display labels outside the pie chart border?

Question

Pie Chart

I've used ng2-charts(chart.js) in angular. I need to have the labels outside the borders of pie chart like in the attached image. As of now I have disabled the lengend attribute. I'm setting the labels and background colors through @Input() . I could able place the labels above/below by modifying the pieChartLegend attribute but, I need them outside the borders. The position of borders will change dynamically based on input but the label outside the border will be static.

public pieChartOptions: ChartOptions = {
  responsive: true,
  legend: {
    display: false
  }
};

chartlabels: Label[] = [];
chartdata: SingleDataSet;

public chartType: ChartType = 'pie';
// public pieChartLegend = {display:true,position:'bottom'};
// public pieChartPlugins = [];

public chartcolors: Array<any> = [
  {
    backgroundColor: "",
    borderWidth: 1,
  }
];

<canvas baseChart 
    [data]="chartdata" 
    [labels]="chartlabels" 
    [chartType]="chartType"
    [colors]="chartcolors"
    [options]="pieChartOptions">
</canvas>

Answer 1

This can be done using the plugin ' chartjs-plugin-labels '. There is a option to show the label outside of the pie section in this plugin. The calculation is done to show the label in the center of the pie section(outside the chart). I modified the calculation to show the label at the end of the pie section.

Link for plugin

Answer 2

This plugin chartjs-plugin-piechart-outlabels worked for me.

Step 1: npm install ithttps://www.npmjs.com/package/chartjs-plugin-piechart-outlabels .

Step 2: If using Angular framework import it in your components module like this import chartjs-plugin-piechart-outlabels .

Step 3: Customize as required https://piechart-outlabels.netlify.app/options