[Lens] Horizontal bar visualizations sharing vertical axis are slightly offset on dashboard

[jordansirwin]

Kibana version:
7.14.2

Elasticsearch version:
7.14.2

Server OS version:

Browser version:
Version 15.1 (16612.2.9.1.30, 16612)

Browser OS version:
macOS Big Sur (11.6)

Original install method (e.g. download page, yum, from source, etc.):
Elastic Cloud

Describe the bug:

If you have multiple Lens horizontal bar visualizations that would share a vertical axis positioned horizontally on a dashboard, the horizontal bars don’t line up exactly. Oddly, the offset seems change between the bars near the top and those near the bottom. It's only a few pixels, but it could be perfect :D

Not sure if this is due to show/hiding the legend or show/hiding the axis (or something else).

Steps to reproduce:

1. Create multiple Lens visualizations using horizontal bar chart. These visualizations should share a vertical axis.
2. Add the visualizations to a dashboard sharing the same horizontal row
3. Hide the vertical axis on all but the left-most visualization (since they share the same values, it's wasteful to repeat the axis over and over)
4. Note the left-most visualization that shows the vertical axis has horizontal bars offset slightly from the ones hiding the axis

Expected behavior:

I'd expect the alignment of bars to be the same across all visualizations to help cement they share the same axis.

Screenshots (if relevant):

Actual dashboard with redacted information:

Synthetic example showing same behavior:

See above example here https://codesandbox.io/s/trusting-wood-xd4hs

Errors in browser console (if relevant):
No errors

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

Any additional context:

Removal of the axis labels causes the slight misalignment. A temporary fix could be hide title and use tickFormat = () => ''.

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[elasticmachine]

Pinging @elastic/datavis (Team:DataVis)

[flash1293]

It seems like this is something we want to solve via small multiples @ghudgins ?

[flash1293]

Probably blocked on #72063

[ghudgins]

would be nice if having axis on/off wouldn't adjust the visualizations in panels.

but yeah - fixing via small multiples (or some of the elastic-charts concepts for shared axis, multi chart visualizations could be good threads to solve the core issue)

[markov00]

This probably can also be solved without small multiples if we solve this elastic/elastic-charts#1179 first and few issues related to the axis label overflows.