How to Build React Native Charts With Dynamic Tooltips
Create beautiful charts with react-native-svg-charts
Creating charts in React Native, be it on the web or on mobile apps, has always been an interesting and challenging task. It’s difficult to find a suitable library that can meet both your functional and design needs. You can try to make your own charts, but that often comes with the overhead of learning and implementing things from scratch.
If you are a beginner like me, you probably want to use an existing charts library and given how young the React Native community is, there are very few options available to you to implement and customize charts.
Before we start our journey deep into the woods, let’s take a look at our problem statement.
In this piece, our goal is to draw an area chart and add a circular marker at each of the data points which can be tapped to show a tooltip containing X and Y coordinate values.
React Native Charts Wrapper
This library is highly configurable and since it uses the native chart libraries, it provides silky smooth transitions and touch support. It also has tons of examples of use cases in its GitHub repo.
In the beginning, it was my preferred choice given its performance and customization. It has a very long and specific installation guide, following which I was able to install and run it on both iOS and Android devices.
Everything seems to be working smoothly on Android. However, when I tried to create an iOS build, it gave me an error. After countless hours of searching through GitHub issues and Google, I decided against using it.
React Native SVG Charts
After giving up on
react-native-charts-wrapper, this was the best solution available that I could find.
Since it doesn’t use any native linking, installation and implementation were pretty simple and straightforward.
If you just want to see the source code of the example project, find the project repo here.
Now that’s done, let’s get this party rolling!
Create a React native project and install all the required dependencies:
~ react-native init ReactNativeTooltip
We’ll also need to install and link the
~ npm i react-native-svg~ react-native link react-native-svg
If you face any problem linking the library automatically using the link command, follow the manual steps mentioned in the official documentation.
Now, finally, install the
~ npm install react-native-svg-charts
Getting the Dummy Data
Before we dive any further we’ll need to find some data that we can use to render our
AreaChart. We’ll be using a third-party service called Mockaroo to generate some mock data for our project.
Ideally, we’ll be getting this data from an API, store it in the component state, and then feed it to our area component.
Here is how my dummy JSON data looks. See here for the full JSON data file:
Using React Native SVG Charts
react-native-svg-charts has lots of components that we can use to create graphs. In this tutorial, we’ll use
AreaChart component but you can use any one of the available charts components. Here is how an
Areachart chart component looks:
Let’s go through the important props that we are using in the
data: This is a required field and must be an array.
yAccessor: A function that takes each entry of
data(named "item") as well as the index and returns the y-value of that entry.
yAccessorbut returns the x-value of that entry.
You can read more about the other available props in the official documentation.
React-native-SVG-charts was built to be as extensible as possible. All charts can be extended with decorators, a component that somehow styles or enhances your chart. Simply pass in a
react-native-svg compliant component as a child to the graph and it will be called with all the necessary information to layout your decorator.
For this tutorial, we’ll need two decorators, one for the data point marker and another one for the tooltip.
Note: Make sure you place Decorators inside the
AreaChart component. Otherwise, they won’t render.
Adding Marker Data Points
Let’s create a decorator to use as a marker at each data point in the chart.
We need a circular marker for each item in the data array. And, for that, we are going to loop through each item in the data array and return the
Circle SVG component for each one of them.
Now, to position them on the chart, we’ll use the
cy props to position them horizontally and vertically, respectively. For
cx we will use
date key and for
cy we will use the
Apart from that, we’ll also pass
onPress prop that will set three states,
tooltipIndex, when any of the data points are pressed. We’ll use then use these states to position the
Now that we have necessary information like the x-axis(
tooltipX), the y-axis (
tooltipY), and an index(
tooltipIndex) of the marker pressed, we can use them to place
Tooltip on the
We’ll create a new file for the
Don’t get confused or intimidated by all the
Text tags here, most of them are just for the styling of the tooltip.
Just focus on
tooltipY that we are using to position the
Tooltip horizontally and vertically on the chart. These values are the same as
cy that we used for the marker, except that we are adding and subtracting some values to adjust them on the chart.
Apart from that, we are using
tooltipIndex to offset the first and last tooltip so that they don’t get cut off on the sides.
Here is the full source code of a working example.
That is all we need to do to create charts, markers, and tooltips. This is just a basic implementation of what can be achieved using the
If you want to explore more, check out their examples repo where they showcase tons of other use cases.
Note: For the sake of brevity I’ve skipped some boilerplate code which you can find on the Github repo.
Let me know if you find anything confusing. If you have worked on React native charts, please share what libraries and use cases you came across!