React-native-svg-charts: XAxis - No display

[krrevilla]

I've followed your example in XAxis, but it doesn't display anything. All I get was a padding in bottom.

[JesperLekland]

Hi @krrevilla, sorry to hear. How did you test it? In your own project? Could you provide me with your code?

[JesperLekland]

I took a quick look an suspect that you have ignored the formatLabel prop. If you use this to format the value into something useful it should work. I will tweak the default formatLabel to always return at least the index. Please confirm if this worked for you

[krrevilla]

Hi @JesperLekland yep, with my own project. I'm using android btw.

<XAxis style={{ paddingVertical: 16 }} values={value} formatLabel={(value, index) => index} chartType={ XAxis.Type.BAR } labelStyle={{ color: '#fff' }} />

I've tried it again, still not working.

[JesperLekland]

@krrevilla could you show me the entire file? I'm interested in how the values look and how you've aligned the axis with the rest of the views

[rafaelviny]

        const data    = [ 14, 80, 100,55]
        const barData = [
            {
                values: data,
                fillColor: 'rgb(134, 65, 244)',
                fillColorNegative: 'rgba(134, 65, 244, 0.2)',
            },
        ]

        return (
            <View style={ { height: 200, padding: 20 } }>
                <BarChart
                    style={ { flex: 1 } }
                    data={ barData }
                />
                <XAxis
                    style={ { paddingVertical: 16 } }
                    values={ data }
                    formatLabel={ (value, index) => index }
                    chartType={ XAxis.Type.BAR }
                    labelStyle={ { color: 'grey' } }
                />
            </View>
        )
    }

[rafaelviny]

XAxis no display.

beautiful work in this lib

[OZhang]

After I added flex: 1 to the XAxis style, the XAxis displayed.

[JesperLekland]

@rafaelviny Very strange, I get an XAxis when using your code. I'll have to dig deeper into this.

[JesperLekland]

@OZhang flex:1 should only be needed if parent view has flexDirection: 'row'

[JesperLekland]

I think the easiest way for you guys to test this is to place a <View> (with some backgroundColor) next to your XAxis, if the view renders, the XAxis should render. Try adding borderWidth: 1 to your XAxis and see if it gets all the space it's supposed to

[guilherme-dias]

Hey guys, my XAxis is "eating" a piece of the first and the last label on Android, any style that I can apply to fix this?

[JesperLekland]

@guilherme-dias use the contentInset prop with leftand right.

[JesperLekland]

fixed it! Released in v1.6.1. Please re-open if problem persists

[sammysium]

@JesperLekland sorry to bug you but can you believe i still face the same issue? From the lastest product and just copied pasted the example code. Playing with the style as follows shows me an empty box that spans horizontally below the chart. So I am guessing there is space but no labels?

this is the code. Removing makes no difference.

 <View style={{marginTop: 7, height: 250, paddingVertical: 16}}>
          <BarChart
            style={{flex: 1}}
            data={values}
            gridMin={0}
            svg={{fill: 'rgb(134, 65, 244)'}}>
            <Labels />
          </BarChart>
          <XAxis
            style={{marginTop: 10, borderWidth: 1, height:50}}
            data={values}
            scale={scale.ScaleBand}
            formatLabel={(value, index) => index}
            labelStyle={{color: 'black'}}
          />
        </View>

[yerycs]

XAxis still does not render at all, as well as YAxis label.