Travis CI Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

React SVG Donuts

A React component for simple (and complex) SVG donuts.

The current version depends on the Hooks API introduced with React 16.8. If you need legacy React support, please use a 1.x.x version.

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit


TL;DR here is the demo


  1. NodeJS
  2. NPM / Yarn
  3. React and ReactDOM
  4. A ReactJS application


First install the package

$ npm i react-svg-donuts

# or

$ yarn add react-svg-donuts


import React from 'react';

import { Donut, ComplexDonut } from 'react-svg-donuts';

// The donut will be half filled
const progress = 50;

// The value will be wrapped inside a <strong> tag.
const renderProgress = progress => <strong>{progress}%</strong>;

const MyComponent = () => (
		<Donut progress={progress} onRender={renderProgress} />, document.getElementById('demo')
					color: '#FF8A80',
					value: 230
					color: '#FF80AB',
					value: 308
					color: '#B9F6CA',
					value: 520
					color: '#B388FF',
					value: 130
					color: '#8C9EFF',
					value: 200


Donut props

Prop Type Required Default Description
prefix string false 'donut' String used as a prefix for the CSS class names
progress number false 0 A number between 0 and 100
onRender Function false (progress) => {progress} Function which runs after the Donut is rendered and returns a ReactNode

Complex donut props

Prop Type Required Default Description
size number false 160 The width and height of the donut
parts { color: string; value: number; }[] false [] The donut parts
radius number false 60 The radius of the element
className string false '' Custom CSS class name for the Donut
thickness number false 30 Stroke width of the element
textProps SVGProps for SVGTextElement false {} Additional props for the element
startAngle number false -90 Number between -360 and 360
circleProps SVGProps for SVGCircleElement false {} Additional props for the element


There is a predefined stylesheet which can be used as is. If you want it, just import it:

@import 'react-svg-donuts/src/index.css';


import 'react-svg-donuts/src/index.css';



Connect with me:


Support and sponsor my work:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image