elastic-charts icon indicating copy to clipboard operation
elastic-charts copied to clipboard

[xy] Nicely compute the axis label overflow

Open markov00 opened this issue 4 years ago • 3 comments

Describe the bug When showing a categorical vertical bar chart and one label is way longer then all the others the following happen:

  • we compute the axis label overflow (the space to leave blank on the right/left of an horizontal axis) depending on the maximum label size: we actually reduce the chat width by the maximum label size, putting half of that size to the right and half on the left of the chart
  • the previous point happens before computing the visible labels, which could hide some of them due to occlusions.
  • the result is that we will render a smaller chart to accommodate this "maximum size" label, but we are not showing that label due to occlusions.

To Reproduce Steps to reproduce the behavior:

  1. Create a vertical bar chart with 3 bars.
  2. Use a very long label as the x value for the bar in the middle of the chart
  3. See the overflow is calculated also if the label is not shown due to its overlap

Expected behaviour We should limit the size of the tick labels, trim or put the text into multiple lines. The overflow should be always justified: if we are showing a label that overflows one edge of the axis lets apply the overflow and reduce the chart size. Adjust the overflow depending on the actual overflow of the chart. Use the monotonic hill clumber method to compute the exact overflow

Screenshots image

Additional context Previously described in https://github.com/elastic/elastic-charts/issues/758

markov00 avatar Nov 19 '21 13:11 markov00

related to https://github.com/elastic/elastic-charts/issues/1179

markov00 avatar Dec 06 '21 15:12 markov00

related to https://github.com/elastic/elastic-charts/issues/313

markov00 avatar Jul 27 '23 16:07 markov00