a pie chart for react native
npm install react-native-piePie chart for React Native, works on both iOS and Android
``bash`NPM
npm i --save react-native-pie
ORYarn
yarn add react-native-pie
bash
NPM
npm i --save @react-native-community/art
OR
Yarn
yarn add @react-native-community/art
`Migration from react-native-pie <= 0.6.2
Please unlink react-native ART library
Linking module
$3
If
react-native >= 0.60 && react-native-pie >= 1.1.0, the package will be linked automatically.$3
Link the ART library to your ReactNative project (how to link a library). You'll find the React ART library in node_modules/react-native/Libraries/ART/ART.xcodeproj
$3
> If you are using < .45, please install react-native-pie v0.1.0 instead
> npm i --save react-native-pie@0.1.0> Please use >=
0.50.0-rc.0 otherwise there is a ring shape drawing issue with react-native-pieUsage
`jsx
import React from 'react'
import {
StyleSheet,
View,
Text,
} from 'react-native'
import Pie from 'react-native-pie'export default () => {
return (
style={{
paddingVertical: 15,
flexDirection: 'row',
width: 350,
justifyContent: 'space-between',
}}
>
radius={80}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
strokeCap={'butt'}
/>
radius={80}
innerRadius={50}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
strokeCap={'butt'}
/>
style={{
paddingVertical: 15,
flexDirection: 'row',
width: 350,
justifyContent: 'space-between',
}}
>
radius={80}
innerRadius={60}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
dividerSize={4}
strokeCap={'round'}
/>
radius={80}
innerRadius={60}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
dividerSize={6}
strokeCap={'butt'}
/>
style={{
paddingVertical: 15,
width: 350,
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
radius={80}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
dividerSize={6}
strokeCap={'butt'}
/>
radius={80}
innerRadius={75}
sections={[
{
percentage: 60,
color: '#f00',
},
]}
backgroundColor="#ddd"
/>
style={styles.gauge}
>
style={styles.gaugeText}
>
60%
)
}
const styles = StyleSheet.create({
container: { alignItems: 'center', justifyContent: 'center', height: 1050 },
gauge: {
position: 'absolute',
width: 100,
height: 160,
alignItems: 'center',
justifyContent: 'center',
},
gaugeText: {
backgroundColor: 'transparent',
color: '#000',
fontSize: 24,
},
})
`Props
* sections
{percentage, color} of each section in the pie - array, required
* radius radius = size / 2 , - number, required
* innerRadius defaults to 0 - number, optional
* backgroundColor defaults to #fff - string, optional
* strokeCap ( round , butt ) defaults to butt - string, optional
* PLEASE NOTE If using strokeCap={'round'} it is highly recommended to use a higher innerRadius (around 60% of radius and higher) in addition to not having very small percentage sections. This will ensure proper display. We hope to address these issues in future PRs
* dividerSize defaults to 0` - percentage size to divide the sections - number, optionalMIT