Error On Chartjs And Angular 5 - "can't Acquire Context From The Given Item"

I need to display a graph in my Angular project. A simple doughnut chart with 3 datasets. When I try to run the project, the console throws the following error: 'Failed to create c

Solution 1:

You only need to add this to the html template

<div [hidden]="!grafico"><canvasid="grafico">{{ grafico }}</canvas></div>

Here is an example of Angular using Chart.JS

Solution 2:

Refer the canvas with template reference in the component where you are creating the chart.

Component (Use static as true if you are generating the chart in ngOnInit):

@ViewChild('grafico',{static:true}) grafico: Chart = []; 

Template (Because if you are using *ngIf , it removes the element from the dom if the condition evaluates to false) :

<div [hidden]="!grafico"><canvasid="grafico">{{ grafico }}</canvas></div>

Further more, you can debug the applicatio and verify if the chart is getting created properly or not.