https://github.com/alexfigliolia/react-native-donut-chart

donut-chart react-native

Last synced: 2 months ago
JSON representation

An animated donut/pie chart library

README

# React Native Donut Chart
A React Native library for creating responsive donut charts that animate when data changes

![Screenshot](media/donut.gif)

## Installation

```bash
npm i -S @figliolia/rn-donut-chart react-native-svg
# or
yarn add @figliolia/rn-donut-chart react-native-svg
```

If you did not already have `react-native-svg` installed, go ahead and link the native libraries:

```bash
cd ios && pod install
```

## Usage
```tsx
{}}>
{children}

```

### Options

`delay?`: A millisecond duration to delay the animation. Defaults to `0`

`duration?`: A milliscond duration for the animation. Defaults to `1500`

`easing?`: An easing function for your animation. Defaults to `cubic-bezier(0.16, 1, 0.3, 1)` or React Native's `Easing.out(Easing.exp)`

`data`: Data to supply the chart's sections

`strokeWidth?`: The width of the donut arcs. Defaults to `25`

`strokeLinecap?`: A line cap style - `round`, `square`, or `butt`. Defaults to `round`

`style?`: Styles for the View containing your graph

`onMeasure?`: A callback invoked with the resolved dimensions of your graph, useful if using responsive sizes

`children`?: React Node's for adding UI elements to your graph