How to show the clicked value in react-native-charts-kit

Viewed 2026

I've made an app that shows a graph. I am using react-native-chart-kit package to do this.

I trying to show a pop up view which shows the selected/clicked value:

<LineChart
  data={{
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
      {
        data: [20, 50, 10, 80, 45, 66],
      },
    ],
  }}
  width={Dimensions.get('window').width} // from react-native
  height={300}
  yAxisInterval={1}
  chartConfig={{
    decimalPlaces: 0,
    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    style: {
      borderRadius: 16,
    },
    propsForDots: {
      r: '6',
      strokeWidth: '2',
      stroke: '#ffa726',
    },
  }}
  decorator={(value) => {
    console.log('decorator' + JSON.stringify(value));
    // return (
    //     <View style={{ position: 'absolute', backgroundColor: 'red', top: value.y, left: value.x, height: 100, width: 100, zIndex: 1000 }}></View>
    // )
  }}
  bezier
  style={{
    marginVertical: 8,
    borderRadius: 16,
  }}
  onDataPointClick={(data) => {
    return (
      <View
        style={{
          position: 'absolute',
          backgroundColor: 'red',
          top: data.y,
          left: data.x,
          height: 100,
          width: 100,
          zIndex: 1000,
        }}></View>
    );
  }}
/>

Could anybody tell me what I'm doing wrong or suggest other packages that I could use to achieve the same behavior?

0 Answers
Related