Skip to content

[XY axis] Values on bar charts #101573

@stratoula

Description

@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
image

Vislib
image

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

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

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

XY charts
Screenshot 2021-06-08 at 1 35 25 PM

Vislib
image

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

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

XY chart
image

Vislib
image

Lens
image

Lens depicts the values vertically in order to fit.

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

Metadata

Metadata

Labels

Feature:ElasticChartsIssues related to the elastic-charts libraryFeature:LensFeature:XYAxisXY-Axis charts (bar, area, line)Team:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//bugFixes for quality problems that affect the customer experiencediscussimpact:highAddressing this issue will have a high level of impact on the quality/strength of our product.

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions