Victory: Can't scroll page on touch device

[jadus]

Bugs and Questions

Checklist

• [x] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [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

On a touch device it is not possible to scroll the page if you touch a victory element

Reproduction

The gallery is a good example :
https://formidable.com/open-source/victory/gallery/
Just try to scroll the page on a smartphone

[boygirl]

@jadus I'm not able to reproduce this issue. Some elements in the gallery do have scroll events enabled (like the brush and zoom example), and these will capture the scroll event rather than scrolling the page. I haven't seen this behavior happen with other chart elements, though.

[jadus]

I've added

[sinoridha]

I have faced the same issue. My solution for it is wrap the chart component with Svg. It will make your cart as svg, but it will reduce preformance of antimation process.

import Svg from 'react-native-svg';

<Svg width='100%' height={222}>
    <VictoryChart
        standalone={false}>
            <VictoryBar />
    </VictoryChart>
</Svg>

[yeomann]

this is still issue, atleast on android. I just test and implemented on IOS using simulator. i can't click using mouse and scroll but on Android real device, i can't scroll when i click on victory-bar component

UPDATE: i just did <View pointerEvents="none"> around the victory component. all good 😄

[mpcen]

this is still issue, atleast on android. I just test and implemented on IOS using simulator. i can't click using mouse and scroll but on Android real device, i can't scroll when i click on victory-bar component

UPDATE: i just did <View pointerEvents="none"> around the victory component. all good 😄

After 3 hours, you have saved me! Thank you

[afacar]

this is still issue, atleast on android. I just test and implemented on IOS using simulator. i can't click using mouse and scroll but on Android real device, i can't scroll when i click on victory-bar component

UPDATE: i just did <View pointerEvents="none"> around the victory component. all good 😄

After many hours, you saved my charts :> Thank you

[nighto]

Where does this components come from?

Attempted import error: 'View' is not exported from 'victory'.

[nighto]

Ok, seems to be something related to react-native. But the issue affects normal React on Safari browser, without using react-native.

[nighto]

Ok, for future readers who are not using react-native, the solution is similar to what @sinoridha described but with native svg wrapper:

<svg width='100%' height='50%'>
    <VictoryChart standalone={false} />
</svg>

This however makes your chart not responsible anymore.

[narinluangrath]

👋 Hi all,

In case people are looking at this issue for reference, the reason this happens is because <VictoryContainer /> (which renders the <div> containing the chart) has a style prop of
{ pointerEvents: 'none', touchAction: 'none' }. This is there for the reason @boygirl mentioned above.

If you don't want this behavior, your can override it by providing your own containerComponent

<VictoryChart
  containerComponent={
    <VictoryContainer
      style={{
        pointerEvents: "auto",
        userSelect: "auto",
        touchAction: "auto"
      }}
    />
  }
>
  <VictoryLine />
</VictoryChart>

[calvinwoo]

The comment above led me in the right direction for my use case. The requirements for my mobile web app:
• users should be able to scroll if they touch the chart
• users should be able to touch the chart and interact with VictoryVoronoiContainer

Omitting the style overrides, except for touch-action, did the trick.

<VictoryChart
  containerComponent={
    <VictoryVoronoiContainer
      style={{
        touchAction: "auto"
      }}
    />
  }
>