Placing Data Labels Outside Pie or Doughnut Chart - Chart.js - css

Question

I am working on a large scale application and it would be very helpful to place the labels on either pie charts or doughnut charts outside of the chart itself.
This plugin, outerLabels is exactly what I am looking for but I am having trouble getting it to output anything.
I have been unable to find a way to get this done using Chart.js and that is what I am stuck working with for now.
I have imported the plugin both like
import {} from 'chartjs-plugin-outerlabels';
and also like import 'chartjs-plugin-outerlabels';
Here is an example of how I am setting 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;
}
Here is an example of a doughnut chart within the project itself:
If anybody can help getting this plugin to work, or has another solution to this problem it would be greatly appreciated!

Answer 1

This works for me without the datalabels field (as it requires installing chartjs-plugin-datalabels.js library).
So basically the ChartOptions setting is similar to the one you provided.
import 'chartjs-plugin-outerlabels';
getPieChartOptions(chartTitle: string) {
const options: ChartOptions<'doughnut'> = {
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',
},
},
tooltip: {
enabled: false,
},
},
};
return options;
}
And this is how to render the chart to the canvas element.
#ViewChild('MyChart', { static: true }) chart: ElementRef<HTMLCanvasElement>;
ngAfterViewInit() {
const ctx = this.chart.nativeElement.getContext('2d');
new Chart<'doughnut'>(ctx, {
type: 'doughnut',
data: {
labels: [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'],
datasets: [
{
data: [300, 500, 100],
},
],
},
options: this.getPieChartOptions('doughnut'),
} as ChartConfiguration<'doughnut'>).draw;
}
Demo # StackBlitz