Hello All, Today we will discuss How to show charts in react native? The basic example shows the chart in React native application. In this example, We will use the chart kit library. This library will help us to implement a chart in react native. The following step helps us to implement the React native chart kit example. Although this library will cover many types of charts we will only show three charts in this example.
| Line Chart |
| Bar Chart |
| Pie Chart |
How to show charts in react nativechart kit?
1. Create a new react native application & create a new page. If you don’t know how to create react native application then follow this tutorial.
2. Install the dependency as shown below
npm i react-native-chart-kit
npm i react-native-svg3. Import three charts from ‘react-native-chart-kit’
import {
LineChart,
BarChart,
PieChart
} from "react-native-chart-kit";4. For Line Chart Implement the following code
<View>
<Text style={styles.txt}>Line Chart Example</Text>
<LineChart
data={{
labels: ["JAN", "FEB", "MAR"],
datasets: [
{
data: [
100,
200,
300
]
}
]
}}
width={Dimensions.get("window").width} // from react-native
height={350}
chartConfig={{
backgroundColor: "#EC33FF",
backgroundGradientFrom: "#FF5733",
backgroundGradientTo: "#FF5770",
color: () => 'yellow',
labelColor: () => 'white',
}}
/>
</View>
5. For Bar Chart Implement the following code
<View>
<Text style={styles.txt}>Bar Chart Example</Text>
<BarChart
data={{
labels: ["JAN", "FEB", "MAR"],
datasets: [
{
data: [
100,
200,
300
]
}
]
}}
width={Dimensions.get("window").width} // from react-native
height={350}
chartConfig={{
backgroundColor: "#EC33FF",
backgroundGradientFrom: "#FF5733",
backgroundGradientTo: "#FF5770",
color: () => 'yellow',
labelColor: () => 'white',
}}
/>
</View>
5. For Pie Chart Implement the following code
state = {
data: [
{
name: "A",
product: 100,
color: "#EC33FF",
legendFontColor: "black",
legendFontSize: 10
},
{
name: "B",
product: 200,
color: "#FF5733",
legendFontColor: "black",
legendFontSize: 10
},
{
name: "C",
product: 300,
color: "#FF5770",
legendFontColor: "black",
legendFontSize: 10
}
]
} <View>
<Text style={styles.txt}>Pie Chart Example</Text>
<PieChart
data={
this.state.data
}
width={Dimensions.get("window").width} // from react-native
height={350}
chartConfig={{
backgroundColor: "#EC33FF",
backgroundGradientFrom: "#FF5733",
backgroundGradientTo: "#FF5770",
color: () => 'yellow',
labelColor: () => 'black',
}}
accessor={"product"}
backgroundColor={"transparent"}
paddingLeft={"20"}
center={[10, 50]}
absolute
/>
</View>
6. The full source code is given below
import React, { Component, useState } from 'react';
import { StyleSheet, Text, View, Dimensions,ScrollView } from 'react-native';
import {
LineChart,
BarChart,
PieChart
} from "react-native-chart-kit";
export default class HomePage extends Component {
state = {
data: [
{
name: "A",
product: 100,
color: "#EC33FF",
legendFontColor: "black",
legendFontSize: 10
},
{
name: "B",
product: 200,
color: "#FF5733",
legendFontColor: "black",
legendFontSize: 10
},
{
name: "C",
product: 300,
color: "#FF5770",
legendFontColor: "black",
legendFontSize: 10
}
]
}
componentDidMount = () => {
}
render() {
return (
<ScrollView >
<View >
<View>
<Text style={styles.txt}>Line Chart Example</Text>
<LineChart
data={{
labels: ["JAN", "FEB", "MAR"],
datasets: [
{
data: [
100,
200,
300
]
}
]
}}
width={Dimensions.get("window").width} // from react-native
height={350}
chartConfig={{
backgroundColor: "#EC33FF",
backgroundGradientFrom: "#FF5733",
backgroundGradientTo: "#FF5770",
color: () => 'yellow',
labelColor: () => 'white',
}}
/>
</View>
<View>
<Text style={styles.txt}>Bar Chart Example</Text>
<BarChart
data={{
labels: ["JAN", "FEB", "MAR"],
datasets: [
{
data: [
100,
200,
300
]
}
]
}}
width={Dimensions.get("window").width} // from react-native
height={350}
chartConfig={{
backgroundColor: "#EC33FF",
backgroundGradientFrom: "#FF5733",
backgroundGradientTo: "#FF5770",
color: () => 'yellow',
labelColor: () => 'white',
}}
/>
</View>
<View>
<Text style={styles.txt}>Pie Chart Example</Text>
<PieChart
data={
this.state.data
}
width={Dimensions.get("window").width} // from react-native
height={350}
chartConfig={{
backgroundColor: "#EC33FF",
backgroundGradientFrom: "#FF5733",
backgroundGradientTo: "#FF5770",
color: () => 'yellow',
labelColor: () => 'black',
}}
accessor={"product"}
backgroundColor={"transparent"}
paddingLeft={"20"}
center={[10, 50]}
absolute
/>
</View>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 10,
height: 500
},
txt: {
fontSize: 18,
textAlign: 'center',
padding: 15
}
})
7. As shown in the above example, All charts will display the chart with the help of the following factors
* data => Which is the main factor to display the graph accordingly
* width & height => The graph display section width & height