I am new to React native chart kit. What I'm trying to do is to create a simple bar chart with 4 columns. But I don't know how to move the vertical label column to the left to create more space. Please help me if you know! Thank you in advance!
And here is my source code:
const chartConfig = {
backgroundGradientFrom: '#fff',
backgroundGradientFromOpacity: 1,
backgroundGradientTo: '#fff',
backgroundGradientToOpacity: 1,
fillShadowGradientOpacity: 1,
color: (opacity = 1) => `gray`,
labelColor: (opacity = 1) => `#333`,
strokeWidth: 2,
barPercentage: 0.6,
decimalPlaces: 0,
propsForLabels: {
fontSize: 10,
},
propsForVerticalLabels: {
inlineSize: 0,
},
}
const labels = data.labels.map((item: any) => item)
const values = data.data.map((item: any) => item)
const chartData = {
labels,
datasets: [
{
data: values,
colors: [() => '#6AA84F', () => '#42B3F3', () => '#E69138', () => '#F94144'],
},
],
}
return (
<View style={styles.container}>
<View style={styles.note_block}>
<View style={[styles.note, { backgroundColor: '#6AA84F' }]}>
<Text style={styles.note_number}>{values[0]}</Text>
</View>
<View style={[styles.note, { backgroundColor: '#42B3F3' }]}>
<Text style={styles.note_number}>{values[1]}</Text>
</View>
<View style={[styles.note, { backgroundColor: '#E69138' }]}>
<Text style={styles.note_number}>{values[2]}</Text>
</View>
<View style={[styles.note, { backgroundColor: '#F94144' }]}>
<Text style={styles.note_number}>{values[3]}</Text>
</View>
</View>
<BarChart
yAxisLabel=""
yAxisSuffix=""
data={chartData}
width={360}
height={220}
chartConfig={chartConfig}
showBarTops={false}
fromZero
withCustomBarColorFromData
flatColor
/>
</View>
)