RectAnnotation markers or annotations outside axis

[markov00]

Describe the solution you'd like
Some use cases require the annotation to be positioned outside the chart, to improve the chart readability without cluttering with overlapping elements and colors.

We should allow rendering rectangular annotations outside the chart area, for example right below the axis.

Current:

Desired:

Describe alternatives you've considered
For the implementation we can consider multiple alternatives or go in steps:

1. allow the user to specify a marker for RectAnnotations: the marker can be placed below the annotation in the center, like for a line annotation. A size parameter representing the width of the annotation in pixel, can be passed to the marker component to size it.

• Add a configuration to allow specifying a RectAnnotation outside the "linked" axis (below, above the horizontal axis, or at the right/ left of the vertical axis), but this can subsequentially be a worm hole of requests/options and configurations.
• consider the annotation as a composable chart

Additional context

https://codesandbox.io/s/elastic-charts-playground-qs1jr?file=/src/timeseries.tsx

[sorenlouv]

For visibility: this is needed for elastic/kibana#96559 which is scheduled for 7.14 (I know, tight deadline).

[nickofthyme]

@sqren or @smith could you look at this implementation (#1207) and let me know if that will suffice for your use case? Thanks

[sorenlouv]

Thank you @nickofthyme . I'll defer to @smith since he has been working on this.

[smith]

@nickofthyme the implementation on #1207 looks like it fits what we need. cc @katrin-freihofner.

[nickofthyme]

🎉 This issue has been resolved in version 31.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀