title: recharts pie chart w/ value labels inside
body: <p>using the recharts library, i'd love to create a donut chart like this:
  <a href="https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/" rel="noreferrer">https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/</a></p>
  
  <p>specifically, the value labels are inside the pie chart segments. the only example i can find in the docs uses a custom renderLabel, but i was hoping with the new label component, this would be easier:
  <a href="http://recharts.org/en-US/examples/PieChartWithCustomizedLabel" rel="noreferrer">http://recharts.org/en-US/examples/PieChartWithCustomizedLabel</a></p>
  
  <p>and following this example, this is the closest i can get, but the labels are not centered:
  <a href="https://i.stack.imgur.com/DiMSq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DiMSq.png" alt="enter image description here"></a></p>
  
  <p>here is the the new Label component docs. i've tried: 
  <code>&lt;Label position="inside /&gt;</code></p>
  
  <p>here is the code for customLabelRendering:</p>
  
  <pre><code>const RADIAN = Math.PI / 180;
  const renderCustomizedLabel = ({
    cx, cy, midAngle, innerRadius, outerRadius, percent, index,
  }) =&gt; {
     const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
    const x = cx + radius * Math.cos(-midAngle * RADIAN);
    const y = cy + radius * Math.sin(-midAngle * RADIAN);
  
    return (
      &lt;text x={x} y={y} fill="white" textAnchor={x &gt; cx ? 'start' : 'end'} dominantBaseline="central"&gt;
        {`${(percent * 100).toFixed(0)}%`}
      &lt;/text&gt;
    );
  };
  </code></pre>