Search code examples
svgpie-chart

piechart using svg and react

I created a pie chart in React using the svg pattern from this tutorial https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

With four pieces I have

For all four pieces: stroke-dasharray: 25, 100;

For each piece I also have: stroke-dashoffset: 0;, stroke-dashoffset: -25;, stroke-dashoffset: -50; and stroke-dashoffset: -75;

Problem is I get a gap between the first and the last piece so the pieces does not fully fill the circle.

enter image description here

Solution

  • I managed to figure out the answer by looking at this similar thread SVG circle has a gap

    It turned out I had a radius of 16 the full circle was more than 100%. Setting stroke-dasharray: 100,53and dividing my radius by 1.0053 helped.