[React Native] Draw SVG chart with react-native-svg and D3.js

Drawing native React graphs is easy to hear. There are many libraries that provide us with available charts, but often we want to create our own charts with specific designs that are suitable for our purposes. The purpose of this article is to do that, I will show you the process of creating a chart for myself.

We will build a chart as follows:

Install dependencies

As mentioned in the title: we need two libraries, react-native-svg and d3.js.

Let’s draw!

The chart of columns that we draw is displayed from bottom to top. The problem is that the vertical axis (Y axis) of SVG works from top to bottom. We will use a technique to simplify drawing.

We will plot the value of the coordinate Y as a negative value. For example, with a value of 5, we will draw a column from coordinates 0 to -5.

Finally, we need to move the entire chart, because it will now be outside the display frame of SVG.

Now, please work hard to get started.

Let’s add a <Rect> to <SVG> so we can see something on the simulator.

With the above code, we drew a yellow square with a red border and shifted it on the Y axis a distance corresponding to the value of const graphHeight . Notice that the Y coordinates of <Rect> are -5 because we drew it outside the display frame of SVG and moved it inside. Please try checking again to see if your emulator will display in the square.

Create a shaft

We will start with the horizontal axis at the bottom of the chart. The chart we saw earlier was minimal to understand the movement of the chart. Y = 0 is the first coordinate of the columns. We need to determine the margin of the chart where the chart’s parameters will be displayed (For example: Jan, Feb … ).

Looking at the above figure, you will see the bottom axis a little bit away from the chart. Because we draw with negative coordinates (starting from zero coordinates) and we want to display the information below the graph, we will assign the bottom axis coordinates Y = 2.

Create columns

The columns in this chart are simply rectangles with border radius. Now we need some data. Our column-pouring data will be a list of key-value pairs. In javascript we will present this data with an array of objects.

Note: I will remove the validate of the props in this tutorial to focus on charting.

We will decide how the x , y , height and width coordinates for <Rect> ?

We need to remember that the height in SVG will run from top to bottom even if it is drawn with negative coordinates. This means that the starting point (x, y) will be the vertex of the <Rect> and the height represents the distance between the starting and the bottom (Y = 0). The following figure will help you understand this idea:

Now the hard part is finding x and y . What we want to achieve is the highest value that will be the top of the chart, so we will need to divide the scale of the columns according to the highest value.

Please use d3-scale Point scales and d3-scale Linear scales for this. In short, these scaling methods allow us from a value in an internal domain to derive the corresponding value in a range, and we use prices again. value to determine the x and y coordinates. The only interesting thing we need to do after calculating the ratio is to move the column along the X axis by about half the width of the column. Because we use a point scale, we need to move so that the “points” will correspond to the center point of the columns.

Now let’s split the BarChart component into a separate file (create the Components folder and create the BarChart.js file in it). In App.js we will add data to the chart and render the BarChart component.

With the above two files, we have created the following chart:

Add a few more details

We will add some details to our current component. We will draw two lines: a line at the top, a line in the middle. We will also add a label above the top row that represents the rounded value of the highest value with the unit and add the label below the column. So we need to add two new prop round and unit for <BarChart> .

Our code will eventually look like this:

On the emulator screen we will get the final result as follows:

There are many things that you can do with D3.js and react-native-svg. Hopefully this small tutorial has helped you to understand the basics and give you the things you need to create beautiful charts for yourself.

Source: https://medium.com/kaliop/make-your-own-svg-graph-with-react-native-svg-and-d3-js-dd0250813313 .