How to remove spacing from x labels on react-native-chart kit

96 Views Asked by At

Im creating a dashboard on react native and in the linechart the labels are not show well and I need to reduce the padding of the labels cause is getting out of the card,and is not displaying well

this is my code

<ScrollView>
            <LineChart
                data={chartData}
                width={(Dimensions.get("window").width) * 0.95}
                height={300}
                verticalLabelRotation={90}
                yAxisInterval={1}
                chartConfig={{
                    backgroundColor: "#272b34",
                    backgroundGradientFrom: "#272b34",
                    backgroundGradientTo: "#272b34",
                    propsForVerticalLabels: { padding: 0, },

                    propsForLabels: { fontSize: 10, margin: 0, fontWeight: 'bold' }, // Establece margin en 0 o null
                    decimalPlaces: 0,
                    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    style: {
                        borderRadius: 16,

                    },
                    propsForDots: {
                        r: "6",
                        strokeWidth: "2",
                        stroke: "#56AF84"
                    }
                }}
                bezier
                style={{
                    height: '100%',
                    marginVertical: 10,
                    borderRadius: 16,



                }}
            />
        </ScrollView>

enter image description here

0

There are 0 best solutions below