How to Build React Native Charts With Dynamic Tooltips

Create beautiful charts with react-native-svg-charts

Vikrant Negi
Jan 22, 2019 · 6 min read
Image for post
Image for post
Photo by Jason Coudriet on Unsplash

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.

Problem Statement

Image for post
Image for post
Area chart with tappable tooltip

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.

To solve this problem, I did some research on some existing React Native libraries and narrowed it down two of them, react-native-charts-wrapper, and react-native-svg-charts.

React Native Charts Wrapper

Our first contender, react-native-charts-wrapper, is a React Native wrapper of the popular Native charting library MPAndroidChart and Charts.

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.

react-native-svg-charts uses react-native-svg under the hood to render charts. It also has tons of examples featuring many use cases.

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!

Getting Started

Create a React native project and install all the required dependencies:

~ react-native init ReactNativeTooltip

We’ll also need to install and link the react-native-svg library:

~ 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 react-native-svg-charts:

~ 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 AreaChart.

  • 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.
  • xAccessor: Same as yAccessor but returns the x-value of that entry.

You can read more about the other available props in the official documentation.

Adding Decorators

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 cx and cy props to position them horizontally and vertically, respectively. For cx we will use date key and for cy we will use the score key.

Apart from that, we’ll also pass onPress prop that will set three states, tooltipX, tooltipY, and tooltipIndex, when any of the data points are pressed. We’ll use then use these states to position the Tooltip decorator.

Image for post
Image for post
Area charts with the markers

Adding Tooltip

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 AreaChart.

We’ll create a new file for the Tooltip Decorator.

Don’t get confused or intimidated by all the React, G, and Text tags here, most of them are just for the styling of the tooltip.

Just focus on tooltipX and tooltipY that we are using to position the Tooltip horizontally and vertically on the chart. These values are the same as cx and 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.

Image for post
Image for post
Area chart with tappable tooltips

Final Thoughts

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 react-native-svg-charts library.

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!

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store