in src/app/components/donut-chart/donut-chart.component.ts [84:132]
renderChart(chartData: DonutDataItem[] = []) {
if (!this.chartContainerId) {
return;
}
const ctx = (document.getElementById(this.chartContainerId) as HTMLCanvasElement).getContext(
'2d'
);
const dataValues = chartData.map((d) => d.value);
const chartLabels = chartData.map((d) => d.name);
const colors = chartData.map((d) => d.color);
if (this.donutChart) {
this.donutChart.destroy();
}
this.donutChart = new Chart(ctx!, {
type: 'doughnut',
data: {
labels: chartLabels,
datasets: [
{
data: dataValues,
backgroundColor: colors,
},
],
},
options: {
responsive: true,
animation: {
animateScale: true,
animateRotate: true,
},
plugins: {
legend: {
display: false,
},
title: {
display: false,
},
tooltip: {
position: 'nearest',
},
},
},
});
this.donutChart.update();
}