Generate multiple charts via loop for chart js

by

1👍

✅

The issue is, it only shows me 1 chart and it is for the last row only when it should show up for all rows.

body=''; line 23

This line removes all charts created and searched by the renderChart function.
You might want to either remove this line, otherwise the DOMElement you are trying to access will be removed by the time it’s accessed, or use const element = document.createElement('DIV') and append your element to the body and then pass the reference to that object to renderChart(element) to avoid ID generation

👍:0

I figured out issue was with async events I didn’t know about were happening. Only time chart js won’t let you create multiple charts is on the same canvas or if it is previously occupied until you destroy it.

let id = "bar_"+item.id;
setTimeout(()=>{renderChart(id, item.items, item.name);},100)

I did something like this within the above snippet. Issue was the extracting of string concat of id was slower than getElementById, which made getElementById get same one. However I was still getting diff canvas elements on console.log testing, so I don’t 100% understand how solving one issue solved issue of the actual new Chart being created for each unique canvas.

Leave a comment