0
178
ViewsBarchart design in react native chat kit
I am using BarChart from react native chat kit
and i want to achieve following design
so far i have reached this but still not able to achieve fully..
kindly help me in the actual bar design
this is my code
<BarChart
data={chartData}
width={400}
height={160}
chartConfig={chartConfig}
showValuesOnTopOfBars={true}
showBarTops={false}
withHorizontalLabels={false}
/>
//config
const chartConfig = {
backgroundGradientFrom: '#ffffff',
fillShadowGradient: '#4084F4',
decimalPlaces: 0,
barPercentage: 0.5,
fillShadowGradientOpacity: 1,
backgroundGradientFromOpacity: 1,
backgroundGradientTo: '#ffffff',
spacingInner: 0.7,
backgroundGradientToOpacity: 1,
color: () => `#4084F4`,
labelColor: () => `black`,
withShadow: false,
propsForBackgroundLines: {
strokeWidth: 0,
},
};
·
Juan Pablo Isaza
1 answers
Answer question0
const chartConfig = {
backgroundGradientFrom: 'white',
backgroundGradientFromOpacity: 'white',
backgroundGradientTo: 'white',
color: () => 'red',
// fillShadowGradient: 'green',
fillShadowGradientOpacity: 1,
labelColor: () => `rgba(85, 139, 229)`,
barPercentage: 0.3,
barRadius: 5,
propsForBackgroundLines: {
strokeWidth: 1,
strokeDasharray: null,
stroke: '#F0F0F0',
},
};
<BarChart
data={AllTimeGraphDATA}
// width={width}
// height={height}
width={width - 20}
height={height * 0.24}
chartConfig={chartConfig}
showBarTops={false}
yAxisLabel={''}
fromZero={true}
segments={2}
/>
Apply this code It will definitely work
·
Juan Pablo Isaza
Report
Answer question