title: CSS Styling Pie Chart / Doughnut chart
body: <p>I'm using Recharts to try to accomplish a doughnut chart with rounded segments, which should end by looking more or less like this:
  <img src="https://i.stack.imgur.com/AZR92.png" alt="" /></p>
  <p>This is the closest I can achieve, but as you can see I'm running into some problems:
  <img src="https://i.stack.imgur.com/OKCql.png" alt="" /></p>
  <p>First, the first segment is overlapping the others at both edges. I don't know how to correct that despite my searches.<br>
  Next, I'm struggling with aligning the legend properly. I found no way to define a width to svg text so long text would go to the next line. (These texts are contained into variables and not hardcoded)</p>
  <p>This is my <code>chart.js</code>. I cropped some parts to make it simpler, but I'll post the whole thing if needed.</p>
  <pre class="lang-js prettyprint-override"><code>const renderLabelContent = (props) =&gt; {
    const { value, title, x, y, midAngle } = props;
    return (
      &lt;g transform={`translate(${x}, ${y})`} textAnchor={'start'}&gt;
        &lt;text x={(midAngle &lt; -90 || midAngle &gt;= 90) ? (0 - (title.length * 3)) : 0} y={0}
          {`${title}`}
        &lt;/text&gt;
        &lt;text x={(midAngle &lt; -90 || midAngle &gt;= 90) ? (0 - (title.length * 3)) : 0} y={20}&gt;
          {`${value}`}€
        &lt;/text&gt;
      &lt;/g&gt;
    );
  };
  ...
  export default class Chart extends Component {
  ...
    render() {
      return (
        &lt;div className=&quot;pie-charts&quot;&gt;
          &lt;div className=&quot;pie-chart-wrapper&quot;&gt;
            &lt;PieChart width={400} height={400}&gt;
              &lt;Pie
                stroke=&quot;none&quot;
                legendType=&quot;circle&quot;
                data={this.state.data}
                dataKey=&quot;value&quot;
                startAngle={180}
                endAngle={-180}
                cornerRadius={100}
                innerRadius={60}
                outerRadius={80}
                label={renderLabelContent}
                paddingAngle={-10}
                labelLine={false}
                isAnimationActive={true}
              &gt;
                {
                  data.map((entry, index) =&gt; (
                    &lt;Cell key={`slice-${index}`} fill={entry.color} /&gt;
                  ))
                }
                &lt;Label width={50} position=&quot;center&quot;&gt;
                  2,87€
                &lt;/Label&gt;
              &lt;/Pie&gt;
            &lt;/PieChart&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>