Bars not showing sometimes and fast animation then provided animation time

[nikhilhooda35]

In the code below [in the second comment], both bar charts are the same. However, the second bar chart behaves as expected, while the first one is very fast in animation, and its bars sometimes disappear. I am attaching a screenshot to illustrate the disappearing issue.

in screenshots you can see now the second one starts acting weird.

[nikhilhooda35]

<View>
  <BarChart
    animationDuration={900}
    animationEasing
    overflowTop={30}
    noOfSections={6}
    labelWidth={100}
    width={500}
    barWidth={23}
    spacing={10}
    data={barData}
    stepValue={120}
    yAxisThickness={0}
    xAxisThickness={0}
    isAnimated
    rulesColor={'#fff'}
    rotateLabel={true}
    xAxisTextNumberOfLines={1}
    xAxisLabelsVerticalShift={50}
    xAxisLabelTextStyle={{
      fontSize: 12,
      top: 30,
      left: 12,
      position: 'absolute',
    }}
    renderTooltip={(item, index) => {
      return (
        <View
          style={{
            marginBottom: 5,
            marginLeft: -6,
            backgroundColor: '#ffcefe',
            paddingHorizontal: 6,
            paddingVertical: 4,
            borderRadius: 4,
          }}>
          <Text>{item.value}</Text>
        </View>
      );
    }}
  />

  <BarChart
    animationDuration={900}
    animationEasing
    overflowTop={30}
    noOfSections={6}
    labelWidth={100}
    width={500}
    barWidth={23}
    spacing={10}
    data={barData}
    stepValue={120}
    yAxisThickness={0}
    xAxisThickness={0}
    isAnimated
    rulesColor={'#fff'}
    rotateLabel={true}
    xAxisTextNumberOfLines={1}
    xAxisLabelsVerticalShift={50}
    xAxisLabelTextStyle={{
      fontSize: 12,
      top: 30,
      left: 12,
      position: 'absolute',
    }}
    renderTooltip={(item, index) => {
      return (
        <View
          style={{
            marginBottom: 5,
            marginLeft: -6,
            backgroundColor: '#ffcefe',
            paddingHorizontal: 6,
            paddingVertical: 4,
            borderRadius: 4,
          }}>
          <Text>{item.value}</Text>
        </View>
      );
    }}
  />
</View>

[bekbull]

I have the same issue as you. Did you solve it?

<BarChart
    data={chartData}
    frontColor={'#37915B'}
    barWidth={13}
    width={250}
    isAnimated={true}
    onPress={onPressOfBar}
    stepHeight={37}
    barBorderTopLeftRadius={4}
    barBorderTopRightRadius={4}
    spacing={7}
    initialSpacing={1}
    endSpacing={1}
    xAxisLabelTextStyle={{
        fontSize: 10, color: '#000', transform: [{ rotate: '90deg' }, { translateY: 12 }], width: 45,
        textAlign: 'center'
    }}
    xAxisLabelsHeight={11}
    xAxisLabelsVerticalShift={10}
    animationDuration={900}
    // adjustToWidth={true}
/>

[Abhinandan-Kushwaha]

Hi @bekbull
Can you share the complete code with data and a video of the output?

[bekbull]

Hi @bekbull Can you share the complete code with data and a video of the output?

Hi. I've solved this issue by adding some delay before chart starts rendering.

[coderBeat]

@bekbull
Please, could you give an example how did you add a delay ?

[LinkUpGames]

@bekbull Same here, I want to know how you added the delay for displaying the animation