indiespirit
Bar Chart VerticalLines not rendered.
Hi. We are using Bar chart with a specific data but we are unable to display the y-axis and the verticalLines are not rendered. Is there any way to display y-axis vertical line?
We have written the following code to render the BarGraph:
`const data1 = { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { data: [80000, 48000, 28000, 13000, 5000], colors: [ () => '#94D6E9', () => '#ABC2AD', () => '#C89297', () => '#8F90B0', () => '#F2C298', ], strokeWidth: 1, }, ], };
<BarChart
style={{
alignItems: 'center',
padding: 20,
}}
data={data1}
width={300}
height={300}
chartConfig={{
backgroundColor: 'white',
backgroundGradientFrom: 'white',
backgroundGradientFromOpacity: 0,
backgroundGradientTo: 'white',
decimalPlaces: 0,
color: opacity => rgba(124,124,124,${opacity}),
strokeWidth: 1,
barPercentage: 1,
propsForBackgroundLines: {
strokeDasharray: '',
strokeWidth: 1,
},
fillShadowGradientOpacity: 3,
useShadowColorFromDataset: false,
propsForVerticalLabels: {
fontSize: 13,
fontWeight: '400',
marginLeft: 0,
paddingLeft: 0,
textAlign: 'left',
},
propsForHorizontalLabels: {fontSize: 13, fontWeight: '400'},
}}
withCustomBarColorFromData={true}
flatColor={true}
withVerticalLabels={false}
showBarTops={false}
fromZero={true}
withHorizontalLines={true}
withVerticalLines={true}
withInnerLines={true}
/>`
Output we received:
Desired Output :
