Misalignment on YAxis and overlapping labels on XAxis

What is the problem?

The YAxis misaligns with the chart grid randomly on dynamic data update The XAxis gets its labels overlapping radomly on dynamic data update

When does it happen?

When the chart first loads, YAxis is aligned and the labels of XAxis are not overlapping. But after changing the “from” and “to” selectors, the data updates and:

• sometimes the YAxis gets misaligned with chart grid
• sometimes the XAxis displays more labels that are overlapping

Updating data again fixes the issue with a bit of luck

Leads

For me it seems that it’s a rendering issue because of its randomness

Any though to get rid of those bugs ?

What platform?

• iOS
• [8.1] Android

React Native version: ^0.50.3

Code to reproduce

<View style={styles.chartWrapper}>
          <View style={{width: 50, flexDirection: 'column'}}>
            <YAxis
              data={data}
              yAccessor={({ item }) => item.value }
              style={{flex: 1}}
              svg={{
                  fill: 'grey',
                  fontSize: 10,
              }}
              min={0}
              contentInset={{ top: 30, bottom: 10 }}
              formatLabel={ value => `${value}` }
            />
            <View style={{flex: 0.1}}/>  
          </View>
          <View style={{flex: 1, flexDirection: 'column'}}>
            <AreaChart
                style={{flex: 1}}
                data={data}
                yAccessor={({ item }) => item.value }
                xAccessor={({ item }) => new Date(item.receivedAt) }
                contentInset={{ top: 30, bottom: 10, right: 15, left: 5 }}
                svg={{
                    fill: 'url(#gradient)'
                }}
                showGrid={true}
                gridMin={0}
                extras={[Gradient, Line(COLORS[mode][0])]}
                xScale={d3Scale.scaleTime}
            />
            <XAxis
                style={{ flex: 0.1 }}
                data={data}
                formatLabel={ (value) => new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                contentInset={{ left: 5, right: 15 }}
                xAccessor={({ item }) => new Date(item.receivedAt)}
                svg={{
                  fontSize: 10,
                }}
                min={0}
                numberOfTicks={6}
                scale={d3Scale.scaleTime}
            />
          </View>
        </View>

Layout using flexboxes

I’m using flexbox for my layout, this is a drawing of how my components are positioned:

Overlapping screenshot

Misalign screenshot

[animaonline]

Should be reopened, as this is easily reproducible

[JesperLekland]

Sorry for the slow reply, I’ve had to prioritise other issues. I can’t for the love of me recreate this problem. If you can, create a minimal reproduction example in a new issue and I’d happily take a look. Closing this for now