Bezier Linechart in React Native

#reactnative #android #ios #react

Charts are easy way to convey data stories on mobile unlink using tables full of data especially while developing business dashboard apps, finance apps, mobile banking apps, analytics apps, e-commerce apps, health apps, and fitness apps etc.

In this tutorial, we will implement Bezier Linechart in React Native. We are going to use the react-native-chart-kit library, which has the ability to add different types of charts like line charts, Pie charts, Bar charts etc to our React native apps. The library provides a Charts API that is easy to use and highly customizable.

Lets Start.

Installing React Native Charts Kit:

Step 1:
Install the react-native-chart-kit npm package into our existing React Native project using NPM or yarn.

npm install react-native-chart-kit
or
yarn add react-native-chart-kit

Step 2:
Importing Charts components into React Native.
[Note: We are using only one type of chart (Linechart) for this tutorial,there are many types like LineChart,BarChart,PieChart, ProgressChart,ContributionGraph,StackedBarChart.]

You can do so by writing the following piece of code:

import {LineChart} from 'react-native-chart-kit'

That’s it. Now you get access to Linechart, which are accessible from your JavaScript code.

Step 3:
Creating a Line Chart in React Native

As we have already imported Linechart components in the previous step, we need to provide the data to the built-in component as follows:

<LineChart
   data={{
           labels: [Jun 21,May 21,Apr 21,Mar 21,Feb 21,Jan 21], //Array of labels [Jun 21,May 21,Apr 21,Mar 21,Feb 21,Jan 21]
             datasets: [{   data: [ 4.3,4.8,5,5,4.9,4.8 ], //Array of values 
                            color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
                            strokeWidth: 2 // optional
                        }]  
          }}
   width={label.length*10+350}
   height={320}                  
   verticalLabelRotation={70}
   withInnerLines={false}
   chartConfig={{
                  backgroundGradientFrom: 0,
                  backgroundGradientFromOpacity:0,
                  backgroundGradientTo: 0,
                  backgroundGradientToOpacity: 0,
                 color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                 labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                 backgroundColor: (opacity = 0) => `rgba(255, 255, 255, ${opacity})`,
                 strokeWidth: 2, // optional, default 3                       

              }}
    bezier // type of line chart              
/>

The code above represents the dataset for our bezier line chart component, that will be displayed in a line chart view, in our project.For the scope of this tutorial, we are using hardcoded static data.Check out the documentation to learn more about all the customizations you can do to a line chart at https://www.npmjs.com/package/react-native-chart-kit

Run your projects and open the screen containing the newly added line chart.