Open Tushar321321 opened 2 years ago
Same issue here. Can't seem to figure it out.
@indiespirit any ideas here?
This is my usage:
<BarChart
data={{
labels: labels || [],
datasets: [
{
data: data || [],
colors: data?.map((_, i) => {
if (firstFutureIndex && i >= firstFutureIndex) {
return () => `${color}50`
}
return () => color
}),
},
],
}}
height={height}
chartConfig={{
color: () => theme.colors.primary,
backgroundGradientFrom: theme.colors.muted,
backgroundGradientTo: theme.colors.muted,
horizontalOffset: 0,
fillShadowGradientFromOpacity: 1,
fillShadowGradientToOpacity: 1,
fillShadowGradientOpacity: 1,
fillShadowGradientTo: '#FFF500',
fillShadowGradientFrom: '#FFF968',
fillShadowGradientFromOffset: 0.1,
fillShadowGradientToOffset: 0.7,
barRadius: theme.radii.$2,
paddingRight: 0,
paddingTop: 0,
labelColor: () => theme.colors.primary,
formatTopBarValue: format,
propsForLabels: {
fontFamily: font.body.normal,
},
}}
style={{
backgroundColor: theme.colors.muted,
paddingRight: 0,
paddingTop: theme.space.$3,
paddingLeft: 0,
paddingBottom: 0,
}}
showValuesOnTopOfBars={true}
fromZero
withHorizontalLabels={false}
withVerticalLabels={true}
xLabelsOffset={0}
showBarTops={false}
yLabelsOffset={0}
withInnerLines={false}
width={width - 10}
yAxisLabel={''}
xAxisLabel={''}
valueOnTopOfBarOffsetY={-3}
yAxisSuffix=""
/>
If there's interest I can try to reproduce this.
The only solution I've found is to not show more than 8 bars.
ok
Hello, for me I use barPercentage props based on data.length so something like this:
barPercentage: 1.5 - (data.length * 0.1)
Here is the screenshot we are facing issue with bar is cut when we increases width bars around space increases also so, Please help with some solutions. Thank you in advance