I am currently working on a large-scale project and I am in need of a way to position the labels outside of pie charts or doughnut charts. I came across a plugin called outerLabels on GitHub which seems to be the perfect solution for what I need, but I am having difficulty getting it to function properly.
I have tried various methods to implement the plugin using Chart.js, including importing it as shown below:
import {} from 'chartjs-plugin-outerlabels';import 'chartjs-plugin-outerlabels';Here is an example of how I am configuring the chart options:
function getPieChartOptions(chartTitle: string) {
const options: ChartOptions = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
}
}
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
}
},
datalabels: {
color: 'white',
formatter: commas.format,
}
},
};
return options;
}
Below is an example of a doughnut chart that is part of the project itself:
If anyone has experience with this plugin or any other suggestions on how to achieve my goal, I would greatly appreciate your help!