0

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 here. 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 stroke-dashoffset but then the text isn't following the slice around the chart.

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?

I think I need to adjust the angle, I'm just unsure how.

Here's what It currently looks like enter image description here

Here's what I'd like it to look like enter image description here

Here's the code sandbox I'm working out of https://codesandbox.io/s/goofy-feather-5yyr3.

Dennis Martinez
  • 6,344
  • 11
  • 50
  • 67
  • The easiest is to use transform matrix on a `` object covering all the stuff you want to rotate so slice and its text ... take a look at this [Getting SVG d after transform](https://stackoverflow.com/a/50406130/2521214) – Spektre Jun 20 '19 at 06:28
  • In this example the easiest way to do it would be setting a `stroke-dashoffset` of 25% for the second circle. However if what you have in mind is a pie chart I would do it in a different way. Instead of using dashes I would draw a path for every slice. – enxaneta Jun 20 '19 at 07:28
  • But the rotate transform will rotate the texts as well .. – tornord Jul 10 '19 at 17:15

0 Answers0