Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohamedsaidsallam/react-native-expo-pie-chart
A customizable Pie Chart library that uses react-native-svg. Can be used for react native & expo.
https://github.com/mohamedsaidsallam/react-native-expo-pie-chart
eslint expo-package npm npm-module npm-package pie-chart piechart prettier react-native react-native-package react-native-svg rollup
Last synced: 1 day ago
JSON representation
A customizable Pie Chart library that uses react-native-svg. Can be used for react native & expo.
- Host: GitHub
- URL: https://github.com/mohamedsaidsallam/react-native-expo-pie-chart
- Owner: MohamedSaidSallam
- License: mit
- Created: 2022-02-25T22:43:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-02-27T14:02:12.000Z (over 2 years ago)
- Last Synced: 2024-11-09T14:03:04.336Z (8 days ago)
- Topics: eslint, expo-package, npm, npm-module, npm-package, pie-chart, piechart, prettier, react-native, react-native-package, react-native-svg, rollup
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-expo-pie-chart
- Size: 367 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-expo-pie-chart
[](https://www.npmjs.com/package/react-native-expo-pie-chart)
[](https://www.npmjs.com/package/react-native-expo-pie-chart)
[](https://www.npmjs.com/package/react-native-expo-pie-chart)
[](https://github.com/TheDigitalPhoenixX/react-native-expo-pie-chart/issues)
[](https://github.com/TheDigitalPhoenixX/react-native-expo-pie-chart/actions)
[![License][license-image]][license-url]
A customizable Pie Chart library that uses [react-native-svg][react-native-svg-link]. Can be used for react native & expo.
## Installation
Install using npm
```bash
npm i react-native-expo-pie-chart
```
> Please Note: [react-native-svg][react-native-svg-link] is required as peer dependencies. Install it according to their documentation.
## Usage
View it live: [Expo Snack](https://snack.expo.dev/@digitalphoenixx/7dfecf)
```jsx
import PieChart from 'react-native-expo-pie-chart';
```
## Props
| Name | Type | Description | Required | Default |
| :------------------: | :---------: | ------------------------------------------------------------------------------------- | :------: | :-------: |
| data | dataItem[] | | ✓ | |
| length | number | the side length of the bounding square | | 150 |
| rotation | number | rotation of the pie chart | | -90 |
| zeroTotalCircleColor | string | the color of the complete circle to display if the total of data.count is zero | | '#F1F6F9' |
| containerProps | ViewProps | props for wrapper view component | | |
| svgProps | SvgProps | props for the svg component (read [react-native-svg][react-native-svg-link] docs)) | | |
| gProps | GProps | props for the g component (read [react-native-svg][react-native-svg-link] docs)) | | |
| circleProps | CircleProps | props for the circle component (read [react-native-svg][react-native-svg-link] docs)) | | |
### Data Item
| Name | Type | Description |
| :---: | :----: | --------------------------------------- |
| color | string | the color of this item in the pie chart |
| count | number | the value of this item |
| key | string | unique key representing this item |
## Developing
You can use the ``example`` app to develop the package.
To link the package in development, You can use [Yalc](https://github.com/wclr/yalc). Read through the ``installation`` and ``usage`` section in Yalc's documentation or use the following lines for a quick start:
```bash
npm i yalc -g
yalc publish
cd example
yalc add react-native-expo-pie-chart
npm install
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
[license-image]: https://img.shields.io/badge/License-MIT-brightgreen.svg
[license-url]: https://opensource.org/licenses/MIT
[react-native-svg-link]: https://github.com/react-native-svg/react-native-svg