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>

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>

• javascript
• angular
• chart.js
• ng2-charts

• I can advise disable chart.js labels and create custom one. (Some algorithm for rotating of div with your custom labels). – Dmitriy Ivanko Commented Oct 18, 2019 at 7:00
• is there any plugins to do this? – Manoj kumar Commented Oct 18, 2019 at 9:43
• I think no, but I hope there is not very dificult logic especially if you already have all percent from ng2-chart ponent's output. This is example of div rotating: getbootstrap./docs/4.3/examples/product (see html and css code of this website) – Dmitriy Ivanko Commented Oct 18, 2019 at 10:01
• Can you write an example with respect to pie chart? It will be more helpful. – Manoj kumar Commented Oct 21, 2019 at 4:08
• Adding a div around pie chart and rotating it, will also rotate the pie chart inside it. – Manoj kumar Commented Oct 21, 2019 at 6:56

2 Answers 2

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

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

Step 1: npm install it https://www.npmjs./package/chartjs-plugin-piechart-outlabels.

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

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