Re-position chart annotation when it is near the border

[pheyos]

Is your feature request related to a problem? Please describe.
The date label of the event rate chart in the ML revert model snapshot flyout does not look ideal when it is near the border of the chart:

See codesandbox repro here https://codesandbox.io/s/sad-pond-n2pqh?file=/src/App.tsx

Describe the solution you'd like
Leave the small arrow where it is but re-position the text such that it is better readable / does not contain so many line breaks.

Additional context
In a slack discussion, it was suggested to reuse tooltip functionality to do this.

[nickofthyme]

🎉 This issue has been resolved in version 29.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[nickofthyme]

Hey @pheyos this is now available in kibana master as of elastic/kibana#98093.

You can now throw the squashed text content into the markerBody prop of the LineAnnotation. Here is an example which looks like this in code...

elastic-charts/stories/annotations/lines/8_advanced_markers.tsx

Lines 124 to 132 in 62f8841

	<LineAnnotation
	id="annotation_y"
	domainType={AnnotationDomainType.YDomain}
	dataValues={[{ dataValue: metric }]}
	style={annotationStyle}
	hideTooltips
	marker={<EuiIcon type={iconMap[side]} />}
	markerBody={getMarkerBody((v) => `The value is ${v} right here!`, isVerticalSide)}
	/>

Lmk if you have any questions or trouble with it. Thanks! 🙏