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 init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli
command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next
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 ProjectName
Run the following command to install
npm install react-native-chart-kit --save
npm install react-native-svg --save
These commands will copy all the dependencies into your node_module directory.
CocoaPods Installation
After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the library but need to install pods. So to install pods use
cd ios && pod install && cd ..
Code
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 ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running (macOS only)
react-native run-ios
Output 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, ✌👌