react-svg-donuts

A ReactJS component for simple SVG donut graphs.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-svg-donuts
803.0.05 months ago4 years agoMinified + gzip package size for react-svg-donuts in KB

Readme

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

Demo

TL;DR here is the demo

Dependencies

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

Usage

First install the package
$ npm i react-svg-donuts

# or

$ yarn add react-svg-donuts

Then
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')
		<ComplexDonut
			size={200}
			parts={[
				{
					color: '#FF8A80',
					value: 230
				},
				{
					color: '#FF80AB',
					value: 308
				},
				{
					color: '#B9F6CA',
					value: 520
				},
				{
					color: '#B388FF',
					value: 130
				},
				{
					color: '#8C9EFF',
					value: 200
				}
			]}
			radius={80}
			thickness={40}
			startAngle={-90}
		/>
	</>
);

Props

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 |

CSS

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';

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

LICENSE

MIT
Connect with me:



<a href="https://atanas.info">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg" height="20" alt="">
</a>
 
<a href="mailto:hi@atanas.info">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg" height="20" alt="">
</a>
 
<a href="https://www.linkedin.com/in/scriptex/">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg" height="20" alt="">
</a>
 
<a href="https://github.com/scriptex">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg" height="20" alt="">
</a>
 
<a href="https://gitlab.com/scriptex">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg" height="20" alt="">
</a>
 
<a href="https://twitter.com/scriptexbg">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg" height="20" alt="">
</a>
 
<a href="https://www.npmjs.com/~scriptex">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg" height="20" alt="">
</a>
 
<a href="https://www.youtube.com/user/scriptex">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg" height="20" alt="">
</a>
 
<a href="https://stackoverflow.com/users/4140082/atanas-atanasov">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg" height="20" alt="">
</a>
 
<a href="https://codepen.io/scriptex/">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg" width="20" alt="">
</a>
 
<a href="https://profile.codersrank.io/user/scriptex">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg" height="20" alt="">
</a>
 
<a href="https://linktr.ee/scriptex">
    <img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg" height="20" alt="">
</a>

Support and sponsor my work:

<img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" />
<img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" />
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" />
<img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" />
<img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" />
<img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" />

<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" />
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" />
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" />