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 :-

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 :-