[Lens] values on chart

[AlonaNadler]

When charts are used as part of a dashboard or as a report. It often helps to have labels on the chart so users don't need to hover to read the value. Values on the chart can work in line, bar, area charts.
Example

example TSVB top N chart with values next to each bar

Lens for the same example

In the example it's easier to read the TSVB top N chart mainly due to the labels(labels can be on or outside the bar)

cc: @markov00

[markov00]

We actually already the option to show the bar value as a text label for bar charts only at the moment,
we can extend this to apply the same to lines and area (but I bet it's a bit harder to read a vertical area/line chart than a bar chart)

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[elasticmachine]

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

[wylieconlon]

@markov00 I think this issue is blocked by some of the rendering problems with value labels:

elastic/elastic-charts#454
elastic/elastic-charts#238

[wylieconlon]

This is closely related to another issue, is it worth having two separate issues for value labels? #55262

[markov00]

The Total text label is something different, so this needs to be a new ER on the elastic-chart repo.

Except for the color contrast issue that can be fixed now (after the work done on the color contrast on partition charts) the overlapping issue is a bit more difficult to achieve.

We will for sure work on that, but I'd like to describe a few best practices on that (mostly from Dona Wong) :

• we should place labels on horizontal bars, more than showing on vertical bars: vertical bars are easier to read and understand, where horizontal ones are more difficult to compare, thus we should apply the labeling mostly on horizontal bars
• we should limit the number of horizontal bars to 4 or fewer categories. Showing labels for hundreds of bars like in the issue example is an overkill, showing them on a vertical bar chart is also confusing
• we should remove axis lines and the horizontal axis and replace them with value labels

In the example proposed by Alona, the number of bars is significantly low that adding the value label is worth and increase the readability of the chart, we should try to allow the user add labels only on few cases if possible.

I've updated the elastic/elastic-charts#454 with some notes. We probably should reconsider Labels as a first-class citizen in Charts more than a decorator for bars

[wylieconlon]

I think we can reduce the scope of this implementation to allowing value labels for single-series bar charts only, such as the ones shown in the original comment. Elastic-charts doesn't support labeling for line or area charts, and also has styling issue for multi-series bar charts. We have precedent for adding this kind of restriction to charts in Lens, because you can't use fitting functions on bar charts or stacked area charts, so we disable the feature.

Do you think this reduction of scope would solve your original request @AlonaNadler?

[AlonaNadler]

sounds good, I think it is a step in the right direction.
For years we got requests for this, it is also implemented in Visualize bar chart

[flash1293]

As discussed in the meeting, for the short-term we will focus to implement this for unstacked bars only as a chart-level setting.

Blocked on:

• Font size relative to bar size Value labels could have a font size as a ratio of the bar width elastic-charts#788
• Font color relative to bar color Change value labels colors depending on background elastic-charts#238
• Label offset defined relative to geometry Have a displayValueSettings option to dynamically set the label's offset based on the label box elastic-charts#792