How to handle overflow?

[aprilmintacpineda]

I have the following code which I got from the sample provided on the readme

<ScrollView style={globalStyles.fullFlex} horizontal>
  <LineChart
    data={{
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          data: [
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100,
            Math.random() * 100
          ]
        }
      ]
    }}
    width={Dimension.get('window').width}
    height={400}
    chartConfig={{
      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`
    }}
    bezier
  />
</ScrollView>

As you can see, I extended the data to go all the way to December, which I'm expecting to cause overflow, but I can't really scroll it, so I added ScrollView, still can't scroll it, i removed width, threw an error. The way I was able to get the expected result was by setting width={Dimension.get('window').width * 2} which will cause the width to extend causing the horizontal scroll on the ScrollView, without this, you would actually see the labels stack up on each other.

So, how do we properly handle horizontal scroll with min width?

I found an issue related to this indiespirit/react-native-chart-kit-example#4

[Hermanya]

I think doubling the chart width is the way to go. Someone recently submitted an example using scrollview, but it was used for displaying data point values.

[aprilmintacpineda]

I think doubling the chart width is the way to go. Someone recently submitted an example using scrollview, but it was used for displaying data point values.

Yeah but we'll need to know how much it should increase or even if it needs to double up..

[Hafisa]

width={width*Math.round(data.length/10)}

width should increase depends on data length