Chartjs-How to display labels outside the pie chart border?

2πŸ‘

βœ…

This can be done using the plugin β€˜chartjs-plugin-labelsβ€˜. There is a option to show the label outside of the pie section in this plugin. The calculation is done to show the label in the center of the pie section(outside the chart). I modified the calculation to show the label at the end of the pie section.

Link for plugin

1πŸ‘

This plugin chartjs-plugin-piechart-outlabels worked for me.

Step 1: npm install it https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels.

Step 2: If using Angular framework import it in your components module like this import chartjs-plugin-piechart-outlabels.

Step 3: Customize as required https://piechart-outlabels.netlify.app/options

Leave a comment