Start a Project

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

Exit mobile version