react-native-pie
Pie chart for React Native, works on both iOS and Android
Demo
Install
# NPM
npm i --save react-native-pie
OR
# Yarn
yarn add react-native-pieFor react-native-pie >= 1.1.0 install peer dependency
# NPM
npm i --save @react-native-community/art
OR
# Yarn
yarn add @react-native-community/artMigration from react-native-pie <= 0.6.2
Please unlink react-native ART library
Linking module
Mostly automatic linking
If react-native >= 0.60 && react-native-pie >= 1.1.0, the package will be linked automatically.
Manual linking for react-native-pie <= 0.6.2
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
React Native Version Support
If you are using <
.45, please installreact-native-piev0.1.0instead
npm i --save [email protected]
Please use >=
0.50.0-rc.0otherwise there is a ring shape drawing issue withreact-native-pie
Usage
import React from 'react'
import {
StyleSheet,
View,
Text,
} from 'react-native'
import Pie from 'react-native-pie'
export default () => {
return (
<View style={styles.container}>
<View
style={{
paddingVertical: 15,
flexDirection: 'row',
width: 350,
justifyContent: 'space-between',
}}
>
<Pie
radius={80}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
strokeCap={'butt'}
/>
<Pie
radius={80}
innerRadius={50}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
strokeCap={'butt'}
/>
</View>
<View
style={{
paddingVertical: 15,
flexDirection: 'row',
width: 350,
justifyContent: 'space-between',
}}
>
<Pie
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'}
/>
<Pie
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'}
/>
</View>
<View
style={{
paddingVertical: 15,
width: 350,
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Pie
radius={80}
sections={[
{
percentage: 10,
color: '#C70039',
},
{
percentage: 20,
color: '#44CD40',
},
{
percentage: 30,
color: '#404FCD',
},
{
percentage: 40,
color: '#EBD22F',
},
]}
dividerSize={6}
strokeCap={'butt'}
/>
<View style={{ width: 175, alignItems: 'center' }}>
<Pie
radius={80}
innerRadius={75}
sections={[
{
percentage: 60,
color: '#f00',
},
]}
backgroundColor="#ddd"
/>
<View
style={styles.gauge}
>
<Text
style={styles.gaugeText}
>
60%
</Text>
</View>
</View>
</View>
</View>
)
}
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 tobutt- string, optional- PLEASE NOTE If using
strokeCap={'round'}it is highly recommended to use a higherinnerRadius(around 60% ofradiusand higher) in addition to not having very small percentage sections. This will ensure proper display. We hope to address these issues in future PRs
- PLEASE NOTE If using
- dividerSize defaults to
0- percentage size to divide the sections - number, optional
License
MIT