Bezier line chart is a little bit different then the normal line chart. In line chart we would see straight lines between two points but in Bezier chart the lines will not be straight and draw with some curves. In Bezier Line chart we would interpolate two or multiple data points on a chart with curved lines. In react native we can make this chart using react-native-chart-kit NPM package. I have already make a tutorial on this npm package for creating line chart you can read it from here. So in this tutorial we would learn about Example of Creating Bezier Chart in React Native iOS Android.
Contents in this project Example of Creating Bezier Chart in React Native iOS Android :-
1. Friends before doing any coding stuff, we have to install the react-native-chart-kit NPM package in our react native project. So open your react native project Root directory and execute both below commands. Using the first command we would install the Chart Kit NPM package and using the other command we would install the SVG package which is necessary for this library.
|
1
|
npm install react–native–chart–kit —save
|
|
1
|
npm install react–native–svg —save
|
Screenshot :-
2. Now the 2nd step is only for iOS users. To link the library with iOS project we have to install the PODS in our iOS project. So execute below command to install PODS.
|
1
|
cd ios && pod install && cd ..
|
3. Now its time to start coding for the app. So open your project’s main App.js file and import View, StyleSheet, Text and Dimensions component.
|
1
2
3
|
import React from ‘react’;
import { View, StyleSheet, Text, Alert, Dimensions } from ‘react-native’;
|
4. Importing LineChart component from “react-native-chart-kit”.
|
1
|
import { LineChart } from “react-native-chart-kit”;
|
5. Creating a constant named as screenWidth. Here we would get the total device screen width using Dimensions api. Using this constant we would set the chart width.
|
1
|
const screenWidth = Dimensions.get(“window”).width;
|
6. Creating our main Export default component App.
|
1
2
3
4
5
|
export default function App() {
}
|
7. Creating a Constant named as data, In this constant we would define all the Chart data line labels and their values and color.
|
1
2
3
4
5
6
7
8
9
10
11
|
const data = {
labels: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’],
datasets: [
{
data: [10, 50, 17, 40, 15],
color: (opacity = 1) => ‘#ECEFF1’, // optional
strokeWidth: 2 // optional
}
],
legend: [“Sales Chart”] // optional
};
|
8. Creating Return() block, Now here we would make the Line Chart component and pass a Prop bezier. This prop will make the Straight line chart into bezier cured line chart.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<View style={styleSheet.MainContainer}>
<LineChart
data={data}
width={screenWidth}
height={220}
chartConfig={{
backgroundColor: ‘#1cc910’,
backgroundGradientFrom: ‘#458336’,
backgroundGradientTo: ‘#458336’,
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 255) => ‘#ECEFF1’,
}}
bezier
yAxisLabel={‘$ – ‘}
style={{marginLeft: 5, marginRight: 5, borderRadius: 7}}
/>
<Text style={{ fontSize: 28, textAlign: ‘center’ }}> Bezier LineChart in React Native </Text>
</View>
);
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
10. 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
|
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: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’],
datasets: [
{
data: [10, 50, 17, 40, 15],
color: (opacity = 1) => ‘#ECEFF1’, // optional
strokeWidth: 2 // optional
}
],
legend: [“Sales Chart”] // optional
};
return (
<View style={styleSheet.MainContainer}>
<LineChart
data={data}
width={screenWidth}
height={220}
chartConfig={{
backgroundColor: ‘#1cc910’,
backgroundGradientFrom: ‘#458336’,
backgroundGradientTo: ‘#458336’,
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 255) => ‘#ECEFF1’,
}}
bezier
yAxisLabel={‘$ – ‘}
style={{marginLeft: 5, marginRight: 5, borderRadius: 7}}
/>
<Text style={{ fontSize: 28, textAlign: ‘center’ }}> Bezier LineChart in React Native </Text>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
Screenshots :-
Also Read :
React Native WebView Android iOS Installation Example Tutorial
React Native Create App Intro Slider Welcome Walk-through Screen
React Native Generate Random Number Between 1 to 100 in Android iOS
Create Gradient Shade Effect Button in React Native Android iOS Example
React Native Show Copyright Symbol © Icon in Text in iOS Android
