Pie Chart in React Native

ashwini gupta

29 June 2019

In this blog, we create a Pie Chart View. It is an awesome View to display a group of data (different category’s) into a graph. Pie Chart represent data more clear and easy to interpret.

What is Pie Chart?

A pie chart is a circular graph that shows the relative contribution that different categories contribute to an overall total. A wedge of the circle represents each category’s contribution, such that the graph resembles a pie that has been cut into different sized slices. Every 1% contribution that a category contributes to the total corresponds to a slice with an angle of 360 degrees.

What data can be presented using a pie chart?

Pie charts are a visual way of displaying data that might otherwise be given in a small table.
Pie charts are useful for displaying data that are classified into nominal or ordinal categories. Nominal data are categorized according to descriptive or qualitative information such as county of birth or type of pet owned. Ordinal data are similar but the different categories can also be ranked, for example in a survey people may be asked to say whether they classed something as very poor, poor, fair, good, very good.
Pie charts are generally used to show percentage or proportional data and usually, the percentage represented by each category is provided next to the corresponding slice of pie.
Pie charts are good for displaying data for around 6 categories or fewer. When there are more categories it is difficult for the eye to distinguish between the relative sizes of the different sectors and so the chart becomes difficult to interpret.

Now I am moving How we create this Awesome View in our React Naive Application.

I have learned many libraries and find an awesome library “react-native-pie”, It represents our categories Information into Pie Chart Graph.

Installation- npm install react-native-pie

Link- react-native link react-native-pie

Now use it on our Application –

import Pie from "react-native-pie";

1	import Pie from "react-native-pie";

Now the code that returns Pie Chart from render function of Component

 return (
   <View >
     <Pie
       radius={RADIOUS}
       innerRadius={INNER_RADIOUS}
       series={series}
       colors={COLOR}
     />
     <View
       style={{
         position: "absolute",
         width: RADIOUS * 2,
         height: RADIOUS * 2,
         alignItems: "center",
         justifyContent: "center",
         // backgroundColor:"#d0d0d0"
       }}
     >
    {/*  Steps 1st */}
    <View
         style={styles.firstLabel}
     >
       <View style={styles.internalView}>
         <CustomIcon2 name="star-fill" color={COLOR[0]} size={STAR_SIZE} />
         <Text style = {styles.textStyle}>{this.rating[0]}</Text>
       </View>
       <View style={styles.internalView}>
         <CustomIcon2 name="star-fill" color={COLOR[1]} size={STAR_SIZE} />
         <Text style = {styles.textStyle}>{this.rating[1]}</Text>
       </View>
       <View style={styles.internalView}>
         <CustomIcon2 name="star-fill" color={COLOR[2]} size={STAR_SIZE} />
         <Text style = {styles.textStyle}> {this.rating[2]}</Text>
       </View>
      
     </View>
       {/*  Steps 2nd */}
       <View
       style={styles.secondLabel}
     >
       <View style={styles.internalView}>
         <CustomIcon2 name="star-fill" color={COLOR[3]} size={STAR_SIZE} />
         <Text style = {styles.textStyle}>{this.rating[3]}</Text>
       </View>
       <View style={{  flexDirection: "row", alignItems: "center" }}>
         <CustomIcon2 name="star-fill" color={COLOR[4]} size={STAR_SIZE} />
         <Text style = {styles.textStyle}>{this.rating[4]}</Text>
       </View>
      
     </View>
     </View>
  </View>
 );

return (

<View >

<Pie

radius={RADIOUS}

innerRadius={INNER_RADIOUS}

series={series}

colors={COLOR}

<View

style={{

position: "absolute",

width: RADIOUS * 2,

height: RADIOUS * 2,

alignItems: "center",

justifyContent: "center",

// backgroundColor:"#d0d0d0"

}}

{/* Steps 1st */}

<View

style={styles.firstLabel}

<Text style = {styles.textStyle}>{this.rating[0]}</Text>

</View>

<Text style = {styles.textStyle}>{this.rating[1]}</Text>

</View>

<Text style = {styles.textStyle}> {this.rating[2]}</Text>

</View>

{/* Steps 2nd */}

<View

style={styles.secondLabel}

<Text style = {styles.textStyle}>{this.rating[3]}</Text>

</View>

<Text style = {styles.textStyle}>{this.rating[4]}</Text>

</View>

);

In the above example represent Reviews of customer that sent 1 to 5 Rating for a product, I have sent a series of values in percentage and color array for each value to Pie view. and add the description of each value in the center of Pie View as a Star Image and text.

How Does It Look?

Resources-

https://www2.le.ac.uk/offices/ld/resources/numerical-data/pie-charts

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