I'm trying to use Victory Native to show a graph, where I can click each point to trigger an event. However, the click event doesn't seem to be recorded every time. After a long time trying, I got it to detect clicks sometimes if I spam a point. Furthermore, the weird part is that the name of the event that is being caught is 'onPress', when in the docs it mentions 'onClick' and in the library itself, it only shows 'onclick' (without camelscase) as the valid event.
Code:
<Svg style={{borderWidth: 5, width: ls(1200), height: ls(500)}}>
<VictoryChart
theme={theme}
maxDomain={{y: 1, x: MAX_NUMBER_SCORES}}
domainPadding={{x: 10}}
width={ls(1200)}
height={ls(500)}>
<VictoryAxis dependentAxis />
<VictoryAxis style={{tickLabels: {fontSize: 0}, ticks: {size: 0}}} />
<VictoryLine
data={data}
style={{data: {stroke: '#315356', strokeWidth: 4}}} />
<VictoryArea
style={{data: {fill: 'rgba(97, 214, 214, 0.1)'}}}
data={data} />
<VictoryScatter
data={data}
size={10}
style={{
data: {
fill: ({datum: {color, aboveThreshold}}) =>
color ??
(aboveThreshold
? graphColors.ACTIVE_DEFECT
: graphColors.NO_DEFECT),
},
}}
events={[
{
target: 'data',
eventHandlers: {
onPress: () => {
console.log('onPress');
},
onclick: () => console.log('onclick'),
onClick: () => console.log('onClick'),
onpress: () => console.log('onpress'),
},
},
]} />
</VictoryChart>
</Svg>
Also is there a way to make each point responsive to touch?
Thank you.