Bring Your Data to Life in React Native
Making a Line Chart from scratch
Making line charts in mobile applications can be challenging. This post will take you through the process of making a line chart in React Native by using nothing but only Views and Stylesheets.
Our model is an extension from WangZixiao’s chart list; he introduces a Bar Chart and a Column Chart without any library. There is a Line Chart already in a library, however, today we will customize ours a little bit..
First things first
First, we must make background bars, in order to show levels thru the Y-Axis. To achieve this, the first step is to draw a number and a line.
We added a height prop because we are going to need it in the next step.
This would result in Figure 1:
Finish setting up our background
Once we create a level for our line chart, we need to repeat these LevelSeparators to achieve Y-Axis scale:
Notice how the height prop received here is passed to our previous LevelSeparator component.
For the label value calculation, we simply divide topValue into totalCount levels, times the level id.
For zero value, we included another level. We will render our line chart via children prop.
So, the following fragment will result in Figure 2:
Here, topValue = 10 and separators = 5, so, our scale will be jumping steps of 10 / 5 = 2.
Connecting our data
Now comes the tricky part, drawing points, and lines onto the separators layer.
We will need a Point and algebraic operations:
This will be handy to prevent render warnings when mapping our point list while rendering:
Now comes the controversial module. We will need to re-scale our points:
What is the meaning of startingPoint and endingPoint?
These points represent where within the layer we will draw (0,0) and (MAX-X, MAX-Y) points, respectively.
The scaleCount simply helps to resize the X-Axis (another way to achieve this would be to handle a max value for X-Axis and do a similar calculation in both coordinates).
Lines and Points are coming
To draw our points, we’ll need:
We sub -3 and -2 to center our point. These values depend on the point size; more precisely, its radius.
The starting point helps to move our line in the screen. This initial dot will be handy to connect points between them: we simply use the previous one as our line beginning.
In order to do this, we must receive a distance and angle to draw our line.
An issue that may arise is that the Transform API rotates by default clockwise, but we’ve calculated the value for Z-Axis positive, i.e. anticlockwise. Thus, we need use the opposite value for this angle.
Another problem we have here is that if we rotate a View, we will need to ensure that the rotation axis is at the start of the line. This API rotates a view, but that rotation happens at the center of the view. In other words, we will need to translate that rotation axis to the start of the line.
You can find the complete version of this layer in this gist.
So far, we’ve done the following (Figure 3):
The iterative part
Recalling on our controversial module, Scaler.js, once we finish drawing these points and lines, we’ll need to calibrate startingPoint and endingPoint. For this, we’ve used a simple trial-error process. (If you find an automatic way to accomplish this, let me know!).
We are almost there!
Finally, we simply add the X-Axis scale (Figure 4). The complete version of index.js is available on this gist.
And there you have it! We’ve made a line chart from scratch.
Stay tuned for how to animate this chart!
If you have any questions, comments, or suggestions please let me know.
