[Chartjs]-How to use chartjs graph in a *ngFor loop

1👍

you can use a viewChildren or viewChild link to canvas tag to have a list of all canvas on looping side

in the html :

<canvas #canvas width="200" height="150"></canvas> 

you have two situation if your component directly have the *ngFor and the canvas element

in the controller

@ViewChildren('canvas') canvasList: QueryList<ElementRef>

in the function where you need to manipulate canvas

 this.canvasList.toArray().forEach(canvas => {
    const ctx = canvas.getContext("2d");
    //other code on one canvas
});

if your canvas is inside a child component you have the ViewChild directive to manipulate it

in the child controller

@ViewChild('canvas') canvas: ElementRef

in the child function where you need to manipulate canvas

    const ctx = this.canvas.getContext("2d");
    //other code on one canvas

Leave a comment