I'm using the react-native-victory chart for the bar graph I'm using zoom container for scrolling a large data graph when I scroll the graph and apply the filter my data changes and the bar not showing on the graphs, I need to manually scroll and see the graph bar
example code any help and suggestions. Note: When I apply filter my barChartData state updated.
<VictoryChart
theme={VictoryTheme.grayscale}
domainPadding={{ x: 16 }}
padding={styles.mainChart}
containerComponent={
<VictoryZoomContainer
zoomDimension="x"
zoomDomain={zoomedXDomain}
onZoomDomainChange={handleZoom}
allowZoom={false}
allowPan
responsive={false}
/>
}
domain={entireDomain}
>
<VictoryAxis
tickValues={totalReferralGraphData?.label}
tickFormat={value => {
return referralFilterId === Strings.DATE_RANGE
? moment(value, 'MM-DD-YYYY').format('DD MMM')
: value;
}}
fixLabelOverlap={true}
style={{
tickLabels: styles.label,
ticks: styles.label,
}}
/>
<VictoryAxis
dependentAxis
tickFormat={x => `${x}`}
style={{
tickLabels: styles.label,
ticks: styles.label,
}}
/>
<VictoryBar
style={{
data: { fill: colors.primaryThemeColor },
labels: styles.label,
}}
data={barChartData}
labels={({ datum }) => (datum.y === 0 ? ' ' : isEmptyOrNull(datum.y) ? ' ' : datum.y)}
cornerRadius={styles.barRadiusStyle}
barWidth={10}
labelComponent={<VictoryLabel />}
labelPlacement={'parallel'}
labelPosition={'centroid'}
/>
</VictoryChart>