MohamedSaidSallam / react-native-expo-pie-chart

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

Home Page:https://www.npmjs.com/package/react-native-expo-pie-chart

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-native-expo-pie-chart

npm npm npm bundle size GitHub issues Npm Publish Workflow License

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

Example

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

About

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

https://www.npmjs.com/package/react-native-expo-pie-chart

License:MIT License


Languages

Language:TypeScript 66.3%Language:JavaScript 33.7%