In the code below [in the second comment], both bar charts are the same. However, the

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-ho

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

I have the same issue as you. Did you solve it? <div class="snippet-clipboard-cont

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Bars not showing sometimes and fast animation then provided animation time about react-native-gifted-charts HOT 5 OPEN

nikhilhooda35 commented on September 26, 2024

Bars not showing sometimes and fast animation then provided animation time

from react-native-gifted-charts.

Comments (5)

bekbull commented on September 26, 2024 1

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.

from react-native-gifted-charts.

nikhilhooda35 commented on September 26, 2024

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

from react-native-gifted-charts.

bekbull commented on September 26, 2024

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}
/>

from react-native-gifted-charts.