Show value on chart in bar charts is rendered in sections where it does not fit. Creates ugly bar charts.

[nicenemo]

Kibana version: 7.12.0

Elasticsearch version: Kibana version: 7.12.0

Server OS version: Latest Debian 10

Browser version: Chrome Version 90.0.4430.72 (Official Build) (64-bit)/Latest Safari

Browser OS version: Windows 10.0.19042 /MacOS latest stable

Original install method (e.g. download page, yum, from source, etc.): Debian packages
Describe the bug:

In bar charts; when enabling render values on charts the values are also rendered in when the text will not fit. Worse they are rendered on top of values of other segments cluttering the view. The new white outline does not not help.

Steps to reproduce:

1. Have a bar chart with a split by term with one term value only have a few entries and another more
2. enble show value on chart
3. the value numbers for the tiny segment will be rendered on top of the values of the other segment.

Expected behavior:

1. Values that do not fit in their segment are not rendered.
2. That ugly white outline is off by default or can be turned off.

Screenshots (if relevant):

Errors in browser console (if relevant):
Checked but not seen. Only deprecation warning on Date

Provide logs and/or server output (if relevant):
Nothing relevant

Any additional context:
Tested in Chrome on Windows and Safari on MacOS

Is it related to this failing test? #97007

[elasticmachine]

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

[stratoula]

@nicenemo thanks a lot for the feedback. After discussing it offline with @markov00 it seems that there are some improvements we could make to improve this functionality:

• for the hide values with no space to render, we can try to set the hideClippedValue in the displayLabel settings. This will not render that are clipped by the rectangle geometry, we should check if it works for all cases

• for the white outline is off by default. We can probably expose an option to disable it

[stratoula]

I just merged #106198 which solves the problems mentioned here with the white outline. Also the new elastic-charts release handles the problem with the values that do not fit on the bar