1.0.0 • Published 2 years ago
react-native-expo-pie-chart v1.0.0
react-native-expo-pie-chart
A customizable Pie Chart library that uses react-native-svg. Can be used for react native & expo.
Installation
Install using npm
npm i react-native-expo-pie-chartPlease Note: react-native-svg is required as peer dependencies. Install it according to their documentation.
Usage
View it live: Expo Snack
import PieChart from 'react-native-expo-pie-chart';
<PieChart
data={[
{
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}
/>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 docs)) | ||
| gProps | GProps | props for the g component (read react-native-svg docs)) | ||
| circleProps | CircleProps | props for the circle component (read react-native-svg 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. Read through the installation and usage section in Yalc's documentation or use the following lines for a quick start:
npm i yalc -g
yalc publish
cd example
yalc add react-native-expo-pie-chart
npm installLicense
This project is licensed under the MIT License - see the LICENSE file for details