Accepted answer

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


'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:



package.json : combination which worked:

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

Related Query

More Query from same tag