in src/app/components/donut-chart/donut-chart.component.ts [87:138]
renderChart(chartData: ChartDataItem[] = []) {
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,
borderWidth: 0,
},
],
},
options: {
responsive: true,
animation: {
animateScale: true,
animateRotate: true,
},
plugins: {
legend: {
display: false,
},
title: {
display: false,
},
tooltip: {
enabled: true,
position: 'nearest',
},
},
cutout: '70%',
},
});
this.donutChart.update();
}