title: How can I rotate circles in an SVG donut chart?
body: <p>I'm in the process of building a donut chart that is rendered on the server. I got some help in the math around positioning the labels to the center of donut slice <a href="https://stackoverflow.com/questions/56672591/calculating-svg-donut-slice-label-position-server-side">here</a>. That solution works well but I'm having another problem with my chart. I don't know how to rotate each svg circle using my current math formula. I can rotate each slice using <code>stroke-dashoffset</code> but then the text isn't following the slice around the chart.</p>
  
  <blockquote>
    <p>How can I rotate each slice of the donut chart so that they don't
    overlap while still keeping the label in the center of the slice?</p>
  </blockquote>
  
  <p>I <em>think</em> I need to adjust the angle, I'm just unsure how.</p>
  
  <p>Here's what It currently looks like
  <a href="https://i.stack.imgur.com/YQ1JG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQ1JG.png" alt="enter image description here"></a></p>
  
  <p>Here's what I'd like it to look like
  <a href="https://i.stack.imgur.com/M5pYB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M5pYB.png" alt="enter image description here"></a></p>
  
  <p>Here's the code sandbox I'm working out of <a href="https://codesandbox.io/s/goofy-feather-5yyr3" rel="nofollow noreferrer">https://codesandbox.io/s/goofy-feather-5yyr3</a>.</p>