When using Chart.js with AngularJS, I tried to display numbers or percentages in a doughnut chart using a formatter. However, it did not work as expected. Here is how I implemented it in my HTML:
<canvas baseChart class="chart" [data]="doughnutChartData" [labels]="doughnutChartLabels"
[options]="doughnutChartOptions" [chartType]="doughnutChartType"
[colors]="doughnutChartColors">
</canvas>
And here is my implementation in Chart.js:
public doughnutChartLabels: string[] = [
'Demo',
'Test',
'Live',
];
doughnutChartData = [];
public doughnutChartColors: any[] = [
{
backgroundColor: ['#735A84', '#E76412', '#9BC311',],
},
];
public doughnutChartType = 'doughnut';
public doughnutChartOptions: any = {
animation: false,
responsive: true,
legend: {
display: true,
labels: {
fontColor: '#9aa0ac',
},
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value*100 / sum).toFixed(2)+"%";
return percentage;
},
color: '#fff',
}
}
};
However, the issue is that the chart appears without applying the formatter, and this is how the doughnut chart is displayed.