Open gokulravi2010 opened 8 months ago
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} />`
rgba(124,124,124,${opacity})
Output we received:
Desired Output :
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 :