onPress is not captured by VictoryScatter when using VictoryZoomContainer on Android devices

[marcusgadbem]

Bug Reports

Checklist

• [x] I have read through the FAQ and Guides

• [x] I am using the latest version of Victory

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

VitoryScatter does not capture onPress on physical Android devices when chart uses VictoryZoomContainer. Dummy code:

const events = [
  {
    target: 'data',
    eventHandlers: {
      onPress: () => {
        console.log('Tap');
      },
    },
  },
];

<VictoryChart
  containerComponent={
    <VictoryZoomContainer
      allowZoom={false}
      zoomDomain={{
        x: [0, 7],
        y: [0, 16],
      }}
    />
  }>
  <VictoryScatter
    size={15}
    events={events}
    data={chartsData} />
</VictoryChart>

This happens in a react native environment.

Reproduction

https://github.com/marcusgadbem/foo-charts

Ps.: Thanks in advance & for this amazing library. 🙇

[talon-i-am]

I am having this issue as well when trying to use a VictoryVoronoiContainer. If I wrap it in an Svg, it works on Android, but the touch events on my VictoryBar stop working and all touch events stop working on iOS. Not sure how to make both OSs happy.

[smorcodeanu-temedica]

We also have the same issue our team, can you guys please advise on how we should handle this? Any information would be helpful, thanks

[marywells]

I'm also having this issue with VictoryPie onPress and physical Android devices. A conditional wrapper (Svg for Android/View for iOS) fixes the onPress in both Android/iOS emulators, but on the physical Android device this solution doesn't seem to work. Thank you

[marywells]

@marcusgadbem please could I ask what Android version you're running?

[marcusgadbem]

@marywells of course. I've been testing on Android 9 and 11 and the result is the same: looks like VictoryZoomContainer is hijacking/preventing onPress trigger for the data points.

I pinned down to VictoryZoomContainer because we use pie chart, bars and lines, and the issue happens with all of them. Yet I also had to use the same workarounds as you to make it work properly for when not using VictoryZoomContainer.

[marcusgadbem]

@boygirl @becca-bailey hey guys, apologies upfront for tagging you but could you please provide us with some inputs/directions here? I poke around the code but no success so far. If this is really a bug I'd be happy to try to handle it. :)

[marcusgadbem]

I was able to make it work on Android devices by providing a custom data component to VictoryScatter component and attaching onPressIn event to it instead of VictoryScatter. Circle is imported from react-native-svg.

const ScatterDataComponent = (props) => {
  return (
    <Circle
      cx={props.x}
      cy={props.y}
      r="10"
      stroke="purple"
      strokeWidth={2}
      fill="magenta"
      onPressIn={() => {
        console.log('Tap');
      }}
    />
  );
};

<VictoryChart
  containerComponent={
    <VictoryZoomContainer
      allowZoom={false}
      zoomDomain={{
        x: [0, 7],
        y: [0, 16],
      }}
    />
  }>
  <VictoryScatter
    size={15}
    dataComponent={<ScatterDataComponent />}
    data={chartsData} />
</VictoryChart>

[becca-bailey]

Apologies for the late reply - we will try to look into this ASAP. Does anyone know whether this is an issue with older versions of victory-native, or was it introduced in a recent release?

[hexadecy]

react-native: 0.66.4 victory-native: 36.3.2, also tested on 36.2.2 react-native-svg: 12.3.0

<VictoryPie
  height={250}
  padding={{ top: 32, bottom: 32 }}
  innerRadius={50}
  padAngle={2}
  colorScale={colors}
  data={values}
  labelComponent={<VictoryLabel style={styles.labels} />}
  events={[
    {
      target: 'parent',
      eventHandlers: {
        onPress: onPressFunc,
        onClick: onPressFunc,
      },
    },
  ]}
/>

I'm using the onPress in a VictoryPie, it only triggers on iOS. The onPress has to be placed before the onClick. The onPressIn trigger with a touch scrolling on Android, but it's not good for my use case.

[hexadecy]

I found a workaround only for my usecase. But it only works for what is drawn, not the center of the donut pie.

import { Svg } from 'react-native-svg';

 <VictoryPie
   height={250}
   width={400}
   padding={{ top: 32, bottom: 32 }}
   innerRadius={50}
   containerComponent={<Svg onPress={onPressFunc} onClick={onPressFunc} height={250} width={400} />}
/>

[naikvaishnav3]

I have 2 VictoryBar inside VictoryGroup in VictoryChart and getting same issue of onPress events of VictoryGroup stopped working after adding below code in VictoryChart to achieve horizontal scroll.

containerComponent={( <VictoryZoomContainer allowZoom={false} zoomDomain={{ x: [new Date(2021, 2, 1), new Date(2021, 6, 1)], y: [0, 45], }} /> )}

Any update on this issue?

[oneil-marcelo]

Hello guys, @marcusgadbem, same issue here. Did you find any solution about this issue? Thanks.

[marcusgadbem]

This is what worked for me, @oneil-marcelo.

I was able to make it work on Android devices by providing a custom data component (ScatterDataComponent) to VictoryScatter component, and attaching onPressIn event to it. Circle is imported from react-native-svg.

const ScatterDataComponent = (props) => {
  return (
    <Circle
      cx={props.x}
      cy={props.y}
      r="10"
      stroke="purple"
      strokeWidth={2}
      fill="magenta"
      onPressIn={() => {
        console.log('Tap');
      }}
    />
  );
};

<VictoryChart
  containerComponent={
    <VictoryZoomContainer
      allowZoom={false}
      zoomDomain={{
        x: [0, 7],
        y: [0, 16],
      }}
    />
  }>
  <VictoryScatter
    size={15}
    dataComponent={<ScatterDataComponent />}
    data={chartsData} />
</VictoryChart>

@becca-bailey I can test with older versions as soon as I have some time. Will keep it posted. :)

[fusandy]

@marcusgadbem thanks for the code! I also have a barChart inside the VictoryZoomContainer which need to scroll horizontally. And when user press the bar, need to show the detail text above the bar.

I tried your solution which onPressIn worked in the VictoryZoomContainer, but there's another problem is that while user started to scroll instead of pressing the specific bar, the onPressIn handler will detect the pressIn event which has caused the detail box show up.

Do you have any idea how to fix scrolling the chart while prevent from detecting pressing the bar? thanks a lot!!

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.