0

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! https://i.stack.imgur.com/iUDKB.png 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>
    )
Huy Quang
  • 11
  • 5

0 Answers0