score:9

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

score: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",

Related Query

More Query from same tag