How to customize legend text in pie chart for angular-nvd3?

1
votes

I have a pie chart in angular-nvd3. https://krispo.github.io/angular-nvd3/#/pieChart The issue I have is with a pie chart, I have 5 slices, when all the pie slices are labeled, it looks very scrunched together. I want to instead modify the legend so that instead of just displaying the keys, I want to show:

<key> + <number of records in that key>

Using "labelType" I can change what is shown on the labels of the slices pie chart, but how can I change what is shown in the legend?

1
d3.jsnvd3.jsangular-nvd3

1 Answers

3
votes

Could not find anything in the API to do this.

But here is a bit of hack to do it via d3:

After render

1) get all the text DOM

2) run a for loop on all the text.

3) get the text's data and change the inner HTML.

  dispatch: {
    renderEnd: function(e) {
      //for each text
      d3.selectAll(".nv-legend text")[0].forEach(function(d){
        //get the data
        var t= d3.select(d).data()[0];
        //set the new data in the innerhtml
        d3.select(d).html(t.key + " - " + t.y);
      });
    }
  }

working code here