title: Add data in pie chart using D3
body: <p>I have an application where I use d3.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  import ReactDOM from "react-dom";
  import * as d3 from "d3";
  
  import Pie from "./PieGraph";
  
  import "./styles.css";
  
  function App() {
    const [data, setData] = useState([
      {
        value: 25
      },
      {
        value: 59
      },
      {
        value: 77
      }
    ]);
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Pie Chart with React &amp; D3&lt;/h1&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div className="piechart"&gt;
          &lt;Pie
            data={data}
            width={200}
            height={200}
            innerRadius={60}
            outerRadius={100}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);</code></pre>
  </div>
  </div>
  </p>
  <p>I want to add additional data in chart near numbers, like:</p>
  <ul>
  <li>25  Apples</li>
  <li>59  Cherry</li>
  <li>77  Cars</li>
  </ul>
  <p>The code for what I have now <a href="https://codesandbox.io/s/react-d3-pie-chart-forked-nd3o4?file=/src/index.js:214-296" rel="nofollow noreferrer">is here</a></p>
  <p>Question: How to add near numbers, inside chart, a text like I described above?</p>