dart_pdf icon indicating copy to clipboard operation
dart_pdf copied to clipboard

Grid Axis labels are overlapping

Open ImadMAKS opened this issue 9 months ago • 2 comments

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 Image

Desktop (please complete the following information):

  • [ ] iOS
  • [ ] Android
  • [ ] Browser
  • [ ] Windows
  • [x] macOS

ImadMAKS avatar Apr 03 '25 01:04 ImadMAKS

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.

ImadMAKS avatar Apr 03 '25 21:04 ImadMAKS