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.

Refer to the chart.js documentation [Legend Config](http://www.chartjs.org/docs/latest/configuration/legend.html#example), you can use the input `[options]="options"` to pass the same options of the link above — JoxieMedina, Oct 10 '17 at 06:47

score 11 · Accepted Answer · answered Oct 10 '17 at 06:51

11

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

answered Oct 10 '17 at 06:51

ɢʀᴜɴᴛ

32,025
15
116
110

Is there no option available without including any plugins? – Maniraj Murugan Oct 10 '17 at 06:53
Unfortunately.. **NO** ..not yet – ɢʀᴜɴᴛ Oct 10 '17 at 06:54
Omg, including of plugins keeps on increasing the size of application. – Maniraj Murugan Oct 10 '17 at 06:56
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?? – Maniraj Murugan Oct 10 '17 at 07:01
Yes, there is. To learn more about options you should follow the docs.. anyway I've updated the example.. you can check – ɢʀᴜɴᴛ Oct 10 '17 at 07:08
Lol, will definetly accept it .. Thanks for your help. – Maniraj Murugan Oct 10 '17 at 07:14
No problem.. Glad to help. – ɢʀᴜɴᴛ Oct 10 '17 at 07:20
@GRUNT I tried you example but It does not display any labels. I am using chartjs 2.7.1. without ng2-charts. Any idea? – pantonis Oct 31 '17 at 07:56
@ɢʀᴜɴᴛ is it same for angular V4? – Prashant Pimpale Jun 19 '18 at 07:24
I followed the procedure, but it is not working in Angular V6 also. Please update the answer for Angular 6 also – Victor Oct 08 '18 at 12:15
If label Text increases, its getting hid instead it should break to next line, is there a way to get around with this ? – Bhimashankar Mantur Nov 05 '18 at 07:32

score 1 · Answer 2 · edited Jul 22 '19 at 01:56

'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",

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

2 Answers2