https://github.com/scriptex/react-svg-donuts
SVG donut component for React
https://github.com/scriptex/react-svg-donuts
donut-chart react-component svg-donuts
Last synced: 4 months ago
JSON representation
SVG donut component for React
- Host: GitHub
- URL: https://github.com/scriptex/react-svg-donuts
- Owner: scriptex
- License: mit
- Created: 2018-10-31T05:59:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-30T12:25:12.000Z (about 1 year ago)
- Last Synced: 2024-05-02T06:13:52.245Z (about 1 year ago)
- Topics: donut-chart, react-component, svg-donuts
- Language: TypeScript
- Homepage: https://react-svg-donuts.atanas.info/
- Size: 4.87 MB
- Stars: 7
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/scriptex/react-svg-donuts)
[](https://github.com/scriptex/react-svg-donuts/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/react-svg-donuts/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/react-svg-donuts&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-react-svg-donuts-master)
[](https://www.codefactor.io/repository/github/scriptex/react-svg-donuts)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/react-svg-donuts/)
# 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
## Code stats
## Demo
TL;DR [here is the demo](https://react-svg-donuts.atanas.info/)
## Dependencies
1. NodeJS
2. NPM / Yarn
3. React and ReactDOM
4. A ReactJS application
## Usage
First install the package
```sh
$ npm i react-svg-donuts
# or
$ yarn add react-svg-donuts
```
Then
```javascript
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 tag.
const renderProgress = progress => {progress}%;
const MyComponent = () => (
<>
, document.getElementById('demo')
>
);
```
## 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:
```css
@import 'react-svg-donuts/src/index.css';
```
or
```javascript
import 'react-svg-donuts/src/index.css';
```
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
