React Native Donut Chart

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

Installation

1npm i -S @figliolia/rn-donut-chart react-native-svg
2# or
3yarn 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:

1cd ios && pod install

Usage

1<DonutChart
2  delay={0}
3  duration={1500}
4  strokeWidth={12}
5  strokeLinecap="round"
6  style={Styles.yourContrainerStyles}
7  data={[{ 
8    label: "rent", 
9    value: 2000, 
10    stroke: "rgb(228, 69, 69)", 
11    style: Styles.yourSVGStyles // such as shadow and stuff
12  }]}
13  easing={Easing.out(Easing.exp)}
14  onMeasure={(dimensions: number) => {}}>
15  {children}
16</DonutChart>

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