Create Chart in React Native and load dynamic data

Add beautiful Pie-chart in your react-native project using react-native-chart-kit

Prerequisite

For this article I am assuming you have a Basic understanding about React Native and your react-native project code is already setup. So lets start by installing modules.

Also I will be implementing only Pie chart

Installing Modules

Open Command Prompt(cmd) and open your project directory and run following commands one by one

npm i react-native-chart-kit
npm i react-native-svg
npm link react-native-svg
npm i react-native-svg-animated-linear-gradient

Diving into Code

Import Packages

We will use react-native-chart-kit to import Pie Chart Component.

Also we will make use of Dimensions component to achieve responsiveness.

import React from 'react';
import {View,Text,Dimensions} from 'react-native';
import { PieChart } from "react-native-chart-kit";

Data

We will now create four variables inside a constructor and assign them a with a value which we will later use while rendering chart.

constructor(props) {
super(props);
this.state = {
data1: 10,
data2: 20,
data3: 30,
data4: 40
};
}

Here you can also make use componentDidMount() method to get dynamic data from api and update above variable using setState() method. But for now this would work fine.

Rendering Chart

Now we will render Piechart inside render() method and make create objects which will call inside PieChart component.

Chart Style Object & Data Object

Create a chart style object and Data object and make use of Dimensions to achieve responsiveness

render() {
const screenWidth = Dimensions.get("window").width;
const pieData = [
{
name: "Data 1",
value: this.state.data1,
color: "skyblue",
legendFontColor: "#181818",
legendFontSize: 15
},
{
name: "Data 2",
value: this.state.data2,
color: "blue",
legendFontColor: "#181818",
legendFontSize: 15
},
{
name: "Data 3",
value: this.state.data3,
color: "red",
legendFontColor: "#181818",
legendFontSize: 15
},
{
name: "Data 4",
value: this.state.data4,
color: "green",
legendFontColor: "#181818",
legendFontSize: 15
}
];
const chartConfig = {
backgroundGradientFrom: "#1E2923",
backgroundGradientFromOpacity: 0,
backgroundGradientTo: "#08130D",
backgroundGradientToOpacity: 0.5,
color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
strokeWidth: 2, // optional, default 3
barPercentage: 0.5
};
return(
<View style={{flex:1,justifyContent:'space-evenly', alignItems: 'center' }}>
<Text style={{ fontSize:30 }}>Pie Chart Data</Text>
<PieChart
data={pieData}
width={screenWidth}
height={220}
chartConfig={chartConfig}
accessor="value"
backgroundColor="transparent"
paddingLeft="20"
absolute
/>
<View>
)
}

Note

If you are getting an error at this point I would strongly recommend to close your project and then re-compile your project code using below commands.

react-native start
react-native run-android (for Android)
react-native run-ios (for ios)

Output

Pie Chart

That’s it! We’re done!

Download source code on: GitHub🚀

References

react-native-chart-kit

Your feedback is welcome!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated.

Read my other articles:

Responsive Animated Navbar

File Upload Component with Resumable Functionality

Sharing Data between Components using Service