angularjs-nvd3-directives legend coloring not working when inside ng-if

Question

I have a web app that does some summing of values and then is supposed to plot these values in a pie chart, I have some problems concerning the legend colors of this chart.

Summing:

The sum's are attached to each objects in the categories array after it has iterated a lot of different objects that contribute to said sum:

    // Find a list of Categories
    $scope.find = function() {
      var that = this;
      Categories.query().$promise.then(function(categories){
        that.categories=categories;

        categories.forEach(function(category){
          getExpensesForCategory(category._id, 8).then(function(cashflows){
            category.sum = getTotalCashflowSum(cashflows); //<- sum is attached
          });
        });
      });
    };

View:

I my view I am making two pie charts: One pie chart for amount: which is an attribute of each category from the start.

One Pie chart for the sum of expenses in each category, as mentioned above. I have to wait for the summing to be completed otherwise my sum might be undefined, therefore i add an ng-if to make sure the last sum has been appended (see code below, the second chart).

<div class=" well" style="text-align: center" >
    <div class="pie-group" >
    <h3>Budget distribution:</h3>
    <nvd3-pie-chart
            data="categories"
            id="budgetPie"
            width="350"
            height="350"
            x="xBudget()"
            y="yBudget()"
            showLegend="true"
            color="colorFunction()"
            legendColor="colorFunction()"
            >
        <svg height="250"></svg>
    </nvd3-pie-chart>
    </div>

    <div class="pie-group" data-ng-if="categories[categories.length-1].sum!==undefined">
    <h3>Actual consumption:</h3>
    <nvd3-pie-chart
            data="categories"
            id="consumptionPie"
            width="350"
            height="350"
            x="xConsumption()"
            y="yConsumption()"
            showLegend="true"
            color="colorFunction()"
            legendColor="colorFunction()"
            >
        <svg height="250"></svg>
    </nvd3-pie-chart>
</div>
</div>

Summing not completed before rendering: Undefined values

If I remove the ng-if i seem to get undefined on some of the categories sum attributes in the pie chart. This makes the piechart fail to render properly. I assume this is due to the fact that the summing is not completed upon rendering the chart.

NG-IF to delay rendering of chart

However with or without ng-if on the second pie chart, the legends are all black on the second chart. It also fails for my second chart even if I add my own color function to set the legendColor. legendColor="colorFunction()". The charts however are rendered, only the legends are black.

Here are the methods I am calling from my view to setup the charts:

$scope.xBudget = function(){ return function(d) { return d.name+': '+d.amount ; }; };

  $scope.xConsumption = function(){
    return function(d) {
      return d.name+': '+d.sum ;
    };
  };

  $scope.yBudget = function(){
    return function(d){
      return d.amount;
    };
  };

  $scope.yConsumption = function(){
    return function(d){
      return d.sum;
    };
  };

  var colorArray = ['#FF0000', '#0000FF', '#FFFF00', '#00FFFF'];
  $scope.colorFunction = function() {
    return function(d, i) {
      return colorArray[i];
    };
  };

If i add the ng-if to my first chart it also fails to color the legends for me:

Has anybody had a similar experience or just happen to have an idea of what's going on?

Answer 1

I just add:

$scope.chart.display = true;

<div ng-if="chart.display">
    <nvd3-pie-chart
        data="exampleData"
        id="exampleId"
        ...

in you fiddle.

It seems ok.

fiddle