Angular-chart zero dimensions inside angular-strap panel

by

0👍

✅

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

Leave a comment