Table of Contents
React Native Chart Kit
This is an example to create 7 Different Type of Graph using React Native Chart Kit for Android and IOS. Charts/Graphs are the easiest and efficient way to showcase any data. With the help of the chart/graph, One can easily see the numeric data or the statics. The understanding of the statics using the Chart/Graph makes it more demanding for any application. You have generally seen charts in the accounting apps like expense sharing. If you are planning to make your own app that needs to create the Chart/Graph then here is the example for you.
For Pie chart in your project then you can visit Example to Make 3 Different Type of Pie Chart in React Native and for Speedometer graph visit visualize data with Speedometer Graph in React Native.
For this example, we are going to use React Native Chart Kit, which is very simple and easy to integrate.
Type of Chart / Graph
You can use React Native Chart Kit to make the following type of Chart / Graph:
- Bezier LineChart
- LineChart
- Progress Chart
- Bar Chart
- StackedBar Chart
- Pie Chart
- Contribution Chart
1. Bezier LineChart
<LineChart
data={{
labels: ['January', 'February', 'March', 'April'],
datasets: [
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
],
},
],
}}
width={Dimensions.get('window').width - 16} // from react-native
height={220}
yAxisLabel={'Rs'}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 255) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>2. LineChart
<LineChart
data={{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [
{
data: [20, 45, 28, 80, 99, 43],
strokeWidth: 2,
},
],
}}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>3. Progress Chart
<ProgressChart
data={[0.4, 0.6, 0.8]}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>4. Bar Chart
<BarChart
data={{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [
{
data: [20, 45, 28, 80, 99, 43],
},
],
}}
width={Dimensions.get('window').width - 16}
height={220}
yAxisLabel={'Rs'}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>5. StackedBar Chart
<StackedBarChart
data={{
labels: ['Test1', 'Test2'],
legend: ['L1', 'L2', 'L3'],
data: [[60, 60, 60], [30, 30, 60]],
barColors: ['#dfe4ea', '#ced6e0', '#a4b0be'],
}}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>6. Pie Chart
<PieChart
data={[
{
name: 'Seoul',
population: 21500000,
color: 'rgba(131, 167, 234, 1)',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
{
name: 'Toronto',
population: 2800000,
color: '#F00',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
{
name: 'New York',
population: 8538000,
color: '#ffffff',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
{
name: 'Moscow',
population: 11920000,
color: 'rgb(0, 0, 255)',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
]}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
accessor="population"
backgroundColor="transparent"
paddingLeft="15"
absolute //for the absolute number remove if you want percentage
/>7. Contribution Chart
<ContributionGraph
values={[
{ date: '2019-01-02', count: 1 },
{ date: '2019-01-03', count: 2 },
{ date: '2019-01-04', count: 3 },
{ date: '2019-01-05', count: 4 },
{ date: '2019-01-06', count: 5 },
{ date: '2019-01-30', count: 2 },
{ date: '2019-01-31', count: 3 },
{ date: '2019-03-01', count: 2 },
{ date: '2019-04-02', count: 4 },
{ date: '2019-03-05', count: 2 },
{ date: '2019-02-30', count: 4 },
]}
endDate={new Date('2019-04-01')}
numDays={105}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
/>For this example, We are going to create all these examples in a single screen with a scroll view.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react native command line interface to make our React Native App.
If you have previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
npm uninstall -g react-native-cli @react-native-community/cliRun the following commands to create a new React Native project
npx react-native init ProjectNameIf you want to start a new project with a specific React Native version, you can use the --version argument:
npx react-native init ProjectName --version X.XX.XNote If the above command is failing, you may have old version of react-native or react-native-cli installed globally on your pc. Try uninstalling the cli and run the cli using npx.
This will make a project structure with an index file named App.js in your project directory.
Installation of Dependencies
To use LineChart, BarChart, PieChart, ProgressChart, ContributionGraph, StackedBarChart we need to install react-native-chart-kit and react-native-svg dependencies.
To install these open the terminal and jump into your project using
cd ProjectNameRun the following command to install
npm install react-native-chart-kit --savenpm install react-native-svg --saveThese commands will copy all the dependencies into your node_module directory.
CocoaPods Installation
Please use the following command to install CocoaPods
npx pod-installCode
Now Open App.js in any code editor and replace the code with the following code
App.js
// 7 Type of Graph using React Native Chart Kit
// https://aboutreact.com/react-native-chart-kit/
// import React in our code
import React from 'react';
// import all the components we are going to use
import {
SafeAreaView,
Text,
View,
StyleSheet,
Dimensions,
ScrollView,
} from 'react-native';
//import React Native chart Kit for different kind of Chart
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart,
} from 'react-native-chart-kit';
const MyBezierLineChart = () => {
return (
<>
<Text style={styles.header}>Bezier Line Chart</Text>
<LineChart
data={{
labels: ['January', 'February', 'March', 'April'],
datasets: [
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
],
},
],
}}
width={Dimensions.get('window').width - 16}
height={220}
yAxisLabel={'Rs'}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 255) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</>
);
};
const MyLineChart = () => {
return (
<>
<Text style={styles.header}>Line Chart</Text>
<LineChart
data={{
labels:
['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
data: [20, 45, 28, 80, 99, 43],
strokeWidth: 2,
},
],
}}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</>
);
};
const MyProgressChart = () => {
return (
<>
<Text style={styles.header}>Progress Chart</Text>
<ProgressChart
data={[0.4, 0.6, 0.8]}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</>
);
};
const MyBarChart = () => {
return (
<>
<Text style={styles.header}>Bar Chart</Text>
<BarChart
data={{
labels:
['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
data: [20, 45, 28, 80, 99, 43],
},
],
}}
width={Dimensions.get('window').width - 16}
height={220}
yAxisLabel={'Rs'}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</>
);
};
const MyStackedBarChart = () => {
return (
<>
<Text style={styles.header}>Stacked Bar Chart</Text>
<StackedBarChart
data={{
labels: ['Test1', 'Test2'],
legend: ['L1', 'L2', 'L3'],
data: [
[60, 60, 60],
[30, 30, 60],
],
barColors: ['#dfe4ea', '#ced6e0', '#a4b0be'],
}}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</>
);
};
const MyPieChart = () => {
return (
<>
<Text style={styles.header}>Pie Chart</Text>
<PieChart
data={[
{
name: 'Seoul',
population: 21500000,
color: 'rgba(131, 167, 234, 1)',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
{
name: 'Toronto',
population: 2800000,
color: '#F00',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
{
name: 'New York',
population: 8538000,
color: '#ffffff',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
{
name: 'Moscow',
population: 11920000,
color: 'rgb(0, 0, 255)',
legendFontColor: '#7F7F7F',
legendFontSize: 15,
},
]}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
accessor="population"
backgroundColor="transparent"
paddingLeft="15"
absolute //For the absolute number else percentage
/>
</>
);
};
const MyContributionGraph = () => {
return (
<>
<Text style={styles.header}>Contribution Graph</Text>
<ContributionGraph
values={[
{date: '2019-01-02', count: 1},
{date: '2019-01-03', count: 2},
{date: '2019-01-04', count: 3},
{date: '2019-01-05', count: 4},
{date: '2019-01-06', count: 5},
{date: '2019-01-30', count: 2},
{date: '2019-01-31', count: 3},
{date: '2019-03-01', count: 2},
{date: '2019-04-02', count: 4},
{date: '2019-03-05', count: 2},
{date: '2019-02-30', count: 4},
]}
endDate={new Date('2019-04-01')}
numDays={105}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
/>
</>
);
};
const App = () => {
return (
<SafeAreaView style={{flex: 1}}>
<ScrollView>
<View style={styles.container}>
<View>
{/*Example of Bezier LineChart*/}
<MyBezierLineChart />
{/*Example of LineChart*/}
<MyLineChart />
{/*Example of Progress Chart*/}
<MyProgressChart />
{/*Example of Bar Chart*/}
<MyBarChart />
{/*Example of StackedBar Chart*/}
<MyStackedBarChart />
{/*Example of Pie Chart*/}
<MyPieChart />
{/*Example of Contribution Chart*/}
<MyContributionGraph />
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
padding: 10,
},
header: {
textAlign: 'center',
fontSize: 18,
padding: 16,
marginTop: 16,
},
});To Run the React Native App
Open the terminal again and jump into your project using.
cd ProjectName1. Start Metro Bundler
First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro bundler run following command
npx react-native startOnce you start Metro Bundler it will run forever on your terminal until you close it. Let Metro Bundler run in its own terminal. Open a new terminal and run the application.
2. Start React Native Application
To run the project on an Android Virtual Device or on real debugging device
npx react-native run-androidor on the iOS Simulator by running (macOS only)
npx react-native run-iosOutput Screenshots
Output in Online Emulator
This is how you can make 7 Type of Graph using React Native Chart Kit for Android and IOS. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned! Hope you liked it. 🙂
How do you give different progress bars different colors
How can I enable zoom and pan gesture in line chart?
Hi Subin, It is the default feature.
In the dataset props you can pass coloraturas array with the data array.
Awesome Sir, ✌👌
In your Pie Chart, the text portion of your legend get chopped off. Is there a way to wrap the legends so the text portion can be displayed on the second line (i.e. the city name would be right below the population figure)?