Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nihgwu/react-native-pie

Pie chart for React Native
https://github.com/nihgwu/react-native-pie

chart doughnut gauge pie-chart react-native svg

Last synced: 5 days ago
JSON representation

Pie chart for React Native

Awesome Lists containing this project

README

        

# react-native-pie

Pie chart for React Native, works on both **iOS** and **Android**

## Demo

![iOS](demo/ios.png)
![Android](demo/android.png)

## Install

```bash
# NPM
npm i --save react-native-pie
OR
# Yarn
yarn add react-native-pie
```

## For react-native-pie >= 1.1.0 install peer dependency
```bash
# NPM
npm i --save @react-native-community/art
OR
# Yarn
yarn add @react-native-community/art
```

## Migration from react-native-pie <= 0.6.2

Please unlink react-native ART library

## Linking module

### Mostly automatic linking

If `react-native` >= 0.60 && react-native-pie >= 1.1.0, the package will be linked automatically.

### Manual linking for react-native-pie <= 0.6.2
Link the ART library to your ReactNative project ([how to link a library](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content)). You'll find the React ART library in `node_modules/react-native/Libraries/ART/ART.xcodeproj`

### React Native Version Support
> **If you are using < `.45`, please install `react-native-pie` `v0.1.0` instead**
> `npm i --save [email protected]`

> **Please use >= `0.50.0-rc.0` otherwise there is a ring shape drawing issue with `react-native-pie`**

## Usage

```jsx
import React from 'react'
import {
StyleSheet,
View,
Text,
} from 'react-native'
import Pie from 'react-native-pie'

export default () => {
return (















60%





)

}

const styles = StyleSheet.create({
container: { alignItems: 'center', justifyContent: 'center', height: 1050 },
gauge: {
position: 'absolute',
width: 100,
height: 160,
alignItems: 'center',
justifyContent: 'center',
},
gaugeText: {
backgroundColor: 'transparent',
color: '#000',
fontSize: 24,
},
})
```

## Props

* **sections** `{percentage, color}` of each section in the pie - array, **required**
* **radius** `radius = size / 2` , - number, **required**
* **innerRadius** defaults to `0` - number, **optional**
* **backgroundColor** defaults to `#fff` - string, **optional**
* **strokeCap** ( `round` , `butt` ) defaults to `butt` - string, **optional**
* **PLEASE NOTE** If using `strokeCap={'round'}` it is highly recommended to use a higher `innerRadius` (around 60% of `radius` and higher) in addition to not having very small percentage sections. This will ensure proper display. We hope to address these issues in future PRs
* **dividerSize** defaults to `0` - percentage size to divide the sections - number, **optional**

## License

MIT