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