A customizable Pie Chart library that uses react-native-svg.
npm install react-native-expo-pie-chart
[![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.
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.
View it live: Expo Snack
`jsx
import PieChart from 'react-native-expo-pie-chart';
{
key: 'First Data',
count: 20,
color: 'blue',
},
{
key: 'Second Data',
count: 25,
color: 'yellow',
},
{
key: 'Third Data',
count: 40,
color: 'green',
},
{
key: 'Forth Data',
count: 35,
color: 'orange',
},
]}
length={200}
/>
`
| 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)) | | |
| 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 |
You can use the example app to develop the package.
To link the package in development, You can use 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
``
This project is licensed under the MIT License - see the 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