React Native Chart Kit Android iOS Example Creating Line Chart

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.

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.

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.

4. Now open your project’s main App.js file and import View, StyleSheet, Text, Alert and Dimensions component.

5. import LineChart component react-native-chart-kit package.

6. Creating a Constant named as screenWidth. In this constant we would the Dimensions API to calculate the device width.

7. Creating our main export default App component.

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.

9. Creating return() block and here we would define the LineChart component in Root View component.

10. Creating Style.

11. Complete Source Code for App.js file :

Screenshot :-

React Native Chart Kit Android iOS Example Creating Line Chart

Leave a Reply

Your email address will not be published.