[XY axis] Values on bar charts

[stratoula]

I create this issue to discuss what we can do to improve the way that the values are depicted on bar charts.
For all the below mentioned cases the Show values switch is set to true (XY axis). Lens behaves differently. The setting to display the values is disabled for histograms.

XY es-charts settings:

displayValueSettings={{
  showValueLabel,
  hideClippedValue: true,
}}

Lens settings:

displayValueSettings: {
   showValueLabel: shouldShowValueLabels && valueLabels !== 'hide',
   isAlternatingValueLabel: false,
   isValueContainedInElement: true,
   hideClippedValue: true,
}

1. Date histogram aggregation with very small bar widths:

XY axis

Vislib

Lens
Lens doesn't allow the users to depict values on histograms

The old implementation hides the values if the bar widths are very small. XY axis tries to do it but it seems that it doesn't fit well in all cases

2. Split series with terms aggregation (small bar height)

XY charts

Vislib

Lens
Here also the setting to turn on the values is also disabled

3. Both x-axis and split series with terms aggregation for non-stacked bars

XY chart

Vislib

Lens

Lens depicts the values vertically in order to fit.

Moreover we had some feedback about the white outline too #97428

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[stratoula]

I like the way that vislib handles this.

• If the value doesn't fit, it is not rendered
• I think we can go with smaller font size
• I don't think that rendering the value vertically as Lens does is the best solution here because it is not so readable
• It would be awesome if we could change the color of the font depending on the bar color. In that way, we could avoid using the white outline

These are some thoughts. I would love your feedback @ghudgins @markov00 @flash1293

[flash1293]

I think your list is great @stratoula - can we configure these things in current elastic-charts? I think we can control the font size but the others can't be configured to behave like the vislib feature at the moment, right?

[stratoula]

Exactly Joe. If I am not mistaken I think we can't configure the others. It would be awesome if we could have the same behavior between Lens and XY axis. In that way, we could remove the logic of disabling the setting for histograms.

[dej611]

• If the value doesn't fit, it is not rendered

I agree on this. I think there's a combination of options that leads to the vertical stacking layout, but it would be nice to avoid that. For instance the hide clipped value option could cover also this case.

• I think we can go with smaller font size

I think it has been discussed already this and we picked a specific min font size in Lens.

• I don't think that rendering the value vertically as Lens does is the best solution here because it is not so readable

See first point.

• It would be awesome if we could change the color of the font depending on the bar color. In that way, we could avoid using the white outline

Agree, I also like this solution as well. I've tried in the past to implement this, but there's still some work to do - for instance it's tricky how to compute contrast with the background in this case.

[flash1293]

I think it has been discussed already this and we picked a specific min font size in Lens.

That's true, however there were multiple user complaints about this configuration which I think makes it worth reconsidering.

[ghudgins]

All of these ideas sound great: 1) don't render if it doesn't fit 2) decrease font size for value labels 3) color options or something that alleviates the white outline complaint

related charts issue: elastic/elastic-charts#1123