React-native-donut-chart NPM

React Native Donut Chart

This is a simple donut chart that accepts a data object like the following:

const data = [
  {
    value: 1,
    color: 'brown',
  },
  {
    value: 2,
    color: 'red',
  }, {
    value: 3,
    color: 'green',
  }, {
    value: 4,
    color: 'gold',
  }, {
    value: 5,
    color: 'blue',
  },
]

// ...

Then

import {Donut} from 'react-native-dinut-chart';

<Donut data={data}/>

Props:

Key	Description	Type	Required	Default
data	chart data	Array of objects	True
radius	Radius of the donut chart	number	false	80
fill	The chart fill color can be RGBA	string	false	transparent
strokeWidth	The stroke width of the sections	number	false	10
strokeLinejoin	The shape of the end of the strokes	string	false	round
gap	The gap / distance between the sections	number	false	3
bgStrokeColor	The background stroke for the chart	string	false	green
bgStrokeOpacity	The background stroke opacity	string	false	.1
bgStrokePadding	The additional thickness of the bg stroke	number	false	0