[Chartjs]-How to display the labels in doughnut chart using ng2 charts?

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

1👍

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

Leave a comment