React-native-svg-charts: Line chart with x axis not working when wrapped in horizontal ScrollView

[jfr3000]

What is the problem?

A line chart with an x axis doesn't render properly when wrapped in a horizontal scroll view.

When does it happen?

I used this example - it was working fine. I wrapped a ScrollView around it - still good. I added horizontal={true} to the ScrollView - the chart breaks.

What platform?

• [ ] iOS
• [x] Android

React Native version: 0.55.4

Code to reproduce

import React from 'react'
import { LineChart, XAxis, Grid } from 'react-native-svg-charts'
import { ScrollView, View } from 'react-native'

export default class XAxisExample extends React.PureComponent {

  render() {

    const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]

    return (
      <ScrollView horizontal={true}>
        <View style={{ height: 200, padding: 20 }}>
          <LineChart
            style={{ flex: 1 }}
            data={data}
            gridMin={0}
            contentInset={{ top: 10, bottom: 10 }}
            svg={{ stroke: 'rgb(134, 65, 244)' }}
          >
            <Grid />
          </LineChart>
          <XAxis
            style={{ marginHorizontal: -10 }}
            data={data}
            formatLabel={(value, index) => index}
            contentInset={{ left: 10, right: 10 }}
            svg={{ fontSize: 10, fill: 'black' }}
          />
        </View>
      </ScrollView>
    )
  }
}

[JesperLekland]

Hi! You don't have any width set (and flex:1 doesn't work in the context of a ScrollView). Always try your layouts with just Views to make sure that it's correct before adding more complex components

[jfr3000]

Never mind, I forgot to add a width to the View, it has nothing to do with the XAxis.... :woman_facepalming:

[jfr3000]

Ah you beat me :)

[JesperLekland]

Haha, glad you solved it 👍

[ThoMiDev]

Yeah, It's works!