Pie Chart in React Native

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?

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 –

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

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

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close