Bar Charts not showing bar when i scroll the graph and apply filter and need to mannualy scroll to see the bar

13 Views Asked by At

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>
0

There are 0 best solutions below