Roka545 Roka545 - 1 year ago 153
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

in my example is to only show the
's content (which is the chart) once the variable
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 class="panel-body">
<canvas id="myChart" width="325" height="325"></canvas>

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download