Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/nihgwu/react-native-pie
- Owner: nihgwu
- License: mit
- Created: 2017-02-22T14:19:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-09-07T19:39:32.000Z (about 4 years ago)
- Last Synced: 2024-11-02T09:27:37.298Z (11 days ago)
- Topics: chart, doughnut, gauge, pie-chart, react-native, svg
- Language: JavaScript
- Size: 463 KB
- Stars: 107
- Watchers: 4
- Forks: 25
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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