DEV Community

How to create an interactive donut chart using SVG

Mustapha Aouas on December 10, 2021

In this post, we'll make an SVG donut chart with clickable slices/parts. I'll start by explaining the issue with the most common way to implement a...

Read full post

Hasan Daghash • May 19 '22

That's really an interesting article, thank you Mustapha for the great explanation
One drawback I noticed is that in the case of only one segment and it is set to 100% then the path will disappear if it's 99.999 it will work!!

Mustapha Aouas • May 20 '22

Hey Hassan thank you for your feedback.
Good catch indeed! (i’ll edit the post, to mention this :)

Sam Scholefield • Jun 30 '22

Hey Hasan, I just noticed the same thing. The solution below only adjusts the drawing logic, and not the underlying data (so your slices are still accurate). Its ugly, unfortunately I couldn't solve it any more elegantly, but it works for me:

 /**
   * converts percentage to angle
   * @param percent
   * @returns angle as degrees as number
  */
  private percentToDegrees(percent: number): number {
    return percent * 3.6 === 360 ? 359.99 : percent * 3.6
  }

Carlos Aguni • 顾宁 • Feb 13 '22

awesome!!

Saswat Mohanty • Nov 1 '22

nicely explained all the attributes of an svg arc

Ilya Radchenko • Jul 15 '22

Any ideas why my second slice has a droop in the inner arc? I tried all variations of flags :D

<path fill="green" d="
                M 87.15724127386972 16.543469682057086
                A 50 50 0 0 0 3.015368960704585 32.898992833716555
                L 31.206147584281833 43.15959713348662
                A 30 30 0 0 1 64.86289650954788 36.61738787282283
            ">
            <title>slice</title>
        </path>

Mustapha Aouas • Jul 15 '22

Hello there,

I can only guess that the radius of the inner cercle is wrong, it should be 20 instead of 30 (the flags are good ^^) 👇

<path fill="green" d="
                M 87.15724127386972 16.543469682057086
                A 50 50 0 0 0 3.015368960704585 32.898992833716555
                L 31.206147584281833 43.15959713348662
                A 20 20 0 0 1 64.86289650954788 36.61738787282283
            ">
            <title>slice</title>
</path>

Ilya Radchenko • Jul 15 '22

Yes, that was it! How do you understand the radius x/y? Having a hard time with that part conceptually.

Ilya Radchenko • Jul 15 '22

sadiul hakim • Dec 27 '21

That is great!❤

Mustapha Aouas • Dec 27 '21

Thank you 🙏🙏