Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Dot Content is not triggering the onPress event #739

Open
syedhadi209 opened this issue Nov 22, 2024 · 3 comments
Open

Custom Dot Content is not triggering the onPress event #739

syedhadi209 opened this issue Nov 22, 2024 · 3 comments

Comments

@syedhadi209
Copy link

syedhadi209 commented Nov 22, 2024

<LineChart data={{ labels: labels, datasets: [ { data: validDataset.length > 0 ? validDataset : [0], }, { data: [-100], withDots: false, }, { data: [100], withDots: false, }, ], }} width={ smallGraph ? Dimensions.get('window').width - 260 : Dimensions.get('window').width - 30 } height={height} yAxisInterval={10} formatXLabel={formatDate} withHorizontalLabels={showYAxis} withVerticalLabels={smallGraph ? false : true} withVerticalLines={true} chartConfig={{ backgroundColor: 'transparent', backgroundGradientFrom: theme.custom.background.cards, backgroundGradientFromOpacity: 0, backgroundGradientTo: theme.custom.background.cards, backgroundGradientToOpacity: 0.5, decimalPlaces: 0, color: () => gradientColor, labelColor: () =>${theme.custom.text.secondary}`,
propsForBackgroundLines: {
strokeWidth: '0',
},
propsForDots: {
r: smallGraph ? '0' : '5',
strokeWidth: '1',
stroke: gradientColor,
},
}}
onDataPointClick={handleDataPointClick}
renderDotContent={({x, y, index}) => {
const hasNote = !!allNotes[index];
const dataPointValue = validDataset[index]; // Get the value directly from the dataset

return (
  <Svg>
    <TouchableWithoutFeedback
      onPress={() => {
        console.log('Dot clicked:', {
          index,
          value: dataPointValue,
        });
        handleDataPointClick({
          index,
          value: dataPointValue,
        });
      }}>
      <Rect
        x={x - 4} // Adjust for centering
        y={y - 4} // Adjust for centering
        width="8"
        height="8"
        rx="4"
        fill={hasNote || !showYAxis ? gradientColor : 'white'}
        stroke={gradientColor}
        strokeWidth={hasNote ? '0' : '2'}
      />
    </TouchableWithoutFeedback>
  </Svg>
);

}}
bezier
style={{
marginVertical: 0,
borderRadius: 16,
width: '100%',
paddingRight: showYAxis ? 35 : 18,
paddingBottom: height < 180 ? 18 : 0,
marginTop: 0,
}}
/>
`

I have implemented a logic to show different types of data point shapes depending upon the data but now the on press event is not working can anyone guide me whats the possible issue with this or what i am doing wrong ?

@rahul-rayo
Copy link

rahul-rayo commented Jan 7, 2025

@syedhadi209 The same issue in iOS devices works well, but in Android, it does not.
Please let me know if there is any solution.

@Sakica09
Copy link

@rahul-rayo I have the same issue. When i updated my project to expo sdk 52, onDataPointClick() stopped working on Android.

@rahul-rayo
Copy link

@syedhadi209, You get any solution about onDataPointClick() stopping working on Android?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants