How to create a Line Chart on React Native

Hi everyone! It’s a pleasure to create my first post on Medium. You know what? I’m feeling good! I was thinking to do it a long time ago, and finally today, I’m doing it. My own revolution.

In this post, I’d like to start a little tutorial about building a Line Chart on React Native. Do you know what the Line Graphic is, right? Just in case, I show you:

Creating a Line Chart for React Native

Yes, looks beautiful, right? The point is: How can I build it on a React Native application? Well… That’s my reason that I’m here. Believe me, it’s easy!

First, I’d like to share a package from npm called react-native-chart-kit. It’s a perfect and simple javascript library using React Native, to build your own graphic.

I assume that you already have your own React Native project. So, let’s skip this step.

Let’s start!

1. yarn add react-native-chart-kit
2. yarn add react-native-svg prop-types install peer dependencies

Done? Ok, second step: Importing the LineChar.

import { LineChart} from "react-native-chart-kit";

All right. Everything is installed and imported. Sounds good!

The next step, using the LineChart component and creating your mock data.

const labels = [
'Label 1',
'Label 2',
'Label 3',
'Label 4',
'Label 5',
'Label 6',
];
const data = [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
];

and now, using the Line Chart component:

<LineChart
data={{ labels: labels,
datasets: [{ data: data }],}}
width={Dimensions.get('window').width - 50}
height={220}
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#D9D9D9',
backgroundGradientTo: '#FFF',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: { borderRadius: 16, },
propsForDots: { r: '6', strokeWidth: '2', stroke: '#ffa726', }, }}
bezier
style={{ marginVertical: 5, borderRadius: 15, }}
/>

What we have here?

First things first. Of course, we need to import and use our LineChart as a component. But, what is this information? Ok, let me explain:

const labels = ["Label 1", "Label 2", "Label 3",  "Label 4", "Label 5", "Label 6"];

As the name means, we need to use an array with the values such as a label in the graphic. So, in this example, it’s an array with some values.

How about data?

const data = [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100
];

Hum… but what is this Math.random() function?

Math.random() * 100);
// returns a random integer from 0 to 99

Basically, we are creating an array with 6 random numbers. As I said before, we’re using mock data. The idea is to create a Line Graphic with random numbers, just to be didactic.

Well done! But, we need more!

import { Dimensions } from 'react-native';

Let’s import Dimensions from React Native to calculate the width of the devices and use it to be always responsive.

width={Dimensions.get("window").width}

and to create a specific height:

height={220}

All right, just a little bit more. Chart Configurations:

chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#D9D9D9',
backgroundGradientTo: '#FFF',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: { borderRadius: 16, },
propsForDots: { r: '6', strokeWidth: '2', stroke: '#ffa726', },
}}

If you are familiar with JSX styles or even CSS, you can see that we have a JSX Style configuration: backgroundColor, color, and style.

That’s easy!

propsForDots? Just set the style for each dot in the graphic, such as stroke width and r.

Then we have:

bezier
style={{ marginVertical: 8, borderRadius: 16 }}

bezier?

Defines the dot color function that is used to calculate colors of dots in a line chart. It’s boolean, so, just set true or false. In this case, just set true, without argument.

and finally, about style props, as you know, it’s just props to set a margin for component and borderRadius to make it a beautiful widget =)

Final code for Line Chart component

Ok, we have done.

If you would like to check the complete source on Github.

Please, feel free to pull it (or make a merge request, why not?)

https://github.com/pedrosgmagalhaes/linechart-sample