angular-chart zero dimensions inside angular-strap panel

Question

I'm trying to render an angular-chart (based on chart.js) chart inside a bootstrap panel. Currently the chart does not swho at all when inside the panel but does show when placed outside the panel. When I view the source in the browser I see the height and width are set to zero.

chart does not display

<div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse>
   <div class="panel panel-default" ng-repeat="experiment in experiments">
      <div class="panel-collapse" role="tabpanel" bs-collapse-target>
         <div class="panel-body">
            <canvas id="pie" class="chart chart-pie"  data="viewCountData" labels="viewCountLabels" options="viewCountOptions" style="height: 50px; width: 50px"></canvas>
         </div>
      </div>
   </div>
</div>

chart DOES display

    <div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse>
       <div class="panel panel-default" ng-repeat="experiment in experiments">
          <div class="panel-collapse" role="tabpanel" bs-collapse-target>
             <div class="panel-body">
             </div>
          </div>
       </div>
    </div>
  <canvas id="pie" class="chart chart-pie"  data="viewCountData" labels="viewCountLabels" options="viewCountOptions" style="height: 50px; width: 50px"></canvas>

Page Source:

Not sure where or why the height and width are getting set to zero. I also have tried setting the height and width in css but still have had no luck.

.chart {
  height: 400px;
  width: 600px;
}
#pie {
  height: 400px;
  width: 600px;
}

I have also tried adjusting the chart options

viewCountOptions = {
    responsive: false,
    maintainAspectRatio: false
};

score 0 · Accepted Answer · answered May 12 '15 at 18:40

After much experimentation I have found a workaround/hack. According to an open issue on the Chart.js github :

This error will also (for good reason) occur if the computed dimensions of the container haven't yet been applied. I got around this by using setTimeout(function () { // chart creation code }, 0);

So, it looks like the dimensions of my panel container weren't getting applied until after the chart was rendered. This resulted in a 0px height when the chart tried to inherit from it's parent container.

To solve this I added a timeout in the controller and a ng-if to the tag so it renders after the timeout completes. In my controller I added :

$timeout(function() {
    $scope.renderChart= true;
    console.log('Rendering chart')
 }, 1000);

My HTML now looks like :

<div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse>
   <div class="panel panel-default" ng-repeat="experiment in experiments">
      <div class="panel-collapse" role="tabpanel" bs-collapse-target>
         <div class="panel-body">
            <canvas ng-if="renderChart" id="pie" class="chart chart-pie"  data="viewCountData" labels="viewCountLabels" options="viewCountOptions"></canvas>
         </div>
      </div>
   </div>
</div>

I also enabled the responsive option just to make things look better...

$scope.viewCountOptions = {
   responsive: true,
   maintainAspectRatio: false
};

Resources: https://github.com/nnnick/Chart.js/issues/592

angular-chart zero dimensions inside angular-strap panel

1 Answers1

Linked