title: Customizing Donut chart
body: <p>I am trying to build a donut chart</p>
  <p>I want a design similar  the following image where the values are shown in between the coloured pie</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 DonutChart from 'react-d3-donut';
  
      let data = [{
        count: 20    ,  
        color: "red"  ,
        name: 'My name' 
        },{
          count:30,
          color:"green",
          name:"yeys"
        },{
          count:20,
          color:"orange",
          name:"yeys"
        }]
        &lt;DonutChart
  innerRadius={90}
  outerRadius={100}
  transition={true}
  svgClass="example1"
  pieClass="pie1"
  displayTooltip={true}
  strokeWidth={3}
  data={data} /&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/WIJUq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WIJUq.png" alt="are there any other libraries that helps me in building this design" /></a></p>