I am working on a data visualization app in React Native using the Victory Chart library. The app uses VictoryScatter
and VictoryVoronoiContainer
to implement a clickable scatter point graph, where tooltips appear above the scatter points when clicked. I want to improve the user experience by disabling these click events on the VictoryScatter
component while the user is scrolling to prevent accidental activation of a scatter point.
The parent component for the screen is MoodTrendScreen.js
, and the child component is MoodChart.js
. MoodTrendScreen.js
has a scrollable list of MoodCharts. I tried using scrollBeginDrag
and scrollEndDrag
callbacks on the ScrollView
component to track whether the user is scrolling, storing it as a boolean flag (state component called isScrolling
) in the parent component, and passing it as a prop to the children. Then, I used the isScrolling
prop to set pointerEvents
to 'none'
. However, this approach did not work. How can I disable the scatter points from being clickable while the user is scrolling?
function MoodTrendScreen() {
const [moodData, setMoodData] = useState({});
...
return (
<ScrollView>
<MoodChart
csvColumn={'happiness'}
moodData={moodData}
/>
<MoodChart
csvColumn={'anxiety'}
moodData={moodData}
/>
...
</ScrollView>
);
}
export default MoodTrendScreen;
const MoodChart = (props) => {
const filteredChartData = ...
const renderDataPoints = () => {
const pointRadius = 4;
return (
<VictoryScatter
data={filteredChartData}
dataComponent={<ClickableScatterPoint pointRadius={pointRadius} />}
/>
);
};
const CustomVoronoiContainer = <VictoryVoronoiContainer voronoiBlacklist={['mood', 'mood-trend']} radius={20} />;
const renderLineChart = () => {
return (
<>
<View>
<VictoryChart
height={250}
scale={ {x: "time", y: "linear"} }
containerComponent={CustomVoronoiContainer}
>
<VictoryLine
name='mood'
data={filteredChartData}
domain={{ y: [0, 11] }}
interpolation={"monotoneX"}
/>
{renderDataPoints()}
</VictoryChart>
</View>
</>
);
};
return (
<View style={styles.rootView} onLayout={onLayout}>
<Text style={styles.chartHeader}>{chartTitle}</Text>
{renderLineChart()}
</View>
);
};
export default MoodChart;