# react-donut-chart

An extendable SVG-based donut chart React component.

![Example](https://github.com/vonbearshark/react-donut-chart/raw/main/example.gif)

---

## Installation

`npm install react-donut-chart --save`

---

## Usage

```js
import DonutChart from 'react-donut-chart';

// things I would never do:
<DonutChart
  data={[
    {
      label: 'Give you up',
      value: 25,
    },
    {
      label: '',
      value: 75,
      isEmpty: true,
    },
  ]}
/>;
```

View the demo [online](http://react-donut-chart.netlify.app)

---

## Props

| Name           | Required | Default                                                                                                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data           | true     | <code>[{<br>&nbsp;&nbsp;value: 100,<br>&nbsp;&nbsp;label: '',<br>&nbsp;&nbsp;isEmpty:true<br>}]</code>                                                                                                    | The chart data                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| className      | false    | `donutchart`                                                                                                                                                                                              | This is the `className` given to the top-level `svg` element. All subclasses are prefixed from this name: <ul><li><code>${className}-arcs</code> accesses the entire graph area</li><ul><li><code>${className}-arcs-paths</code> accesses the individual arc paths</li></ul><li><code>${className}-innertext</code> accesses all of the text within the inner donut area</li><ul><li><code>${className}-innertext-label</code> accesses the label within this area</li><li><code>${className}-innertext-value</code> accesses the value within this area</li></ul><li><code>${className}-legend</code> accesses the legend component</li><ul><li><code>${className}-legend</code> accesses the legend rectangle items</li><li><code>${className}-legend-label</code> accesses the labels of the legend items</li></ul></ul> In addition the `selected` class is given to selected items, the `toggled` class to all toggled items, and the `isEmpty` class to all `isEmpty` items. All style (and animations) can be manipulated from the CSS |
| 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