React-native-chart-kit: How to set click function on chart ?

[smemamian]

I think this function should be important. I want to find out when user click on my chart. because I want to show more details.

[Hermanya]

There is only a click handler for data points on the graph. Can you listen on the graph's parent component? Like, wrap the graph in a Touchable.

[smemamian]

I want to catch user's click on linear chart graph.
I searched and I find a function: onDataPointClick . but It doesn't work:

<LineChart
      onDataPointClick={({value, dataset, getColor}) =>
      console.log('test:',value)
    }
    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
        ]
      }]
    }}
    width={Dimensions.get('window').width} // from react-native
    height={220}
    chartConfig={{
      backgroundColor: '#e26a00',
      backgroundGradientFrom: '#fb8c00',
      backgroundGradientTo: '#ffa726',
      decimalPlaces: 2, // optional, defaults to 2dp
      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      style: {
        borderRadius: 16
      }
    }}
    bezier

    style={{
      marginVertical: 8,
      borderRadius: 16
    }}


  />

[smemamian]

Any solution?

[Hermanya]

Not at this moment... onDataPointClick only works for the dots on the graph, not the graphs themselves.

[smemamian]

Not at this moment... onDataPointClick only works for the dots on the graph, not the graphs themselves.

ok, can you show me an example with dots?

[Hermanya]

It's in the sample app: https://github.com/indiespirit/react-native-chart-kit/blob/master/App.js#L122

Here are instructions on how to run this sample app https://github.com/indiespirit/react-native-chart-kit/blob/master/contributing.md

[smemamian]

https://github.com/indiespirit/react-native-chart-kit/blob/master/contributing.md

of course my code like example, but it doesn't work:

        <View>
          <LineChart
          withDots
          onDataPointClick={({value, getColor}) =>
                  showMessage({
                    message: `${value}`,
                    description: 'You selected this value',
                    backgroundColor: getColor(0.9)
                  })
                }
            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>

[Foveluy]

the problem comes from here.

       output.push(
          <View key={Math.random()}>
            <Circle
              cx={cx}
              cy={cy}
              r="4"
              fill={this.getColor(dataset, 0.9)}
              onPress={onPress}
            />
            <Circle
              cx={cx}
              cy={cy}
              r="12"
              fill={this.getColor(dataset, 0)}
              onPress={onPress}
            />
          </View>
        )
      })
    })
    return output
  }

just simply edit the source code from View to React.Fragment, it will work and show the dots

  <React.Fragment key={Math.random()}>
            <Circle
              cx={cx}
              cy={cy}
              r="4"
              fill={this.getColor(dataset, 0.9)}
              onPress={onPress}
            />
            <Circle
              cx={cx}
              cy={cy}
              r="12"
              fill={this.getColor(dataset, 0)}
              onPress={onPress}
            />
</React.Fragment>

@Hermanya The dots will not show in react-native ^0.59.0, i think the problem comes from the SVG lib, but not sure.

by changing View to React.Fragment can work again.

[luatnd]

@Foveluy Many thanks, but in my case: React.Fragment instead of React.fragment

[filipsavicmarbleit]

What @Hermanya said works. To achieve chart click function, just wrap the graph in a touchable component, like this:
<TouchableWithoutFeedback onPress={()=>console.log('click')}> <View> <LineChart bezier data={{ labels: labels, datasets: [{data: data}] }} width={Dimensions.get("window").width height={360} // ... /> </View> <TouchableWithoutFeedback />