Custom Dot Content is not triggering the onPress event #739
Description
<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 ?