We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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>
<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: () =>
, 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>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
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>
The text was updated successfully, but these errors were encountered: