4

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?

5eb
  • 14,798
  • 5
  • 21
  • 65
Ravi
  • 165
  • 3
  • 11
  • 2
    You might have moved on in the meantime, but if you or anybody else is still interested in how to do this you could look at the examples posted in this issue thread: https://github.com/indiespirit/react-native-chart-kit/issues/123. So one approach would be to save the coordinates inside `onDataPointClick` to the state. Then inside the decorator you can check if there are coordinates in the state, and if there are, render whatever view you want to show on click. – 5eb Sep 26 '20 at 13:37

0 Answers0