title: Insert json data itnto NVD3 Donut Pie using AngularJS
body: <p>Here in the link, the center text is showing "Line One" and "Line Two". However these words are hard coded in the code. I want to run a API, get JSON response and dynamically insert a part of the response in the center text. </p>
  
  <p>How do I achieve <a href="https://codepen.io/MeredithU/pen/LVVoNE" rel="nofollow noreferrer">This shows a donut chart with center text</a> this?</p>
  
  <pre><code>nv.addGraph(function() {
    var donutChart = nv.models
      .pieChart()
      .x(function(d) {
        return d.label;
      })
      .y(function(d) {
        return d.value;
      })
      .showLabels(true)
      .showLegend(false)
      .labelThreshold(0.05)
      .labelType("key")
      .color(["#965251", "#00b3ca", "#7dd0b6", "#e38690", "#ead98b"])
      .tooltipContent(function(key, y, e, graph) {
        return "Custom tooltip string";
      }) // This is for when I turn on tooltips
      .tooltips(false)
      .donut(true)
      .donutRatio(0.35);
  
    // Insert text into the center of the donut
    function centerText() {
      return function() {
        var svg = d3.select("svg");
  
        var donut = svg.selectAll("g.nv-slice").filter(function(d, i) {
          return i == 0;
        });
  
        // Insert first line of text into middle of donut pie chart
        donut
          .insert("text", "g")
          .text("Line One")
          .attr("class", "middle")
          .attr("text-anchor", "middle")
          .attr("dy", "-.55em")
          .style("fill", "#000");
        // Insert second line of text into middle of donut pie chart
        donut
          .insert("text", "g")
          .text("Line Two")
          .attr("class", "middle")
          .attr("text-anchor", "middle")
          .attr("dy", ".85em")
          .style("fill", "#000");
      };
    }
  
    // Put the donut pie chart together
    d3
      .select("#donut-chart svg")
      .datum(seedData())
      .transition()
      .duration(300)
      .call(donutChart)
      .call(centerText())
      .call(pieSlice());
  
    return donutChart;
    [enter image description here][2]
  });
  
  // Seed data to populate donut pie chart
  function seedData() {
    return [{
      label: "One",
      value: 25
    }, {
      label: "Two",
      value: 25
    }, {
      label: "Three",
      value: 25
    }, {
      label: "Four",
      value: 25
    }, {
      label: "Five",
      value: 25
    }];
  }
  </code></pre>