Grid Axis labels are overlapping
Describe the bug
I generate the axis values / labels from an List of double. When the numbers are too close to each other, it results overlapping labels.
The numbers overlap and are not clear to the user.
The only thing that I can think of would be using buildLabel function. And still not sure if this the ideal situation, because I would still need to determine whether they will overlap.
To Reproduce Use the following data for Y axis:
[20.88, 114.79, 148.51, 154.79, 156.7, 157.45, 213.14]
Use the following data for X axis:
[0.0, 9.15, 10.38, 11.44, 15.26, 16.48, 18.98]
Here is the grid code I have:
grid: pw.CartesianGrid(
xAxis: pw.FixedAxis(xValues,
marginStart: 30,
marginEnd: 30,
ticks: true,
divisions: true,
divisionsDashed: true,
),
yAxis: pw.FixedAxis(yValues,
marginStart: 30,
marginEnd: 30,
ticks: true,
divisions: true,
divisionsDashed: true),
),
I am also using marginStart and marginEnd of 30.
Expected behavior I am expecting labels to be distanced.
Screenshots
Desktop (please complete the following information):
- [ ] iOS
- [ ] Android
- [ ] Browser
- [ ] Windows
- [x] macOS
For whoever runs into a similar problem, I found a clean workaround for this. Just do a fixed grid with equal intervals, then you can display the coordinates value on top of the point in the graph, if needed. It works pretty good this way, and is much cleaner and clearer.