I've been googling for hours but didn't find the answer for this yet. I'm using ng2-chart to generate charts in my dashboard. It's working well, the problem is that I want to show the percentage values inside the doughnut chart but I don't know how to do it.
This is my code:
<canvas baseChart [data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
[labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa"
[chartType]="'doughnut'">
</canvas>
optionsGraficoDespesa: ChartOptions = {
responsive: true,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, data) {
let label = data.labels[tooltipItem.index];
let count: any = data
.datasets[tooltipItem.datasetIndex]
.data[tooltipItem.index];
return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
},
},
},
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',
}
}
};
The result is:
Unfortunately the plugin I'm using at the [options] input is not working. How could I solve this?
I solved this by doing the following:
Component:
HTML
Result: