back to projects
react-donut-svg

🍩 A flexible lightweight react donut chart component

npm i -S react-donut-svg
A75%
B100%
C25%
D33%

Light donuts, just 1.7kb

Do you need to show some key indicators in a form of donut chart? I've got your back covered! 💪

Enjoy easy-to-use, responsive, SVG animated donut charts with just 2 steps.

Install

npm install -S react-donut-svg

Usage

import Donut from 'react-donut-svg'
function Chart () {
return (
<Donut value={50} label='name' />
)
}

Props

  • label
  • value
  • color
  • bgColor
  • withGradient
  • rounded
  • delay
  • duration
  • showLabel
string
Text displayed on top of the donut.

Made with 💖 in Barcelona