X axis labels get overlap and crowded when amount of data increase

[syedhadi209]

when the data is small the x axis label gets rendered correctly like this

but when the amount of data is large its show the x axis too conjusted and crowded

is there any way we can normalize the data or anything ?

<ScrollView> {validDataset.length > 0 ? ( <LineChart data={{ labels: labels, datasets: [ { data: validDataset.length > 0 ? validDataset : [0], }, { data: [-100], withDots: false, }, { data: [100], withDots: false, }, ], }} width={ smallGraph ? Dimensions.get('window').width - 260 : Dimensions.get('window').width - 25 } height={height} yAxisInterval={10} formatXLabel={formatDate} withHorizontalLabels={showYAxis} withVerticalLabels={smallGraph ? false : true} withVerticalLines={true} chartConfig={{ backgroundColor: 'transparent', backgroundGradientFrom: theme.custom.background.cards, backgroundGradientFromOpacity: 0, backgroundGradientTo: theme.custom.background.cards, backgroundGradientToOpacity: 0.5, decimalPlaces: 0, color: () => gradientColor, labelColor: () =>${theme.custom.text.secondary}, propsForBackgroundLines: { strokeWidth: '0', }, propsForDots: { r: smallGraph ? '0' : '5', strokeWidth: '1', stroke: gradientColor, }, }} bezier style={{ marginVertical: 0, borderRadius: 16, width: '100%', paddingRight: showYAxis ? 35 : 20, paddingBottom: height < 180 ? 18 : 0, marginTop: 0, }} /> ) : ( <View style={{ height: 50, display: 'flex', justifyContent: 'center', alignItems: 'center', }}> <Text>No data available</Text> </View> )} </ScrollView>

[mariful-nyx]

you can make overflow scroll