I've successfully managed to display a line graph and a bar chart, but for some reason, I'm struggling to display a pie chart or a doughnut chart. Despite going through several tutorials and attempting different solutions, I still can't seem to figure it out!
Below is the code snippet that I'm working with:
html
<div>
<canvas #theDonutCanvas></canvas>
</div>
ts
@ViewChild('theDonutCanvas') private donutCanvas: ElementRef;
donutChart: any;
doTheDonut() {
this.donutChart = new Chart(this.donutCanvas.nativeElement, {
type: 'doughnut',
data: {
labels: ['Solicitado', 'Entregado', 'Faltante'],
datasets: [
{
label: 'test',
data: [
100, 200, 300
],
backgroundColor: ['#0074D9', '#2ECC40', '#FF4136']
}
]
},
options: {
title: {
display: false,
text: 'Color test'
},
legend: {
position: 'left',
display: true,
fullWidth: true,
labels: {
fontSize: 11
}
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}]
}
}
});
}
ngAfterViewInit(): void {
this.doTheDonut();
}
The current issue I'm facing is: ERROR TypeError: Cannot read property 'nativeElement' of undefined