MohamedSaidSallam / react-native-expo-pie-chart

A customizable Pie Chart library that uses react-native-svg. Can be used for react native & expo.

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-chart

Please 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 install

License

This project is licensed under the MIT License - see the LICENSE file for details