https://github.com/vonbearshark/react-donut-chart
An extendable SVG donut chart React component
https://github.com/vonbearshark/react-donut-chart
chart react svg
Last synced: 6 months ago
JSON representation
An extendable SVG donut chart React component
- Host: GitHub
- URL: https://github.com/vonbearshark/react-donut-chart
- Owner: vonbearshark
- Created: 2016-07-06T15:46:59.000Z (about 10 years ago)
- Default Branch: main
- Last Pushed: 2024-01-07T08:38:45.000Z (over 2 years ago)
- Last Synced: 2025-08-23T18:24:54.108Z (11 months ago)
- Topics: chart, react, svg
- Language: TypeScript
- Homepage: https://react-donut-chart.netlify.app
- Size: 2.72 MB
- Stars: 28
- Watchers: 2
- Forks: 23
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-donut-chart
An extendable SVG-based donut chart React component.
---
## Installation
`npm install react-donut-chart --save`
---
## Usage
```js
import DonutChart from 'react-donut-chart';
// things I would never do:
;
```
View the demo [online](http://react-donut-chart.netlify.app)
---
## Props
| Name | Required | Default | Description |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data | true | [{
value: 100,
label: '',
isEmpty:true
}] | The chart data |
| className | false | `donutchart` | This is the `className` given to the top-level `svg` element. All subclasses are prefixed from this name:
-
${className}-arcsaccesses the entire graph area -
${className}-arcs-pathsaccesses the individual arc paths -
${className}-innertextaccesses all of the text within the inner donut area -
${className}-innertext-labelaccesses the label within this area -
${className}-innertext-valueaccesses the value within this area -
${className}-legendaccesses the legend component -
${className}-legendaccesses the legend rectangle items -
${className}-legend-labelaccesses the labels of the legend items
| height | false | `500` | Height of the entire component |
| width | false | `750` | Width of the entire component. If no legend is specified, then the chart takes up the entire width. If a legend is toggled, then the chart takes up 2/3 of the width, and the legend takes up 1/3 |
| colors | false | `['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#607d8b' ]` | An array of colors (could be hex strings or named colors) for the data items. Defaults to an array of Google colors |
| emptyColor | false | `'#e0e0e0'` | A color for empty data items, defaults to gray |
| strokeColor | false | `'#212121'` | A color for the stroke around the items in the graph and legend, defaults to black |
| colorFunction | false | `(colors, index) => colors[(index % colors.length)]` | The default cycles through the array of colors and loops for excess |
| innerRadius | false | `0.70` | The inner donut radius |
| outerRadius | false | `0.90` | The outer donut radius |
| selectedOffset | false | `0.03` | The `outerRadius` offset when an item is selected |
| emptyOffset | false | `0.08` | The `innerRadius` and `outerRadius` offset on `isEmpty` items |
| toggledOffset | false | `0.04` | The `innerRadius` and `outerRadius` offset on toggle-clicked items |
| formatValues | false | `` (values, total) => `${(values / total * 100).toFixed(2)}%` `` | Custom format for values displayed in the donut chart's inner text area. By default formats as percentages rounded to two decimal places. |
| onMouseEnter | false | `(item) => item` | Callback that fires when an item is hovered |
| onMouseLeave | false | `(item) => item` | Callback that fires when an item is unhovered |
| onClick | false | `onClick: (item, toggled) => (toggled ? item : null)` | Callback that fires when an item is toggle-clicked |
| legend | false | `true` | Determines whether or not to create a legend |
| clickToggle | false | `true` | Determines whether or not to toggle-freeze the graph on the arc that has been clicked |
| interactive | false | `true` | Determines whether to add interactive handlers |
---
## Changelog
### 1.3.0
- Add `interactive` prop
### 1.2.0
- New module infrastructure
- Typescript
###
...
### 1.1.7
- Updated dependencies for bug fixes
- Updated linting
###
...
### 1.0.3
- Bug fixes when no data present and when 100%.
### 1.0.2:
- No legend offset by default
- Hacking for condition of 100%.
### 1.0.1:
- Adding lib dist build process to fix importing/
### 1.0.0:
- Initial release with demo