search

Abhinandan-Kushwaha / react-native-gifted-charts

The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
https://www.npmjs.com/package/react-native-gifted-charts
MIT License
771 stars 152 forks source link

PieChart's "sectionAutoFocus" and "focusOnPress" don't work in Web #800

Closed Demven closed 1 month ago

Demven commented 2 months ago

I'm building a React Native app for iOS and Web platforms, and the PieChart doesn't support interactivity in Web. I'm using your example:

image

However, the onPress event is not supported in browsers. You must use onClick internally as the fallback. Or maybe the problem is caused by smth else. Can you fix this?

I love your library, it's really great. But I can't make it interactive for Web. Please help.

Abhinandan-Kushwaha commented 2 months ago

Hi @Demven How are you using react-native on web? Are you using expo or something else? If you have a ReactJS project, you can use the react-gifted-charts library for charts.

Demven commented 2 months ago

@Abhinandan-Kushwaha Yes, I use Expo.

Demven commented 2 months ago

@Abhinandan-Kushwaha I'm trying to bypass this limitation by moving the interactivity out of the chart, so that you can select chart segments from the list of categories on the left. Then I pass data prop to the PieChart with focused: true/false.

However, each segment when focused has the same color (url(#grad0) which is red), it's the reference to the color of the first segment, if you inspect it in the DevTools. Ignore the pie chart at the top, it's my own implementation, which is interactive, but has some problems that I don't know how to solve, so I'd like to switch to your library.

See the demo:

https://github.com/user-attachments/assets/58788c63-4667-4ebc-a922-8151d4e6cdc9

Is this a bug? Any way to make the focused segment to maintain the original segment color?

Thank you very much for all your help and work in maintaining this library.

Best, Dmitry

Abhinandan-Kushwaha commented 1 month ago

Hi @Demven The issue is with the react-native-svg library which does not allow onPress events on web. See https://github.com/software-mansion/react-native-svg/issues/1483

Your workaround should work correctly from versions 1.4.31 onwards. Please use the latest version of the library.

Demven commented 1 month ago

Thank you!

Demven commented 1 month ago

@Abhinandan-Kushwaha I upgraded to v 1.4.36, and both focusOnPress and sectionAutoFocus still do not work for me. Should I have just upgraded to 1.4.31+ or also do something else on my side?