Hello friends, In today’s tutorial we would learn about Pie chart in react native. Pie chart is a type of graph which usages circle and the circle is divided into multiple sectors. Each sectors represents a type of value in percentage. In react native we can use react-native-pie NPM package to create beautiful pie chart for showing data into chart format. So in this tutorial we would learn about Example of Creating Pie Chart in React Native Android iOS App.
Contents in this project Example of Creating Pie Chart in React Native Android iOS App :-
1. The first step is to download and install the react-native-pie NPM package in our react native project. So open your project directory in Command Prompt in Windows and Terminal in MAC and execute below command to install it.
|
1
|
npm i —save react–native–pie
|
Screenshot :-
2. Now we have to install react-native-community/art NPM package also. This package is required to use the Pie chart. Execute below command to install the ART package.
|
1
|
npm i —save @react–native–community/art
|
3. Now friends our project is ready to use in android but for iOS we have to install the PODS to link the library with iOS react native project. So execute below command in MAC only for iOS. Now you use to use the cd .. command to go back into the main react native project directory.
4. Now our project is ready to use. Next and main step is to open the project’s main App.js file and import SafeAreaView, StyleSheet, View and Text component.
|
1
2
3
|
import React from ‘react’;
import { SafeAreaView, StyleSheet, View, Text } from ‘react-native’;
|
5. Import Pie component from react-native-pie package.
|
1
|
import Pie from ‘react-native-pie’;
|
6. In this project it is showing us a Yellow box console warning message. To hide the message we would use disable yellow box code.
|
1
|
console.disableYellowBox = true;
|
7. Creating our main export default App component class.
|
1
2
3
4
5
|
export default function App() {
}
|
8. Creating return() block. Now here we would create 6 different type of Pie chart using Pie component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.MainContainer}>
<Text style={styles.text}>
Pie Chart in React Native Example
</Text>
<View style={styles.row}>
<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}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={‘butt’}
innerRadius={60}
/>
</View>
<View style={styles.row}>
<Pie
radius={80}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={’round’}
innerRadius={60}
dividerSize={4} />
<Pie
radius={80}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={‘butt’}
innerRadius={60}
dividerSize={6}
/>
</View>
<View style={styles.row}>
<Pie
radius={80}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={‘butt’}
dividerSize={6}
/>
<View style={{ width: 160, alignItems: ‘center’ }}>
<Pie
radius={80}
innerRadius={75}
sections={[
{
percentage: 60,
color: ‘green’,
},
]}
backgroundColor=“#ddd”
/>
<View style={styles.gauge} >
<Text style={styles.gaugeText}> 60% </Text>
</View>
</View>
</View>
</View>
</SafeAreaView>
);
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor:‘white’
},
text: {
fontSize: 24,
textAlign: ‘center’,
fontWeight: ‘bold’
},
row: {
paddingVertical: 17,
flexDirection: ‘row’,
width: 330,
justifyContent: ‘space-between’,
},
gauge: {
position: ‘absolute’,
width: 100,
height: 160,
alignItems: ‘center’,
justifyContent: ‘center’,
},
gaugeText: {
backgroundColor: ‘transparent’,
color: ‘#000’,
fontSize: 24,
},
});
|
10. Complete Source Code for App.js file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
import React from ‘react’;
import { SafeAreaView, StyleSheet, View, Text } from ‘react-native’;
import Pie from ‘react-native-pie’;
console.disableYellowBox = true;
export default function App() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.MainContainer}>
<Text style={styles.text}>
Pie Chart in React Native Example
</Text>
<View style={styles.row}>
<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}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={‘butt’}
innerRadius={60}
/>
</View>
<View style={styles.row}>
<Pie
radius={80}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={’round’}
innerRadius={60}
dividerSize={4} />
<Pie
radius={80}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={‘butt’}
innerRadius={60}
dividerSize={6}
/>
</View>
<View style={styles.row}>
<Pie
radius={80}
sections={[
{ percentage: 10, color: ‘#C70039’ },
{ percentage: 20, color: ‘#44CD40’ },
{ percentage: 30, color: ‘#404FCD’ },
{ percentage: 40, color: ‘#EBD22F’ }]}
strokeCap={‘butt’}
dividerSize={6}
/>
<View style={{ width: 160, alignItems: ‘center’ }}>
<Pie
radius={80}
innerRadius={75}
sections={[
{
percentage: 60,
color: ‘green’,
},
]}
backgroundColor=“#ddd”
/>
<View style={styles.gauge} >
<Text style={styles.gaugeText}> 60% </Text>
</View>
</View>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor:‘white’
},
text: {
fontSize: 24,
textAlign: ‘center’,
fontWeight: ‘bold’
},
row: {
paddingVertical: 17,
flexDirection: ‘row’,
width: 330,
justifyContent: ‘space-between’,
},
gauge: {
position: ‘absolute’,
width: 100,
height: 160,
alignItems: ‘center’,
justifyContent: ‘center’,
},
gaugeText: {
backgroundColor: ‘transparent’,
color: ‘#000’,
fontSize: 24,
},
});
|
Screenshot :
Also Read :
React Native Material Bottom Navigation View for Android iOS Example
Render Raw HTML Code in React Native App Using WebView
How to Create Custom Circle Round Oval Shape View in React Native
React Native Latest Function Component Example Tutorial
React Native Create Android Like Fragment for Android iOS Example Tutorial
