I am starting to use ng2-charts in angular, and when generating a pie chart, it shows me a label at 0, at the top of the pie chart.
This is the configuration part of the piechart
pieChartData: ChartData<'pie', number[], string | string[]> = {
labels: [['Bills Payed'], ['Bills Outstanding']],
datasets: [{ data: [this.payed, this.outstanding] }],
};
pieChartOptions: ChartConfiguration['options'] = {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 1,
plugins: {
legend: {
display: true,
position: 'bottom',
fullSize: false,
maxWidth: 200,
labels: {
font: { lineHeight: 2, size: 13 },
},
},
title: {
padding: 0,
display: true,
text: 'Bills Chart',
position: 'left',
font: {
size: 20,
},
},
datalabels: {
formatter: (value: any, ctx: any) => {
if (ctx.chart.data.labels) {
return '$' + value;
} else return '';
},
font: { size: 20 },
},
},
};
ng2-charts pie charts show extra label with empty data
I was making changes in the datalabels plugin but without success. If I deactivate the datalabels, that label no longer appears, but neither do the labels inside the footer chart, so I suppose it is an incorrect datalabels configuration.