Discussion on: How to create an interactive donut chart using SVG

[Hasan Daghash]

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]

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

[Sam Scholefield]

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
  }