Chartjs-How to populate multiple charts dynamically with Chart.js in Typescript

by

0👍

✅

I have not figured out how the get things to work with a QueryList. But I found a way to avoid them. For that I introduced an additional div on the HTML page with an unique id.

<div #canvases>
    <canvas *ngFor="let d of data" 
    style="position:relative, width: 15vh, height: 40vw"></canvas>
</div>

I then again used a ViewChild but this time binding the div

@ViewChild('canvases') canvases: ElementRef<HTMLElement>

When populating the charts I used a loop and accessed the children of the div which are the individual canvases.

let index = 0
for(let d of this.data){
    let individualCanvas = this.canvases.nativeElement.children.item(index)

    let newChart = new Chart(individualCanvas, {
        type: 'line',
        ...
    })

    index++
}

Leave a comment