Adding a tooltip to a chart sounds like a small task, and indeed it is, but with some workarounds as even the most popular chart libraries in react-native don’t directly mention it in their documentation.

Requirements

In this article, I am going to use react-native-chart-kit and I will show you how we can add tooltip to its LineChart.

First, install the libraries that we are going to need for your react-native project.

npm install react-native-chart-kit --save
npm install react-native-svg --save

Library versions used in this article (so that if a future update makes some breaking changes you can switch to this combination).

"react": "16.13.1",
"react-native": "0.63.2",
"react-native-chart-kit": "^6.4.1",
"react-native-svg": "^12.1.0"

#react-native-tutorial #charts #react-native