Example of Creating Bezier Chart in React Native iOS Android

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.

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.

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.

4. Importing LineChart component 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.

6. Creating our main Export default component 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.

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.

9. Creating Style.

10. Complete Source Code for App.js file :

Screenshots :-

Example of Creating Bezier Chart in React Native iOS Android

Leave a Reply

Your email address will not be published. Required fields are marked *