Hey friends, It’s been almost One and half month since I had posted a tutorial. Recently I was busy in some office work, So I cannot make tutorials but from now on I am free and back to my react native blog. In today’s tutorial we would learn about a unique react native NPM package known as React Native Chart Kit. This package has almost 10k downloads every week by react native beginner developers and many of them facing problems to understanding it. So in today’s tutorial we would learn about React Native Chart Kit NPM package in both Android and iOS with Example and we would also creating Line chart using React Native Chart Kit. So let’s get started .
Contents in this project React Native Chart Kit Android iOS Example Creating Line Chart :-
1. The first step is to download and install the React Native Chart Kit NPM package in our react native project. So open your project’s main Root directory in CMD or Terminal and execute below command.
|
1
|
npm install react–native–chart–kit —save
|
2. Now we have to install its supporting NPM package called as react-native-svg. To install this package we have to execute below command.
|
1
|
npm install react–native–svg —save
|
3. Now the third step is only for iOS users. For use of this package in iOS devices we have to to install the PODS. To install the PODS and link the package please execute below command.
|
1
|
cd ios && pod install && cd ..
|
4. Now open your project’s main App.js file and import View, StyleSheet, Text, Alert and Dimensions component.
|
1
2
3
|
import React from ‘react’;
import { View, StyleSheet, Text, Alert, Dimensions } from ‘react-native’;
|
5. import LineChart component react-native-chart-kit package.
|
1
|
import { LineChart } from “react-native-chart-kit”;
|
6. Creating a Constant named as screenWidth. In this constant we would the Dimensions API to calculate the device width.
|
1
|
const screenWidth = Dimensions.get(“window”).width;
|
7. Creating our main export default App component.
|
1
2
3
4
5
|
export default function App() {
}
|
8. Creating a constant named as data in App component. In this constant we would define the Line chart data names, their values and Chart line color.
|
1
2
3
4
5
6
7
8
9
10
11
|
const data = {
labels: [“January”, “February”, “March”, “April”, “May”, “June”],
datasets: [
{
data: [10, 20, 15, 40, 50, 45],
color: (opacity = 1) => ‘#ECEFF1’, // optional
strokeWidth: 2 // optional
}
],
legend: [“Sales Chart”] // optional
};
|
9. Creating return() block and here we would define the LineChart component in Root View component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
return (
<View style={styleSheet.MainContainer}>
<LineChart
data={data}
width={screenWidth}
height={220}
chartConfig={{
backgroundColor: ‘#1cc910’,
backgroundGradientFrom: ‘#183086’,
backgroundGradientTo: ‘#183086’,
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 255) => ‘#ECEFF1’,
}}
yAxisLabel={‘$ – ‘}
style={{marginLeft: 5, marginRight: 5, borderRadius: 7}}
/>
<Text style={{ fontSize: 28, textAlign: ‘center’ }}> LineChart in React Native </Text>
</View>
);
|
10. Creating Style.
|
1
2
3
4
5
6
7
8
9
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
11. Complete Source Code for App.js file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import React from ‘react’;
import { View, StyleSheet, Text, Alert, Dimensions } from ‘react-native’;
import { LineChart } from “react-native-chart-kit”;
const screenWidth = Dimensions.get(“window”).width;
export default function App() {
const data = {
labels: [“January”, “February”, “March”, “April”, “May”, “June”],
datasets: [
{
data: [10, 20, 15, 40, 50, 45],
color: (opacity = 1) => ‘#ECEFF1’, // optional
strokeWidth: 2 // optional
}
],
legend: [“Sales Chart”] // optional
};
// 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,
// useShadowColorFromDataset: false // optional
// };
return (
<View style={styleSheet.MainContainer}>
<LineChart
data={data}
width={screenWidth}
height={220}
chartConfig={{
backgroundColor: ‘#1cc910’,
backgroundGradientFrom: ‘#183086’,
backgroundGradientTo: ‘#183086’,
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 255) => ‘#ECEFF1’,
}}
yAxisLabel={‘$ – ‘}
style={{marginLeft: 5, marginRight: 5, borderRadius: 7}}
/>
<Text style={{ fontSize: 28, textAlign: ‘center’ }}> LineChart in React Native </Text>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
Screenshot :-
Also Read :
Integrate Firebase SDK in React Native Android Project
React Native Set Header Bar Title Text in React Navigation 5.x
Example of Insert Data Into SQLite Database in React Native
Show Image From HTTP URL in React Native Android iOS Tutorial
Add Set Rounded Corners Radius Border on Image in React Native
