Roka545 Roka545 - 4 months ago 36
HTML Question

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? Any idea on how to make the chart display? The point of the

ngIf
in my example is to only show the
panel-body
's content (which is the chart) once the variable
chartData
has been populated.

Here's my chart code (I've commented out the ngIf div):

<!--<div *ngIf="chartData.length">-->
<div class="panel panel-primary" style="border-color: #464646;">
<div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
<div style="float: left; margin-top: 5px;">Line Chart</div>
</div>

<div class="panel-body">
<div>
<canvas id="myChart" width="325" height="325"></canvas>
</div>
</div>
</div>
<!--/div>-->

Answer

#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.