Create Rounded Circular Progress Chart in React Native

Hello guys, From past few days we have been posting various types of Charts tutorial in our website. Today we would also learn about another Chart tutorial known as Rounded Progress Chart. We would use react-native-chart-kit NPM package in our tutorial to make Progress Chart. So in this tutorial we would learn about How to Create Rounded Circular Progress Chart in React Native Android iOS Example.

Contents in this project Create Rounded Circular Progress Chart in React Native Android iOS Example :-

1. First of all we’ve to install react-native-chart-kit and its supporting react-native-svg NPM package in our project. So open your project’s Root location in Command Prompt or Terminal and execute below commands.

<br />
npm install react-native-chart-kit –save

1	npm install react–native–chart–kit —save

<br />
npm install react-native-svg –save

1	npm install react–native–svg —save

2. Friends, 2nd step is only for iOS users only. We have to install the PODS to link the library to the project. So execute below command in MAC only for iOS project.

<br />
cd ios && pod install && cd ..

1	cd ios && pod install && cd ..

3. Now we can start coding for the app. Open your project’s main App.js file and import View, StyleSheet, Text and Dimensions component.

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Text, Dimensions } from ‘react-native’;

import React from ‘react’;

import { View, StyleSheet, Text, Dimensions } from ‘react-native’;

4. Importing ProgressChart from “react-native-chart-kit” package.

<br />
import { ProgressChart } from “react-native-chart-kit”;

1	import { ProgressChart } from “react-native-chart-kit”;

5. Creating a Constant variable named as screenWidth and here with the help of Dimensions API we would calculate the Width of Screen.

<br />
const screenWidth = Dimensions.get(“window”).width;

1	const screenWidth = Dimensions.get(“window”).width;

6. Creating our main Export default App component.

<br />
export default function App() {</p>
<p>}

export default function App() {

}

7. Creating a constant named as data. In this constant we would define the Chart labels and chart values.

<br />
  const data = {<br />
  labels: [“Apple”, “Banana”, “Cherry”], // optional<br />
  data: [0.2, 0.5, 0.8]<br />
};

const data = {

labels: [“Apple”, “Banana”, “Cherry”], // optional

data: [0.2, 0.5, 0.8]

};

8. Crating return() block, Now we would make the ProgressChart component here.

<br />
  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      <ProgressChart<br />
        data={data}<br />
        width={ screenWidth – 15 }<br />
        height={220}<br />
        chartConfig={{<br />
          //backgroundColor: ‘#478438’,<br />
          backgroundGradientFrom: ‘#FFF8E1’,<br />
          backgroundGradientTo: ‘#FFF8E1’,<br />
          //decimalPlaces: 2,<br />
          color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,<br />
        }}<br />
        style= {{<br />
          borderRadius: 15,<br />
        }}<br />
      /></p>
<p>      <Text style={{ fontSize: 28, textAlign: ‘center’ }}> Progress Chart in React Native </Text></p>
<p>    </View><br />
  );

return (

<ProgressChart

data={data}

width={ screenWidth – 15 }

height={220}

chartConfig={{

//backgroundColor: ‘#478438’,

backgroundGradientFrom: ‘#FFF8E1’,

backgroundGradientTo: ‘#FFF8E1’,

//decimalPlaces: 2,

color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,

}}

style= {{

borderRadius: 15,

}}

<Text style={{ fontSize: 28, textAlign: ‘center’ }}> Progress Chart in React Native </Text>

</View>

);

9. Creating Style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    alignItems: ‘center’,<br />
    justifyContent: ‘center’<br />
  }</p>
<p>});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

alignItems: ‘center’,

justifyContent: ‘center’

}

});

10. Complete Source Code for App.js file :

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Text, Dimensions } from ‘react-native’;</p>
<p>import { ProgressChart } from “react-native-chart-kit”;</p>
<p>const screenWidth = Dimensions.get(“window”).width;</p>
<p>export default function App() {</p>
<p>  const data = {<br />
  labels: [“Apple”, “Banana”, “Cherry”], // optional<br />
  data: [0.2, 0.5, 0.8]<br />
};</p>
<p>  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      <ProgressChart<br />
        data={data}<br />
        width={ screenWidth – 15 }<br />
        height={220}<br />
        chartConfig={{<br />
          //backgroundColor: ‘#478438’,<br />
          backgroundGradientFrom: ‘#FFF8E1’,<br />
          backgroundGradientTo: ‘#FFF8E1’,<br />
          //decimalPlaces: 2,<br />
          color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,<br />
        }}<br />
        style= {{<br />
          borderRadius: 15,<br />
        }}<br />
      /></p>
<p>      <Text style={{ fontSize: 28, textAlign: ‘center’ }}> Progress Chart in React Native </Text></p>
<p>    </View><br />
  );<br />
}</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    alignItems: ‘center’,<br />
    justifyContent: ‘center’<br />
  }</p>
<p>});