onDataPointClick function doesn't work at all

[smemamian]

I'm using an ios real device.

my react-native info:

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Memory: 28.16 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.8.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.7.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 16, 17, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 25.0.0, 25.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3
        System Images: android-22 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-rename: 2.1.9

I want to use onDataPointClick function but it doesn't work:

        <View>
          <LineChart
          withDots={true}
          onDataPointClick={(value,dataset,getColor)=>{console.log('jkkl')}} 
            data={{
              labels: ['January', 'February', 'March', 'April', 'May', 'June'],
              datasets: [{
                data: [
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100
                ]
              },
              {
                data: [
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100
                ]
              }]
            }}
            width={Dimensions.get('window').width} // from react-native
            height={Dimensions.get('window').height}
            chartConfig={{
              backgroundColor: '#e26a00',
              backgroundGradientFrom: '#fb8c00',
              backgroundGradientTo: '#ffa726',
              decimalPlaces: 2, // optional, defaults to 2dp
              color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
              style: {
                borderRadius: 16
              }
            }}
            style={{
            }}
          />
        </View>

[sarthak-mishra-se]

Same issue with me also.

[tahakhozooie]

Hi Same issue with me also

[rosie597]

Same issue with me using Andriod Emulator Any updates on this?

[krunalc]

More than 2 years since it reported first and still no update

[miguelzakharia]

This works for me:

onDataPointClick={(params) => {console.log({params});}}

I noticed that if withDots={false} then onDataPointClick is not triggered.

[quachdev]

This works for me:

onDataPointClick={(params) => {console.log({params});}}

I noticed that if withDots={false} then onDataPointClick is not triggered.

To add to this, if you have withScrollableDot={true} onDataPointClick will also not trigger.

I have fiddled with this library for a couple days now and struggling.

While all the features are great I wish there was some more clear docs on how to use this.

Were there any alternatives? I chose this because of the number of users and contributors.

[miguelzakharia]

I was not able to find any suitable alternatives that are as feature rich as this.

[daxaxelrod]

Just opening this back up. Exposing the animated value or allowing the caller to pass in the Animated.Value so that they can interpolate off it would be great!

[Demven]

I have the same issue. In Web, the onDataPointClick doesn't work. I found a solution to make it work, but it causes other problems: install this babel plugin https://www.npmjs.com/package/babel-plugin-rename-jsx-attribute and then map "onPress" props to "onClick":

presets: ['babel-preset-expo'],
plugins: [
  '@babel/plugin-proposal-export-namespace-from',
  'react-native-reanimated/plugin',
  ["rename-jsx-attribute", {
    "attributes": {
      "onPress": "onClick"
    }
  }]
],

[Demven]

Also, see the proposed solution here https://github.com/indiespirit/react-native-chart-kit/issues/609