How can I fix the text overlapping in this chart?

21 views Asked by At

As can be seen here, the datapoints text labels are overlapping a lot. Is it possible to fix this while still displaying the text?

I am using react-native-charts-wrapper.

            <LineChart
                style={styles.chart}
                data={{
                    dataSets: [
                        {
                            label: props.car,
                            values: values,
                            config: {
                                color: processColor('#2563eb'),
                                lineWidth: 2,
                                circleColor: processColor('#2563eb'), 
                                circleRadius: 2, 
                                drawCircleHole: true, 
                            },
                        },
                    ],
                }}
                xAxis={{
                    valueFormatter: labels,
                    position: 'BOTTOM',
                    granularity: 1,
                    axisMaximum: labels.length,
                    axisMinimum: 0,
                    drawGridLines: true,
                    drawAxisLine: true,
                    labelRotationAngle: -45,
                }}
                yAxis={{
                    left: {
                        drawLabels: true,
                    },
                    right: {
                        drawLabels: false,
                    },
                }}
                legend={{ enabled: false }}
            />

Chart Overlapping

0

There are 0 answers