Visual overlapping of annotation icon and vertical axis tick/label

[dej611]

Describe the bug

We use the annotation system to draw thresholds in Lens, and upon adding the Icon marker associated with the annotation, it was noticed that it is possible a collision of the marker with the vertical axis.

Kibana Cross Issues
elastic/kibana#112793

[nickofthyme]

As of right now I believe we leave it to the user to set the value of the annotation gutter, if you will, such that it has the width or height it needs. This would be through theme.chartPaddings. Is this true @markov00?

In you case you are using the eui theme which removes the axes ticks making this collision more apparent.

I think we could improve this to be automatic in the future but there are cases like annotations outside and adaptive markBody that make it more difficult.

[dej611]

I made some experiments with annotation on the left/right/bottom axes tweaking some parameters.

Initial state with overlap:

Here's using the chartPaddings parameter (better, but the axes should shrink together with the chart IMHO):

Here's using the tickLabels.padding (better but the padding is applied in any direction around the label, not just between the label and the axis):

[markov00]

Yes @nickofthyme, at the moment this is true, we don't automatically allocate space for the icon on the axis.
Together with the nick workaround, I can suggest to move the icon to the opposite side of the axis to avoid collisions and to have a clean axis.

If you are in the bad situation of having a dual-axis chart (highly discouraged) is advised to keep the icon near the relative axis draw it inside the chart (better if placed on the top/bottom of the line annotation.

Remember that you can also use directly the value instead if just an icon as in the below example.

Finally you can also have the icon externally placed without adding the tickLabel.padding but using the tickLine:{size: sizeoftheicon, visible: true, stroke: 'transparent'}
this will add a 'transparent' tick line that can be used in replacement of the tick padding.

Also another possibility, that doesn't fully resolve but can help reading the chart is to color the axis with the same color of the annotation line to improve, for non-color blinded person, the link between the axis and the annotation in a dual axis situation

https://codesandbox.io/s/summer-browser-q4upn?file=/src/App.tsx

[markov00]

you can also use tickLabel: {padding: { inner: size_of_the_marker } } instead of tickLabel:{padding: size_of_the_marker}} to

[dej611]

you can also use tickLabel: {padding: { inner: size_of_the_marker } } instead of tickLabel:{padding: size_of_the_marker}} to

I think this one is the best tradeoff at the moment.

If you are in the bad situation of having a dual-axis chart (highly discouraged) is advised to keep the icon near the relative axis draw it inside the chart (better if placed on the top/bottom of the line annotation.

This is definitely an interesting idea and something we might consider given elastic/kibana#112921

Also another possibility, that doesn't fully resolve but can help reading the chart is to color the axis with the same color of the annotation line to improve, for non-color blinded person, the link between the axis and the annotation in a dual axis situation

This makes sense, but I doubt is compatible with a generic case where the user can have multiple annotations on the same axis with distinct colors as in our use case.

[dej611]

Managed to find a solution for all the various combinations (title + tick labels, title only, etc...) in this PR combining all the padding/margin parameters in the Axis component: elastic/kibana#112952