Chart.js Chart Does Not Display When Inside An Ngif.

I have a simple scatter line chart within a bootstrap panel created with Chart.js. It works/displays perfectly fine until I put it inside an ngIf div. Has anyone come across this?

Solution 1:

#myChart is not present in the DOM when you're trying to initialize the chart. Try with ng-show instead of ng-if.

Anyhow, it loook like you're not initializing the chart from the controller once the data is populated, like you should do.

Hope it helps.

Solution 2:

you have to create the Chart object only after the div is created, so call the function that create the Chart on the same place where you change the chartData.length instead of calling it right after the component is created