elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
372 stars 120 forks source link

Hide tick label for floating end label #2545

Open nickofthyme opened 1 month ago

nickofthyme commented 1 month ago

Describe the issue

The new Horizontal Bullet chart has a floating end label that is pushed to be left of the tick (right-aligned) when there is no longer room for it on the right side of the tick (left-aligned). However we never check if there is room for the tick label of the left side before doing this.

Thus where there is a long formatted value, the last 2 tick labels can collide.

To Reproduce

  1. Create a horizontal Bullet chart
  2. Add a range with large values or a long (~8 char) formatted length
  3. Shrink the width down to where the labels collide.

Expected behavior

Labels do no collide with each other

Screenshots

Image

Additional context

This seemingly would also apply to the vertical Bullet chart but to a lessor degree. Nonetheless should check for this case as well.