How to display the labels in doughnut chart using ng2 charts?

Question

I am using ng2 doughnut chart to display some items, Its all working fine as per the doughnut chart documentation but the thing i need to change is, the display of label of each slices comes only on hover but the thing i need is it should be in default in each slices.

Dashboard.component.html:

<canvas #mycanvas baseChart
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [colors]="colors"
    [options]="options"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)">
</canvas>

Dashboard.component.ts:

public doughnutChartLabels:string[] = ['Running', 'Stop', 'Idle'];
public doughnutChartData:number[] = [1, 4, 5];
public doughnutChartType:string = 'doughnut';
public colors: any[] = [{ backgroundColor: ["#008000", "#FF0000", "#FFA500"] }];

The thing i am in the need is exactly as like in the image,

The labels should be in default in each slices and the thing needs to be achieved only by using pure typescript and no javascript. Kindly help me to achieve the desired result.

Bedard

Refer to the chart.js documentation Legend Config, you can use the input [options]="options" to pass the same options of the link above – Neodarwinism

Answer 1

You can achieve that by using a Chart.js plugin called - Chart.PieceLabel.js.

first.. install it via npm :

npm install chart.piecelabel.js --save

then.. import it in your dashboard component :

import 'chart.piecelabel.js';

and finally.. set the following option in your chart­'s options config :

pieceLabel: {
   render: 'label'
}

^{note: this is the minimum option needs to be set to display the labels, and you can find more options here.}

see - working example

Pittance

Is there no option available without including any plugins? – Bedard

Unfortunately.. NO ..not yet – Clamorous

Omg, including of plugins keeps on increasing the size of application. – Bedard

Ok i will go with this plugin, is there any option to include the chartData value along with this label, Say, (March:1) like this?? – Bedard

Yes, there is. To learn more about options you should follow the docs.. anyway I've updated the example.. you can check – Clamorous

Lol, will definetly accept it .. Thanks for your help. – Bedard

No problem.. Glad to help. – Clamorous

@GRUNT I tried you example but It does not display any labels. I am using chartjs 2.7.1. without ng2-charts. Any idea? – Hithermost

@Pittance is it same for angular V4? – Laterite

I followed the procedure, but it is not working in Angular V6 also. Please update the answer for Angular 6 also – Gorham

If label Text increases, its getting hid instead it should break to next line, is there a way to get around with this ? – Pike

Answer 2

'chartjs-plugin-labels' is the most popular display plugin. I just tried it. It works!

npm install chartjs-plugin-labels --save

In the desired angular 2+ component, add the following:

import 'chartjs-plugin-labels';

No need to import any module.

Here is the npm information:
https://www.npmjs.com/package/chartjs-plugin-labels

Site:
https://chartjs-plugin-datalabels.netlify.com/

Demo:
https://emn178.github.io/chartjs-plugin-labels/samples/demo/

package.json : combination which worked:

"chart.js": "^2.8.0",
"chartjs-plugin-labels": "^1.1.0",

Vandalize