[Bullet] bullets more gracefully handle many tick values

[ghudgins]

Is your feature request related to a problem? Please describe.
When the calling application passes in a high number of ticks the bullet chart quickly overlaps.
ticks={[1000, 2000, 3000, 4000, 5000, 6000, 7000]} on the storybook example

Describe the solution you'd like
Reduce the number of ticks when there isn't enough space. Prioritize the ends and midpoint first? (discuss)

This solution needs to be in either the parent application or elastic-charts. This is a discussion as well: It would be nice for responsive parent applications if elastic-charts handled this case but, on the other side, this is ultimately reduced control to the end user if things don't fit. Should elastic-charts be somewhat opinionated about tick overlap? This case is very easy to get into when using Horizontal Bullets specifically.

Describe alternatives you've considered
Fixing it in the parent application that can pass in ticks that fit (and build the smarts that do this detection of an overlap).

Kibana Cross Issues
Related to Lens integration of this visualization type elastic/kibana#89859 CC @flash1293

Checklist

Delete any items that are not applicable to this feature request.

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[markov00]

@gvnmagni we should find a nice way to fix this problem.
First and last ticks are always desirable and we should try to always render them, there could be cases with negative or non zero min as described by Stephen Few in his Bullet graph design specs:

The quantitative range usually begins at zero, but may begin with a negative number if appropriate, and may also begin at a value greater than zero if it is useful to narrow the range of the scale to support a finer focus on the details.

All the other ticks can just be rendered in nicely rounded intervals within the total range.

[gvnmagni]

quick question, are we able to detect if there is overlapping between labels? Seems to me that a similar problem can be found on the X Axis (time) of our charts, how do we handle labels in that case? Because maybe the solution could be similar

I tried to sketch a couple of quick solutions just to see if we can do any of the possibilities shown, they are not meant to be comprehensive of everything (such as zero labels and negative values) but I wanted to understand a bit better before jumping to conclusions. Does any of these seems doable?

[flash1293]

Not trying to guide the solution too much, but right now formatting in most places (except for the new time axis because it's so different) is controlled from Kibana and it's a simple function (value -> formatted value) passed into elastic-charts without any context. So to do something like changing the way the value 1000 is shown based on the available pixels (option A), we either need to make them behave differently than other formatting in Kibana leading to an inconsistency or leave that to the user and treat it as a black box for now (B and C would be compatible). There's an item on our agenda to change this way how formatting works and give the chart more control, but we are not there yet.

[gvnmagni]

I would definitely go with something that we already use, both for effort required and for consistency, so I'd go for Option B or C (no big preference here from my side, seems like option C is already in use for other charts such as Barcharts).

Is it possible to prioritise certain ticks labels? The only reason why I ask is that when we have negative values it would be probably clever to highlight the zero value. I would love to hear from you all, but from my point of view the priority order should be:

1. Limits (lower and upper)
2. Zero value (if values are negative)
3. Other labels

Would also great to visually highlight it, as shown in the document that Marco shared. Do you think is possible?

[flash1293]

This makes a lot of sense to me 👍