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