elastic-charts
elastic-charts copied to clipboard
[xy] Nicely compute the axis label overflow
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:
- Create a vertical bar chart with 3 bars.
- Use a very long label as the x value for the bar in the middle of the chart
- 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

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