[<img src="https://github.com/Novsochetra/react-native-circular-chart/blob/main/assets/thumbnail.png" width="250"/>](image.png)

[video demo](https://user-images.githubusercontent.com/20807120/109374979-d3250b00-78eb-11eb-8135-9c7cc338ce43.mov)


## React Native Circular Chart Documentation

### Import components

1. `yarn add react-native-circular-chart`
2. `yarn add react-native-svg` install peer dependencies
3. use with ES6 syntax to import components `import { DonutChart } from "react-native-circular-chart";`

### Quick Example
```js
import { DonutChart } from "react-native-circular-chart";

<View style={styles.sectionWrapper}>
  <DonutChart
    data={DATA}
    strokeWidth={15}
    radius={90}
    containerWidth={width - PADDING * 2}
    containerHeight={105 * 2}
    type="round"
    startAngle={0}
    endAngle={360}
    animationType="slide"
  />
</View>

const styles = StyleSheet.create({
  sectionWrapper: {
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderRadius: 8,
    borderColor: "lightgray",
    backgroundColor: "#ffffff",
    marginVertical: 8,

    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
});

```

### Circule Props

| Property                      | Type                 | Description                                                                                            |
| ----------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------ |
| data                          | Array<{name: string; value: number; color: string;}>  | Defines the data for circular                                         |
| containerWidth                | number               | Defines the width of container                                                                         |
| containerHeight               | number               | Defines the height of container                                                                        |
| radius                        | number               | Defines the radius of circular                                                                         |
| startAngle                    | number (degree)      | Defines the start point of the circular. default start from -115 deg                                   |
| endAngle                      | number (degree)      | Defines the start point of the circular. default start from 115 deg                                    |
| strokeWidth                   | number               | Defines the thickness of circular item                                                                 |
| type                          | 'butt', 'round'      | Defines the type of circular item                                                                      |
| animationType                 | 'fade', 'slide'      | Defines the animation type for chart item                                                              |
| labelValueStyle               | StyleProp<TextStyle> | Defines the style for data.value                                                                       |
| labelTitleStyle               | StyleProp<TextStyle> | Defines the style for data.name                                                                        |
| labelWrapperStyle             | StyleProp<ViewStyle> | Defines the style for wrapper of data.value and data.name                                              |
| containerStyle                | StyleProp<ViewStyle> | Defines the style for container of chart                                                               |

### More information
This library is built on top of the following open-source projects:
- react-native-svg (https://github.com/react-native-svg/react-native-svg)