[Lens] Options to trim axis labels/ticks for long text field values

[shahzad31]

Describe the feature: When you are doing top values on a field for example url, it takes all the width in the chart

for example

Describe a specific use case for the feature:

We should provide a feature in lens, so that we can trim the axis labels, by truncating the value, perhaps user can specify the width that can be consumed by a label. User should be able to see the full value on hovering the truncated value in a tool tip.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[ghudgins]

relates to https://github.com/elastic/kibana/issues/41418 as well

[flash1293]

cc @markov00 Do you see a good short term solution for this issue?

[markov00]

@flash1293 not a very short term, but if you can open an issue on our repo we can push it in our roadmap with higher priority. Can be somehow fixed with something like https://github.com/elastic/elastic-charts/issues/313 + adding a limit for the label width to a max % of the chart.

Probably in the meantime you can fix this in lens by:

• manually truncating the x values to a specific number of chars
• and change the tooltip header to render fully the x value instead of the truncated one. a possible way to do that is to create an object for the X value, one with the full title, one with the truncated one, using the truncated as the accessor and using the full one on the tooltip Truncation should happen a few chars before the end like http://www.elasti......cs/mappings, as usually the ending part of the text has more information (but it really depends on the context)

[flash1293]

@ghudgins what do you think about a quick fix like Marco suggested? We can implement this on the Lens side, but I guess we should make it configurable because it's probably not always the right behavior.

[shahzad31]

in UI it ends up displaying something like this

[ghudgins]

@flash1293 @markov00 I think the extra axis formatting option for this sounds okay...enabled by default on new visualizations as I feel it's the most flexible/versatile option (strong hypothesis: truncating middle/end is better than not truncating in most cases). Only argument I can come up with against making it configurable is if we think future legend controls will have a completely different scheme and we'll have to "tow" this extra setting along...seems unlikely.

[flash1293]

When do we start truncating? It feels like the thing we want to optimize is label to chart ratio, but that would require font size and chart width information - not sure whether we can reliably get the first one.

Although, as it's possible to turn off the behavior, we could also just go with a fixed number of characters.

[ghudgins]

deleted my previous comment....had legends on the brain. I think we'd have to find a length that just mitigates this issue. Legends today chop at 30 characters when configured on the left/right size. We could consider doing a similar length here or go a bit longer since, at least on horiz bar, we have the space. Definitely like the ... in the middle somewhere if possible

[ghudgins]

+1 " truncate X bars names/wrapping would be even better. I had to drop lens just because the label names are too large I dont have a way to show it vertically and truncate"

[Heenawter]

Encountered issues with this during 8.7 testing week so ++ to adding the ability to truncate long labels.

For reference, attaching one of the wacky charts I was able to make because of the super long agent labels in the sample Logs data :eyes:

[markov00]

Yes, we are on it https://github.com/elastic/elastic-charts/issues/1490 but this is a tricky problem, in particular with angled labels. We will add a bit more constraints on the layout in the future to allow simplified handling of those cases.