Value tooltip when clicked

App.js

@@ -1,13 +1,14 @@
 import 'babel-polyfill'
 import React from 'react'
-import { ScrollView, StatusBar, Dimensions, Text } from 'react-native'
+import {ScrollView, StatusBar, Dimensions, Text, View} from 'react-native'
 import ScrollableTabView from 'react-native-scrollable-tab-view'
+import FlashMessage, {showMessage} from 'react-native-flash-message'
 import LineChart from './src/line-chart'
 import PieChart from './src/pie-chart'
 import ProgressChart from './src/progress-chart'
 import BarChart from './src/bar-chart'
 import ContributionGraph from './src/contribution-graph'
-import { data, contributionData, pieChartData, progressChartData } from './data'
+import {data, contributionData, pieChartData, progressChartData} from './data'
 
 // in Expo - swipe left to see the following styling, or create your own
 const chartConfigs = [
@@ -49,7 +50,8 @@ const chartConfigs = [
     backgroundGradientFrom: '#000000',
     backgroundGradientTo: '#000000',
     color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
-  }, {
+  },
+  {
     backgroundColor: '#0091EA',
     backgroundGradientFrom: '#0091EA',
     backgroundGradientTo: '#0091EA',
@@ -83,11 +85,11 @@ const chartConfigs = [
 
 export default class App extends React.Component {
   renderTabBar() {
-    return <StatusBar hidden/>
+    return <StatusBar hidden />
   }
 
   render() {
-    const { width } = Dimensions.get('window')
+    const {width} = Dimensions.get('window')
     const height = 220
     return (
       <ScrollableTabView renderTabBar={this.renderTabBar}>
@@ -111,13 +113,21 @@ export default class App extends React.Component {
             >
               <Text style={labelStyle}>Bezier Line Chart</Text>
               <LineChart
+                bezier
                 data={data}
                 width={width}
                 height={height}
                 chartConfig={chartConfig}
-                bezier
                 style={graphStyle}
+                onDataPointClick={({value, getColor}) =>
+                  showMessage({
+                    message: `${value}`,
+                    description: 'You selected this value',
+                    backgroundColor: getColor(0.9)
+                  })
+                }
               />
+              <FlashMessage duration={1000} />
               <Text style={labelStyle}>Progress Chart</Text>
               <ProgressChart
                 data={progressChartData}

README.md

@@ -121,6 +121,7 @@ const data = {
 | withInnerLines | boolean | Show inner dashed lines - default: True |
 | chartConfig | Object | Configuration object for the chart, see example config object above |
 |decorator | Function | This function takes a [whole bunch](https://github.com/indiespirit/react-native-chart-kit/blob/master/src/line-chart.js#L266) of stuff and can render extra elements, such as data point info or additional markup. |
+|onDataPointClick| Function| Callback that takes `{value, dataset, getColor}`|
 
 ## Bezier Line Chart
 

data.js

@@ -12,7 +12,7 @@ const data = {
       100
     ],
     color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})` // optional
-  },{
+  }, {
     data: [
       20,
       10,
@@ -21,7 +21,7 @@ const data = {
       87,
       90
     ]
-  },{
+  }, {
     data: [
       30,
       90,

package.json

@@ -2,18 +2,21 @@
   "name": "react-native-chart-kit",
   "version": "2.2.1",
   "devDependencies": {
-    "babel-eslint": "^8.2.5",
-    "eslint-config-xo-react": "^0.17.0",
-    "eslint-plugin-react": "^7.10.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-module-resolver": "^3.1.1",
+    "eslint-plugin-react-hooks": "^1.4.0",
+    "babel-polyfill": "^6.26.0",
+    "eslint-config-xo-react": "^0.19.0",
+    "eslint-plugin-react": "^7.12.4",
     "expo": "32.0.1",
-    "react": "16.5.0",
     "jest-expo": "28.0.0",
     "prop-types": "^15.6.2",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
     "react-native-scrollable-tab-view": "^0.10.0",
+    "react-native-flash-message": "^0.1.10",
     "react-test-renderer": "16.7.0",
-    "xo": "^0.21.1",
-    "babel-polyfill": "^6.26.0"
+    "xo": "^0.24.0"
   },
   "_main": "./node_modules/expo/AppEntry.js",
   "main": "./index.js",
@@ -34,7 +37,6 @@
     "react-native-svg": "> 6.4.1"
   },
   "dependencies": {
-    "babel-plugin-module-resolver": "^3.1.1",
     "lodash": "^4.17.11",
     "paths-js": "^0.4.7",
     "point-in-polygon": "^1.0.1"
@@ -44,21 +46,16 @@
     "parser": "babel-eslint",
     "space": true,
     "semicolon": false,
+    "prettier": true,
     "rules": {
       "camelcase": "off",
       "capitalized-comments": "off",
       "new-cap": "off",
-      "object-curly-spacing": [
-        "error",
-        "always"
-      ],
-      "import/no-unassigned-import": 0,
+      "import/no-unassigned-import": "off",
       "react/forbid-component-props": "off",
-      "react/prop-types": [
-        0
-      ],
-      "react/no-this-in-sfc": 0,
-      "unicorn/filename-case": 0
+      "react/prop-types": "off",
+      "react/no-this-in-sfc": "off",
+      "unicorn/filename-case": "off"
     },
     "envs": [
       "node",