diff --git a/packages/osd-charts/.eslintrc.js b/packages/osd-charts/.eslintrc.js
index b465a0cce9a..8f22a683ea3 100644
--- a/packages/osd-charts/.eslintrc.js
+++ b/packages/osd-charts/.eslintrc.js
@@ -236,6 +236,7 @@ module.exports = {
     'react/jsx-props-no-spreading': 0,
     'react/static-property-placement': 0,
     'react/state-in-constructor': 0,
+    'react/jsx-wrap-multilines': 0,
 
     /*
      * jest plugin
diff --git a/packages/osd-charts/api/charts.api.md b/packages/osd-charts/api/charts.api.md
index 42e3f5ad72d..fdd3efed830 100644
--- a/packages/osd-charts/api/charts.api.md
+++ b/packages/osd-charts/api/charts.api.md
@@ -8,6 +8,7 @@ import { $Values } from 'utility-types';
 import { ComponentType } from 'react';
 import { default as React_2 } from 'react';
 import { ReactChild } from 'react';
+import { ReactNode } from 'react';
 
 // @public
 export type Accessor = AccessorObjectKey | AccessorArrayIndex;
@@ -457,6 +458,9 @@ export type ColorVariant = $Values<typeof ColorVariant>;
 // @public (undocumented)
 export type CompleteBoundedDomain = DomainBase & LowerBound & UpperBound;
 
+// @public
+export type ComponentWithAnnotationDatum = ComponentType<LineAnnotationDatum>;
+
 // @public (undocumented)
 export type ContinuousDomain = [min: number, max: number];
 
@@ -1197,7 +1201,8 @@ export interface LineAnnotationDatum {
 // @public (undocumented)
 export type LineAnnotationSpec = BaseAnnotationSpec<typeof AnnotationType.Line, LineAnnotationDatum, LineAnnotationStyle> & {
     domainType: AnnotationDomainType;
-    marker?: JSX.Element;
+    marker?: ReactNode | ComponentWithAnnotationDatum;
+    markerBody?: ReactNode | ComponentWithAnnotationDatum;
     markerDimensions?: {
         width: number;
         height: number;
diff --git a/packages/osd-charts/integration/helpers.ts b/packages/osd-charts/integration/helpers.ts
index 059cff77018..49dbd2acc17 100644
--- a/packages/osd-charts/integration/helpers.ts
+++ b/packages/osd-charts/integration/helpers.ts
@@ -17,11 +17,15 @@
  * under the License.
  */
 
+/* eslint-disable jest/no-export */
+
 import { lstatSync, readdirSync } from 'fs';
 import path from 'path';
 
 import { getStorybook, configure } from '@storybook/react';
 
+import { Rotation } from '../src';
+
 export type StoryInfo = [string, string, number];
 
 export type StoryGroupInfo = [string, string, StoryInfo[]];
@@ -106,3 +110,27 @@ export function getStorybookInfo(): StoryGroupInfo[] {
     })
     .filter(([, , stories]) => stories.length > 0);
 }
+
+const rotationCases: [string, Rotation][] = [
+  ['0', 0],
+  ['90', 90],
+  ['180', 180],
+  ['negative 90', -90],
+];
+
+/**
+ * This is a wrapper around it.each for Rotations
+ * This is needed as the negative sign (-) will be excluded from the png filename
+ */
+export const eachRotation = {
+  it(fn: (rotation: Rotation) => any, title = 'rotation - %s') {
+    // eslint-disable-next-line jest/valid-title
+    return it.each<[string, Rotation]>(rotationCases)(title, (_, r) => fn(r));
+  },
+  describe(fn: (rotation: Rotation) => any, title = 'rotation - %s') {
+    // eslint-disable-next-line jest/valid-title, jest/valid-describe
+    return describe.each<[string, Rotation]>(rotationCases)(title, (_, r) => fn(r));
+  },
+};
+
+/* eslint-enable jest/no-export */
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-advanced-markers-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-advanced-markers-visually-looks-correct-1-snap.png
new file mode 100644
index 00000000000..0081835176e
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-annotations-lines-advanced-markers-visually-looks-correct-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..969af042c1d
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..7c0dfb87595
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..0081835176e
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..b6d01dfbcc6
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..0caf956d920
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..9ffb26c2728
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..fe2c3515df6
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..05ed74aa315
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..19182a1557c
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..01afa450395
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..bd8168450b4
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..d74915a448a
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-bottom-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..450ac906adf
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..a9ffe919d64
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..579d9b1ed58
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..6b3e8ac1d1c
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..6adbbd0d7e1
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..0e6e9ac1b28
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..79fbdcafa3b
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..9936a97f0d6
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..a850632b681
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..db6f53401dc
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..1499ba91d33
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..a2c862a4f84
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-left-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..00126e1cd3f
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..493c67fbddc
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..d139c956e6c
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..2a39acb9ab9
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..45bf81793cb
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..ec9e1e91d8e
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..97380f0cead
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..603d2c9b871
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..7417b004798
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..de2107f7e9e
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..2c84fe8aed1
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..75d4d2d0226
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-right-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..c4d248d4469
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..abd350b1a40
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..7ccf467b7dd
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..498c050cc23
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..d3285cf7c89
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..873ca4c3290
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..4755ba8cc33
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..644f12674af
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..8abf01cec6d
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
new file mode 100644
index 00000000000..05132809fcc
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
new file mode 100644
index 00000000000..00c69230935
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
new file mode 100644
index 00000000000..e3f164de275
Binary files /dev/null and b/packages/osd-charts/integration/tests/__image_snapshots__/annotations-stories-test-ts-annotations-stories-advanced-markers-annotation-marker-side-top-rotation-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png differ
diff --git a/packages/osd-charts/integration/tests/annotations_stories.test.ts b/packages/osd-charts/integration/tests/annotations_stories.test.ts
index 7f2330c2c1d..06ea11801c5 100644
--- a/packages/osd-charts/integration/tests/annotations_stories.test.ts
+++ b/packages/osd-charts/integration/tests/annotations_stories.test.ts
@@ -17,31 +17,19 @@
  * under the License.
  */
 
+import { Position } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Annotations stories', () => {
   describe('rotation', () => {
-    it('rotation - 0', async () => {
+    eachRotation.it(async (rotation) => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=0',
-      );
-    });
-    it('rotation - 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=90',
-      );
-    });
-    it('rotation - negative 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=-90',
-      );
-    });
-    it('rotation - 180', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=180',
+        `http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=${rotation}`,
       );
     });
   });
+
   describe('Render within domain', () => {
     it('cover from 0 to end domain', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -69,6 +57,7 @@ describe('Annotations stories', () => {
       );
     });
   });
+
   describe('Render with zero domain or fit to domain', () => {
     it('show annotation when yDomain is not zero value', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -101,6 +90,7 @@ describe('Annotations stories', () => {
       );
     });
   });
+
   describe('Render with no group id provided', () => {
     it('show annotation when group id is provided no y0 nor y1 values specified', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -128,4 +118,16 @@ describe('Annotations stories', () => {
       );
     });
   });
+
+  describe('Advanced markers', () => {
+    describe.each<Position>(Object.values(Position))('Annotation marker side - %s', (side) => {
+      eachRotation.describe((rotation) => {
+        it.each<number>([0, 15, 30])('renders marker annotation within chart canvas - metric: %i', async (metric) => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/annotations-lines--advanced-markers&knob-Debug=&knob-show legend=true&knob-chartRotation=${rotation}&knob-Side=${side}&knob-TickLine padding for markerBody=30&knob-Annotation metric=${metric}`,
+          );
+        });
+      });
+    });
+  });
 });
diff --git a/packages/osd-charts/integration/tests/axis_stories.test.ts b/packages/osd-charts/integration/tests/axis_stories.test.ts
index 9dde525eb3c..2ca54c65904 100644
--- a/packages/osd-charts/integration/tests/axis_stories.test.ts
+++ b/packages/osd-charts/integration/tests/axis_stories.test.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { Position, Rotation } from '../../src';
+import { Position } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Axis stories', () => {
@@ -78,16 +79,11 @@ describe('Axis stories', () => {
     );
   });
 
-  it.each<[string, Rotation]>([
-    ['0', 0],
-    ['90', 90],
-    ['180', 180],
-    ['negative 90', -90],
-  ])('should render correctly rotated ticks - %s', async (_, rotation) => {
+  eachRotation.it(async (rotation) => {
     await common.expectChartAtUrlToMatchScreenshot(
       `http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-disable axis overrides_general=true&knob-Tick label rotation_shared=${rotation}`,
     );
-  });
+  }, 'should render correctly rotated ticks - %s');
 
   describe('Small multiples', () => {
     const allPositions = [Position.Top, Position.Right, Position.Bottom, Position.Left];
diff --git a/packages/osd-charts/integration/tests/bar_stories.test.ts b/packages/osd-charts/integration/tests/bar_stories.test.ts
index 0f63b5edc64..cbbb87cc0da 100644
--- a/packages/osd-charts/integration/tests/bar_stories.test.ts
+++ b/packages/osd-charts/integration/tests/bar_stories.test.ts
@@ -17,18 +17,17 @@
  * under the License.
  */
 
-import { DisplayValueStyle, HorizontalAlignment, Rotation, VerticalAlignment } from '../../src';
+import { DisplayValueStyle, HorizontalAlignment, VerticalAlignment } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Bar series stories', () => {
   describe('[test] axis positions with histogram bar series', () => {
-    [0, 90, -90, 180].forEach((rotation) => {
-      it(`Should render correct axis - rotation ${rotation === -90 ? 'negative 90' : rotation}`, async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          `http://localhost:9001/?path=/story/interactions--brush-selection-tool-on-histogram-time-charts&knob-debug=&knob-chartRotation=${rotation}`,
-        );
-      });
-    });
+    eachRotation.it(async (rotation) => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/interactions--brush-selection-tool-on-histogram-time-charts&knob-debug=&knob-chartRotation=${rotation}`,
+      );
+    }, 'Should render correct axis - rotation %s');
   });
 
   describe('[test] switch ordinal/linear x axis', () => {
@@ -49,47 +48,17 @@ describe('Bar series stories', () => {
 
   describe('[test] histogram mode (linear)', () => {
     describe('enableHistogramMode is true', () => {
-      it('rotation - 0', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=0&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=-90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=180&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
 
     describe('enableHistogramMode is false', () => {
-      it('rotation - 0', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=0&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=-90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=180&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
@@ -115,47 +84,17 @@ describe('Bar series stories', () => {
 
   describe('[test] histogram mode (ordinal)', () => {
     describe('enableHistogramMode is false, hasHistogramBarSeries is false', () => {
-      it('rotation - 0', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=0&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=90&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=-90&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=180&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
 
     describe('enableHistogramMode is true, hasHistogramBarSeries is true', () => {
-      it('rotation - 0', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=0&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=90&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=-90&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=180&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
@@ -176,12 +115,7 @@ describe('Bar series stories', () => {
   });
 
   describe('value labels positioning', () => {
-    describe.each<[string, Rotation]>([
-      ['0', 0],
-      ['90', 90],
-      ['180', 180],
-      ['negative 90', -90],
-    ])('rotation - %s', (_, rotation) => {
+    eachRotation.describe((rotation) => {
       describe.each<NonNullable<DisplayValueStyle['alignment']>['vertical']>([
         VerticalAlignment.Middle,
         VerticalAlignment.Top,
diff --git a/packages/osd-charts/integration/tests/interactions.test.ts b/packages/osd-charts/integration/tests/interactions.test.ts
index 064df5c72f0..ef1bc3c4aab 100644
--- a/packages/osd-charts/integration/tests/interactions.test.ts
+++ b/packages/osd-charts/integration/tests/interactions.test.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { Rotation, Placement } from '../../src';
+import { Placement } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Interactions', () => {
@@ -29,12 +30,7 @@ describe('Interactions', () => {
       const right = 20;
 
       describe.each<string>(['default', 'chart'])('Boundary El - %s', (boundary) => {
-        describe.each<[string, Rotation]>([
-          ['0', 0],
-          ['90', 90],
-          ['180', 180],
-          ['negative 90', -90],
-        ])('rotation - %s', (_, rotation) => {
+        eachRotation.describe((rotation) => {
           describe.each<Placement>([Placement.Right, Placement.Left, Placement.Top, Placement.Bottom])(
             'Placement - %s',
             (placement) => {
diff --git a/packages/osd-charts/integration/tests/line_stories.test.ts b/packages/osd-charts/integration/tests/line_stories.test.ts
index 9e9b137fbea..7ee4b6e2c6d 100644
--- a/packages/osd-charts/integration/tests/line_stories.test.ts
+++ b/packages/osd-charts/integration/tests/line_stories.test.ts
@@ -17,28 +17,14 @@
  * under the License.
  */
 
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Line series stories', () => {
   describe('rotation', () => {
-    it('rotation - 0', async () => {
+    eachRotation.it(async (rotation) => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=0',
-      );
-    });
-    it('rotation - 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=90',
-      );
-    });
-    it('rotation - negative 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=-90',
-      );
-    });
-    it('rotation - 180', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=180',
+        `http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=${rotation}`,
       );
     });
   });
diff --git a/packages/osd-charts/integration/tests/test_cases_stories.test.ts b/packages/osd-charts/integration/tests/test_cases_stories.test.ts
index a84abb2d024..326e4330328 100644
--- a/packages/osd-charts/integration/tests/test_cases_stories.test.ts
+++ b/packages/osd-charts/integration/tests/test_cases_stories.test.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Test cases stories', () => {
@@ -38,13 +39,9 @@ describe('Test cases stories', () => {
 });
 
 describe('annotation marker rotation', () => {
-  [0, 90, -90, 180].forEach((rotation) => {
-    it(`should render marker with annotations with ${
-      rotation === -90 ? 'negative 90' : rotation
-    } degree rotations`, async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        `http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=${rotation}`,
-      );
-    });
-  });
+  eachRotation.it(async (rotation) => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      `http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=${rotation}`,
+    );
+  }, 'should render marker with annotations with %s degree rotations');
 });
diff --git a/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.ts b/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
index 12bb86f65eb..d9c1f131b7f 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
+++ b/packages/osd-charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
@@ -42,6 +42,7 @@ function computeYDomainLineAnnotationDimensions(
     id: specId,
     dataValues,
     marker: icon,
+    markerBody: body,
     markerDimensions: dimension,
     markerPosition: specMarkerPosition,
     style,
@@ -57,7 +58,7 @@ function computeYDomainLineAnnotationDimensions(
 
   const panelSize = getPanelSize({ vertical, horizontal });
 
-  dataValues.forEach((datum: LineAnnotationDatum) => {
+  dataValues.forEach((datum: LineAnnotationDatum, i) => {
     const { dataValue } = datum;
 
     // avoid rendering invalid annotation value
@@ -96,13 +97,14 @@ function computeYDomainLineAnnotationDimensions(
 
         const lineProp: AnnotationLineProps = {
           specId,
-          id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue),
+          id: getAnnotationLinePropsId(specId, datum, i, verticalValue, horizontalValue),
           datum,
           linePathPoints,
           markers: icon
             ? [
                 {
                   icon,
+                  body,
                   color,
                   dimension,
                   position,
@@ -137,6 +139,7 @@ function computeXDomainLineAnnotationDimensions(
     id: specId,
     dataValues,
     marker: icon,
+    markerBody: body,
     markerDimensions: dimension,
     markerPosition: specMarkerPosition,
     style,
@@ -148,7 +151,7 @@ function computeXDomainLineAnnotationDimensions(
   const isHorizontalChartRotation = isHorizontalRotation(chartRotation);
   const panelSize = getPanelSize({ vertical, horizontal });
 
-  dataValues.forEach((datum: LineAnnotationDatum) => {
+  dataValues.forEach((datum: LineAnnotationDatum, i) => {
     const { dataValue } = datum;
     let annotationValueXPosition = xScale.scale(dataValue);
     if (isNil(annotationValueXPosition)) {
@@ -208,13 +211,14 @@ function computeXDomainLineAnnotationDimensions(
 
         const lineProp: AnnotationLineProps = {
           specId,
-          id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue),
+          id: getAnnotationLinePropsId(specId, datum, i, verticalValue, horizontalValue),
           datum,
           linePathPoints,
           markers: icon
             ? [
                 {
                   icon,
+                  body,
                   color,
                   dimension,
                   position,
@@ -403,8 +407,9 @@ function getMarkerPositionForYAnnotation(
 export function getAnnotationLinePropsId(
   specId: string,
   datum: LineAnnotationDatum,
+  index: number,
   verticalValue?: any,
   horizontalValue?: any,
 ) {
-  return [specId, verticalValue, horizontalValue, datum.header, datum.details].join('__');
+  return [specId, verticalValue, horizontalValue, datum.header, datum.details, index].join('__');
 }
diff --git a/packages/osd-charts/src/chart_types/xy_chart/annotations/types.ts b/packages/osd-charts/src/chart_types/xy_chart/annotations/types.ts
index c289a10df28..2f566b6a2f3 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/annotations/types.ts
+++ b/packages/osd-charts/src/chart_types/xy_chart/annotations/types.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
 import { TooltipPortalSettings } from '../../../components/portal';
 import { Position, Color } from '../../../utils/common';
@@ -44,12 +44,19 @@ export interface AnnotationDetails {
   detailsText?: string;
 }
 
+/**
+ * Component to render based on annotation datum
+ *
+ * @public
+ */
+export type ComponentWithAnnotationDatum = ComponentType<LineAnnotationDatum>;
+
 /**
  * The marker for an Annotation. Usually a JSX element
  * @internal
  */
 export interface AnnotationMarker {
-  icon: JSX.Element;
+  icon?: ReactNode | ComponentWithAnnotationDatum;
   position: {
     top: number;
     left: number;
@@ -58,6 +65,7 @@ export interface AnnotationMarker {
     width: number;
     height: number;
   };
+  body?: ReactNode | ComponentWithAnnotationDatum;
   alignment: Position;
   color: Color;
 }
diff --git a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/area.test.ts b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/area.test.ts
index 1663268368c..b2558a49acc 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/area.test.ts
+++ b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/area.test.ts
@@ -20,11 +20,11 @@
 import { stringToRGB } from '../../../../../common/color_library_wrappers';
 import { Fill } from '../../../../../geoms/types';
 import { MockStyles } from '../../../../../mocks';
-import { getColorFromVariant } from '../../../../../utils/common';
+import * as common from '../../../../../utils/common';
 import { buildAreaStyles } from './area';
 
 jest.mock('../../../../../common/color_library_wrappers');
-jest.mock('../../../../../utils/common');
+jest.spyOn(common, 'getColorFromVariant');
 
 const COLOR = 'aquamarine';
 
@@ -46,7 +46,7 @@ describe('Area styles', () => {
     });
 
     it('should call getColorFromVariant with correct args for fill', () => {
-      expect(getColorFromVariant).nthCalledWith(1, baseColor, themeAreaStyle.fill);
+      expect(common.getColorFromVariant).nthCalledWith(1, baseColor, themeAreaStyle.fill);
     });
 
     describe('Colors', () => {
@@ -54,7 +54,7 @@ describe('Area styles', () => {
 
       beforeAll(() => {
         setDefaults();
-        (getColorFromVariant as jest.Mock).mockReturnValue(fillColor);
+        (common.getColorFromVariant as jest.Mock).mockReturnValue(fillColor);
       });
 
       it('should call stringToRGB with values from getColorFromVariant', () => {
@@ -76,7 +76,7 @@ describe('Area styles', () => {
         setDefaults();
         themeAreaStyle = MockStyles.area({ opacity: fillOpacity });
         geometryStateStyle = MockStyles.geometryState({ opacity: geoOpacity });
-        (getColorFromVariant as jest.Mock).mockReturnValue(fillColor);
+        (common.getColorFromVariant as jest.Mock).mockReturnValue(fillColor);
       });
 
       it('should return correct fill opacity', () => {
diff --git a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.test.ts b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.test.ts
index 84be8b00349..fcef6922b3a 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.test.ts
+++ b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/bar.test.ts
@@ -20,11 +20,11 @@
 import { stringToRGB } from '../../../../../common/color_library_wrappers';
 import { Fill, Stroke } from '../../../../../geoms/types';
 import { MockStyles } from '../../../../../mocks';
-import { getColorFromVariant } from '../../../../../utils/common';
+import * as common from '../../../../../utils/common';
 import { buildBarStyles } from './bar';
 
 jest.mock('../../../../../common/color_library_wrappers');
-jest.mock('../../../../../utils/common');
+jest.spyOn(common, 'getColorFromVariant');
 
 const COLOR = 'aquamarine';
 
@@ -48,11 +48,11 @@ describe('Bar styles', () => {
     });
 
     it('should call getColorFromVariant with correct args for fill', () => {
-      expect(getColorFromVariant).nthCalledWith(1, baseColor, themeRectStyle.fill);
+      expect(common.getColorFromVariant).nthCalledWith(1, baseColor, themeRectStyle.fill);
     });
 
     it('should call getColorFromVariant with correct args for border', () => {
-      expect(getColorFromVariant).nthCalledWith(1, baseColor, themeRectBorderStyle.stroke);
+      expect(common.getColorFromVariant).nthCalledWith(1, baseColor, themeRectBorderStyle.stroke);
     });
 
     describe('Colors', () => {
@@ -61,8 +61,8 @@ describe('Bar styles', () => {
 
       beforeAll(() => {
         setDefaults();
-        (getColorFromVariant as jest.Mock).mockImplementation(() => {
-          const { length } = (getColorFromVariant as jest.Mock).mock.calls;
+        (common.getColorFromVariant as jest.Mock).mockImplementation(() => {
+          const { length } = (common.getColorFromVariant as jest.Mock).mock.calls;
           return length === 1 ? fillColor : strokeColor;
         });
       });
@@ -95,8 +95,8 @@ describe('Bar styles', () => {
         themeRectStyle = MockStyles.rect({ opacity: fillOpacity });
         themeRectBorderStyle = MockStyles.rectBorder({ strokeOpacity });
         geometryStateStyle = MockStyles.geometryState({ opacity: geoOpacity });
-        (getColorFromVariant as jest.Mock).mockImplementation(() => {
-          const { length } = (getColorFromVariant as jest.Mock).mock.calls;
+        (common.getColorFromVariant as jest.Mock).mockImplementation(() => {
+          const { length } = (common.getColorFromVariant as jest.Mock).mock.calls;
           return length === 1 ? fillColor : strokeColor;
         });
       });
diff --git a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/line.test.ts b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/line.test.ts
index 8a3dd92330f..390c53163e5 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/line.test.ts
+++ b/packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/styles/line.test.ts
@@ -20,11 +20,11 @@
 import { stringToRGB } from '../../../../../common/color_library_wrappers';
 import { Stroke } from '../../../../../geoms/types';
 import { MockStyles } from '../../../../../mocks';
-import { getColorFromVariant } from '../../../../../utils/common';
+import * as common from '../../../../../utils/common';
 import { buildLineStyles } from './line';
 
 jest.mock('../../../../../common/color_library_wrappers');
-jest.mock('../../../../../utils/common');
+jest.spyOn(common, 'getColorFromVariant');
 
 const COLOR = 'aquamarine';
 
@@ -46,7 +46,7 @@ describe('Line styles', () => {
     });
 
     it('should call getColorFromVariant with correct args for stroke', () => {
-      expect(getColorFromVariant).nthCalledWith(1, baseColor, themeLineStyle.stroke);
+      expect(common.getColorFromVariant).nthCalledWith(1, baseColor, themeLineStyle.stroke);
     });
 
     it('should set strokeWidth from themeLineStyle', () => {
@@ -62,7 +62,7 @@ describe('Line styles', () => {
 
       beforeAll(() => {
         setDefaults();
-        (getColorFromVariant as jest.Mock).mockReturnValue(strokeColor);
+        (common.getColorFromVariant as jest.Mock).mockReturnValue(strokeColor);
       });
 
       it('should call stringToRGB with values from getColorFromVariant', () => {
@@ -84,7 +84,7 @@ describe('Line styles', () => {
         setDefaults();
         themeLineStyle = MockStyles.line({ opacity: strokeOpacity });
         geometryStateStyle = MockStyles.geometryState({ opacity: geoOpacity });
-        (getColorFromVariant as jest.Mock).mockReturnValue(strokeColor);
+        (common.getColorFromVariant as jest.Mock).mockReturnValue(strokeColor);
       });
 
       it('should return correct stroke opacity', () => {
diff --git a/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss b/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss
index dfd7f6cba12..1aa9a493188 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss
+++ b/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss
@@ -3,23 +3,31 @@
   user-select: none;
   font-size: $euiFontSizeXS;
   font-weight: $euiFontWeightBold;
-}
 
-.echAnnotation__tooltip {
-  @include euiToolTipStyle;
-  @include euiFontSizeXS;
-  padding: 0;
-  transition: opacity $euiAnimSpeedNormal;
-  pointer-events: none;
-  user-select: none;
-  max-width: 256px;
-}
+  &__tooltip {
+    @include euiToolTipStyle;
+    @include euiFontSizeXS;
+    padding: 0;
+    transition: opacity $euiAnimSpeedNormal;
+    pointer-events: none;
+    user-select: none;
+    max-width: 256px;
+  }
 
-.echAnnotation__header {
-  @include euiToolTipTitle;
-  padding: $euiSizeXS ($euiSizeXS * 2);
-}
+  &__header {
+    @include euiToolTipTitle;
+    padding: $euiSizeXS ($euiSizeXS * 2);
+  }
+
+  &__details {
+    padding: $euiSizeXS ($euiSizeXS * 2);
+  }
+
+  &__icon {
+    position: relative;
+  }
 
-.echAnnotation__details {
-  padding: $euiSizeXS ($euiSizeXS * 2);
+  &__body {
+    white-space: nowrap;
+  }
 }
diff --git a/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx b/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx
index d0482e40c99..84d9d7263a2 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx
+++ b/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx
@@ -17,12 +17,11 @@
  * under the License.
  */
 
-import React, { useCallback } from 'react';
+import React, { RefObject, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
 import {
-  DOMElementType,
   onDOMElementEnter as onDOMElementEnterAction,
   onDOMElementLeave as onDOMElementLeaveAction,
 } from '../../../../../state/actions/dom_element';
@@ -32,7 +31,6 @@ import {
   getInternalIsInitializedSelector,
   InitStatus,
 } from '../../../../../state/selectors/get_internal_is_intialized';
-import { Position } from '../../../../../utils/common';
 import { Dimensions } from '../../../../../utils/dimensions';
 import { AnnotationId } from '../../../../../utils/ids';
 import { AnnotationLineProps } from '../../../annotations/line/types';
@@ -45,6 +43,7 @@ import { isChartEmptySelector } from '../../../state/selectors/is_chart_empty';
 import { getSpecsById } from '../../../state/utils/spec';
 import { isLineAnnotation, AnnotationSpec } from '../../../utils/specs';
 import { AnnotationTooltip } from './annotation_tooltip';
+import { LineMarker } from './line_marker';
 
 interface AnnotationsDispatchProps {
   onPointerMove: typeof onPointerMoveAction;
@@ -64,59 +63,32 @@ interface AnnotationsStateProps {
 
 interface AnnotationsOwnProps {
   getChartContainerRef: BackwardRef;
+  chartAreaRef: RefObject<HTMLCanvasElement>;
 }
 
 type AnnotationsProps = AnnotationsDispatchProps & AnnotationsStateProps & AnnotationsOwnProps;
 
-const MARKER_TRANSFORMS = {
-  [Position.Right]: 'translate(-50%, 0%)',
-  [Position.Left]: 'translate(-100%, -50%)',
-  [Position.Top]: 'translate(-50%, -100%)',
-  [Position.Bottom]: 'translate(-50%, 0%)',
-};
-
-function getMarkerCentredTransform(alignment: Position, hasMarkerDimensions: boolean): string | undefined {
-  if (hasMarkerDimensions) {
-    return undefined;
-  }
-  return MARKER_TRANSFORMS[alignment];
-}
-
 function renderAnnotationLineMarkers(
+  chartAreaRef: RefObject<HTMLCanvasElement>,
   chartDimensions: Dimensions,
   annotationLines: AnnotationLineProps[],
   onDOMElementEnter: typeof onDOMElementEnterAction,
   onDOMElementLeave: typeof onDOMElementLeaveAction,
 ) {
-  return annotationLines.reduce<JSX.Element[]>((acc, { id, specId, datum, markers, panel }: AnnotationLineProps) => {
-    if (markers.length === 0) {
+  return annotationLines.reduce<JSX.Element[]>((acc, props: AnnotationLineProps) => {
+    if (props.markers.length === 0) {
       return acc;
     }
-    const { icon, color, position, alignment, dimension } = markers[0];
-    const style = {
-      color,
-      top: chartDimensions.top + position.top + panel.top,
-      left: chartDimensions.left + position.left + panel.left,
-    };
 
-    const transform = { transform: getMarkerCentredTransform(alignment, Boolean(dimension)) };
     acc.push(
-      <div
-        className="echAnnotation"
-        key={`annotation-${specId}-${id}`}
-        onMouseEnter={() => {
-          onDOMElementEnter({
-            createdBySpecId: specId,
-            id,
-            type: DOMElementType.LineAnnotationMarker,
-            datum,
-          });
-        }}
-        onMouseLeave={onDOMElementLeave}
-        style={{ ...style, ...transform }}
-      >
-        {icon}
-      </div>,
+      <LineMarker
+        {...props}
+        key={`annotation-${props.id}`}
+        chartAreaRef={chartAreaRef}
+        chartDimensions={chartDimensions}
+        onDOMElementEnter={onDOMElementEnter}
+        onDOMElementLeave={onDOMElementLeave}
+      />,
     );
 
     return acc;
@@ -129,6 +101,7 @@ const AnnotationsComponent = ({
   annotationSpecs,
   annotationDimensions,
   getChartContainerRef,
+  chartAreaRef,
   chartId,
   zIndex,
   onPointerMove,
@@ -147,6 +120,7 @@ const AnnotationsComponent = ({
       if (isLineAnnotation(annotationSpec)) {
         const annotationLines = dimensions as AnnotationLineProps[];
         const lineMarkers = renderAnnotationLineMarkers(
+          chartAreaRef,
           chartDimensions,
           annotationLines,
           onDOMElementEnter,
@@ -157,7 +131,7 @@ const AnnotationsComponent = ({
     });
 
     return markers;
-  }, [onDOMElementEnter, onDOMElementLeave, chartDimensions, annotationDimensions, annotationSpecs]);
+  }, [annotationDimensions, annotationSpecs, chartAreaRef, chartDimensions, onDOMElementEnter, onDOMElementLeave]);
 
   const onScroll = useCallback(() => {
     onPointerMove({ x: -1, y: -1 }, Date.now());
diff --git a/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx b/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx
new file mode 100644
index 00000000000..82b5d34c31f
--- /dev/null
+++ b/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx
@@ -0,0 +1,143 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createPopper, Instance } from '@popperjs/core';
+import React, { RefObject, useRef, useEffect, useCallback } from 'react';
+
+import {
+  DOMElementType,
+  onDOMElementEnter as onDOMElementEnterAction,
+  onDOMElementLeave as onDOMElementLeaveAction,
+} from '../../../../../state/actions/dom_element';
+import { Position, renderWithProps } from '../../../../../utils/common';
+import { Dimensions } from '../../../../../utils/dimensions';
+import { AnnotationLineProps } from '../../../annotations/line/types';
+
+type LineMarkerProps = Pick<AnnotationLineProps, 'id' | 'specId' | 'datum' | 'markers' | 'panel'> & {
+  chartAreaRef: RefObject<HTMLCanvasElement>;
+  chartDimensions: Dimensions;
+  onDOMElementEnter: typeof onDOMElementEnterAction;
+  onDOMElementLeave: typeof onDOMElementLeaveAction;
+};
+
+const MARKER_TRANSFORMS = {
+  [Position.Right]: 'translate(0%, -50%)',
+  [Position.Left]: 'translate(-100%, -50%)',
+  [Position.Top]: 'translate(-50%, -100%)',
+  [Position.Bottom]: 'translate(-50%, 0%)',
+};
+
+function getMarkerCentredTransform(alignment: Position, hasMarkerDimensions: boolean): string | undefined {
+  return hasMarkerDimensions ? undefined : MARKER_TRANSFORMS[alignment];
+}
+
+/**
+ * LineMarker component used to display line annotation markers
+ * @internal
+ */
+export function LineMarker({
+  id,
+  specId,
+  datum,
+  panel,
+  markers: [{ icon, body, color, position, alignment, dimension }],
+  chartAreaRef,
+  chartDimensions,
+  onDOMElementEnter,
+  onDOMElementLeave,
+}: LineMarkerProps) {
+  const iconRef = useRef<HTMLDivElement | null>(null);
+  const testRef = useRef<HTMLDivElement | null>(null);
+  const popper = useRef<Instance | null>(null);
+  const style = {
+    color,
+    top: chartDimensions.top + position.top + panel.top,
+    left: chartDimensions.left + position.left + panel.left,
+  };
+  const transform = { transform: getMarkerCentredTransform(alignment, Boolean(dimension)) };
+
+  const setPopper = useCallback(() => {
+    if (!iconRef.current || !testRef.current) return;
+
+    popper.current = createPopper(iconRef.current, testRef.current, {
+      strategy: 'absolute',
+      placement: alignment,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 0],
+          },
+        },
+        {
+          name: 'preventOverflow',
+          options: {
+            boundary: chartAreaRef.current,
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            // prevents default flip modifier
+            fallbackPlacements: [],
+          },
+        },
+      ],
+    });
+  }, [chartAreaRef, alignment]);
+
+  useEffect(() => {
+    if (!popper.current && body) {
+      setPopper();
+    }
+
+    return () => {
+      popper?.current?.destroy?.();
+      popper.current = null;
+    };
+  }, [setPopper, body]);
+
+  void popper?.current?.update?.();
+
+  return (
+    <div
+      className="echAnnotation"
+      key={`annotation-${id}`}
+      onMouseEnter={() => {
+        onDOMElementEnter({
+          createdBySpecId: specId,
+          id,
+          type: DOMElementType.LineAnnotationMarker,
+          datum,
+        });
+      }}
+      onMouseLeave={onDOMElementLeave}
+      style={{ ...style, ...transform }}
+    >
+      <div ref={iconRef} className="echAnnotation__icon">
+        {renderWithProps(icon, datum)}
+      </div>
+      {body && (
+        <div ref={testRef} className="echAnnotation__body">
+          {renderWithProps(body, datum)}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.tsx b/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.tsx
index 739a12e4d90..d1a5587a2b1 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.tsx
+++ b/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.tsx
@@ -125,7 +125,7 @@ export class XYAxisChartState implements InternalChartState {
         <Crosshair />
         <XYChart forwardStageRef={forwardStageRef} />
         <Tooltip getChartContainerRef={containerRef} />
-        <Annotations getChartContainerRef={containerRef} />
+        <Annotations getChartContainerRef={containerRef} chartAreaRef={forwardStageRef} />
         <Highlighter />
         <BrushTool />
       </>
diff --git a/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts b/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts
index 313651a8689..c8817ed487a 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts
+++ b/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { ReactNode } from 'react';
 import { $Values } from 'utility-types';
 
 import { ChartType } from '../..';
@@ -43,7 +44,11 @@ import {
   AxisStyle,
 } from '../../../utils/themes/theme';
 import { PrimitiveValue } from '../../partition_chart/layout/utils/group_by_rollup';
-import { AnnotationTooltipFormatter, CustomAnnotationTooltip } from '../annotations/types';
+import {
+  AnnotationTooltipFormatter,
+  ComponentWithAnnotationDatum,
+  CustomAnnotationTooltip,
+} from '../annotations/types';
 import { XYChartSeriesIdentifier, DataSeriesDatum } from './series';
 
 /** @public */
@@ -767,8 +772,10 @@ export type LineAnnotationSpec = BaseAnnotationSpec<
   LineAnnotationStyle
 > & {
   domainType: AnnotationDomainType;
-  /** Custom marker */
-  marker?: JSX.Element;
+  /** Optional Custom marker icon centered on data value */
+  marker?: ReactNode | ComponentWithAnnotationDatum;
+  /** Optional marker body, always contained within chart area */
+  markerBody?: ReactNode | ComponentWithAnnotationDatum;
   /**
    * Custom marker dimensions; will be computed internally
    * Any user-supplied values will be overwritten
diff --git a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
index c0cbfa476b2..81330afa13d 100644
--- a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
+++ b/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -98,8 +98,8 @@ exports[`Chart should render the legend name test 1`] = `
                     </TooltipPortal>
                   </Tooltip>
                 </Connect(Tooltip)>
-                <Connect(Annotations) getChartContainerRef={[Function (anonymous)]}>
-                  <Annotations getChartContainerRef={[Function (anonymous)]} isChartEmpty={false} chartDimensions={{...}} annotationDimensions={{...}} annotationSpecs={{...}} tooltipState={{...}} chartId=\\"chart1\\" zIndex={0} onPointerMove={[Function (anonymous)]} onDOMElementLeave={[Function (anonymous)]} onDOMElementEnter={[Function (anonymous)]}>
+                <Connect(Annotations) getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}}>
+                  <Annotations getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}} isChartEmpty={false} chartDimensions={{...}} annotationDimensions={{...}} annotationSpecs={{...}} tooltipState={{...}} chartId=\\"chart1\\" zIndex={0} onPointerMove={[Function (anonymous)]} onDOMElementLeave={[Function (anonymous)]} onDOMElementEnter={[Function (anonymous)]}>
                     <AnnotationTooltip chartId=\\"chart1\\" zIndex={0} state={{...}} chartRef={{...}} onScroll={[Function (anonymous)]} />
                   </Annotations>
                 </Connect(Annotations)>
diff --git a/packages/osd-charts/src/index.ts b/packages/osd-charts/src/index.ts
index 79f96e6284f..22f13137540 100644
--- a/packages/osd-charts/src/index.ts
+++ b/packages/osd-charts/src/index.ts
@@ -33,7 +33,11 @@ export { SimplePadding, Padding } from './utils/dimensions';
 export { timeFormatter, niceTimeFormatter, niceTimeFormatByDay } from './utils/data/formatters';
 export { SeriesIdentifier, SeriesKey } from './common/series_id';
 export { XYChartSeriesIdentifier, DataSeriesDatum, FilledValues } from './chart_types/xy_chart/utils/series';
-export { AnnotationTooltipFormatter, CustomAnnotationTooltip } from './chart_types/xy_chart/annotations/types';
+export {
+  AnnotationTooltipFormatter,
+  CustomAnnotationTooltip,
+  ComponentWithAnnotationDatum,
+} from './chart_types/xy_chart/annotations/types';
 export { GeometryValue, BandedAccessorType } from './utils/geometry';
 export { LegendPath, LegendPathElement } from './state/actions/legend';
 export { CategoryKey } from './common/category';
diff --git a/packages/osd-charts/src/mocks/annotations/annotations.ts b/packages/osd-charts/src/mocks/annotations/annotations.ts
index 4730bcec22f..2228930afbd 100644
--- a/packages/osd-charts/src/mocks/annotations/annotations.ts
+++ b/packages/osd-charts/src/mocks/annotations/annotations.ts
@@ -25,7 +25,7 @@ import { mergePartial, RecursivePartial } from '../../utils/common';
 /** @internal */
 export class MockAnnotationLineProps {
   private static readonly base: AnnotationLineProps = {
-    id: getAnnotationLinePropsId('spec1', { dataValue: 0 }),
+    id: getAnnotationLinePropsId('spec1', { dataValue: 0 }, 0),
     specId: 'spec1',
     linePathPoints: {
       x1: 0,
@@ -45,6 +45,7 @@ export class MockAnnotationLineProps {
         ...MockAnnotationLineProps.base.datum,
         ...partial?.datum,
       },
+      0,
       smVerticalValue,
       smHorizontalValue,
     );
diff --git a/packages/osd-charts/src/utils/common.ts b/packages/osd-charts/src/utils/common.tsx
similarity index 93%
rename from packages/osd-charts/src/utils/common.ts
rename to packages/osd-charts/src/utils/common.tsx
index 062c87c11af..88f50fa23dd 100644
--- a/packages/osd-charts/src/utils/common.ts
+++ b/packages/osd-charts/src/utils/common.tsx
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { $Values } from 'utility-types';
+import React, { ComponentType, isValidElement, ReactNode } from 'react';
+import { $Values, isPrimitive } from 'utility-types';
 import { v1 as uuidV1 } from 'uuid';
 
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
@@ -354,6 +355,22 @@ export function shallowClone(value: any) {
   return value;
 }
 
+function isReactNode(el: any): el is ReactNode {
+  return isNil(el) || isPrimitive(el) || isValidElement(el);
+}
+
+function isReactComponent<P extends Record<string, any>>(el: any): el is ComponentType<P> {
+  return !isReactNode(el);
+}
+
+/**
+ * Renders simple react node or react component with props
+ * @internal
+ */
+export function renderWithProps<P extends Record<string, any>>(El: ReactNode | ComponentType<P>, props: P): ReactNode {
+  return isReactComponent<P>(El) ? <El {...props} /> : El;
+}
+
 /**
  * Merges values of a partial structure with a base structure.
  *
@@ -542,19 +559,19 @@ export function isDefined<T>(value?: T): value is NonNullable<T> {
  *
  * @internal
  */
-export const isDefinedFrom = <T>(typeCheck: (value: RecursivePartial<T>) => boolean) => (
-  value?: RecursivePartial<T>,
-): value is NonNullable<T> => {
-  if (value === undefined) {
-    return false;
-  }
+export function isDefinedFrom<T>(typeCheck: (value: RecursivePartial<T>) => boolean) {
+  return (value?: RecursivePartial<T>): value is NonNullable<T> => {
+    if (value === undefined) {
+      return false;
+    }
 
-  try {
-    return typeCheck(value);
-  } catch {
-    return false;
-  }
-};
+    try {
+      return typeCheck(value);
+    } catch {
+      return false;
+    }
+  };
+}
 
 /**
  * Returns rounded number to given decimals
@@ -574,7 +591,7 @@ export const round = (value: number, fractionDigits = 0): number => {
  * i.e. `'90%'` with relative value of `100` returns `90`
  * @internal
  */
-export const getPercentageValue = <T>(ratio: string | number, relativeValue: number, defaultValue: T): number | T => {
+export function getPercentageValue<T>(ratio: string | number, relativeValue: number, defaultValue: T): number | T {
   if (typeof ratio === 'number') {
     return Math.abs(ratio);
   }
@@ -588,14 +605,16 @@ export const getPercentageValue = <T>(ratio: string | number, relativeValue: num
   const num = Number.parseFloat(ratioStr);
 
   return num && !isNaN(num) ? Math.abs(num) : defaultValue;
-};
+}
 
 /**
  * Predicate function, eg. to be called with [].filter, to keep distinct values
  * @example [1, 2, 4, 2, 4, 0, 3, 2].filter(keepDistinct) ==> [1, 2, 4, 0, 3]
  * @internal
  */
-export const keepDistinct = <T>(d: T, i: number, a: T[]): boolean => a.indexOf(d) === i;
+export function keepDistinct<T>(d: T, i: number, a: T[]): boolean {
+  return a.indexOf(d) === i;
+}
 
 /**
  * Return an object which keys are values of an object and the value is the
@@ -617,7 +636,7 @@ export function toEntries<T extends Record<string, string>, S>(
  * Safely format values with error handling
  * @internal
  */
-export const safeFormat = <V = any>(value: V, formatter?: (value: V) => string): string => {
+export function safeFormat<V = any>(value: V, formatter?: (value: V) => string): string {
   if (formatter) {
     try {
       return formatter(value);
@@ -627,4 +646,4 @@ export const safeFormat = <V = any>(value: V, formatter?: (value: V) => string):
   }
 
   return `${value}`;
-};
+}
diff --git a/packages/osd-charts/stories/annotations/lines/8_advanced_markers.tsx b/packages/osd-charts/stories/annotations/lines/8_advanced_markers.tsx
new file mode 100644
index 00000000000..da578c48de5
--- /dev/null
+++ b/packages/osd-charts/stories/annotations/lines/8_advanced_markers.tsx
@@ -0,0 +1,165 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { EuiIcon } from '@elastic/eui';
+import { boolean, number } from '@storybook/addon-knobs';
+import moment from 'moment';
+import React from 'react';
+
+import {
+  Chart,
+  Axis,
+  Settings,
+  HistogramBarSeries,
+  Position,
+  ScaleType,
+  LineAnnotation,
+  AnnotationDomainType,
+  LineAnnotationSpec,
+} from '../../../src';
+import { isVerticalAxis } from '../../../src/chart_types/xy_chart/utils/axis_type_utils';
+import { getChartRotationKnob, getPositionKnob } from '../../utils/knobs';
+import { SB_KNOBS_PANEL } from '../../utils/storybook';
+
+const annotationStyle = {
+  line: {
+    strokeWidth: 1,
+    stroke: 'red',
+    opacity: 1,
+  },
+};
+
+const iconMap = {
+  [Position.Top]: 'arrowDown',
+  [Position.Right]: 'arrowLeft',
+  [Position.Bottom]: 'arrowUp',
+  [Position.Left]: 'arrowRight',
+};
+
+/**
+ * Used to rotate text while maintaining correct parent dimensions
+ * https://www.kizu.ru/rotated-text/
+ */
+const getMarkerBody = (valueCb: (v: any) => string, isVertical: boolean): LineAnnotationSpec['markerBody'] => ({
+  dataValue,
+}) =>
+  isVertical ? (
+    <div
+      style={{
+        display: 'inline-block',
+        overflow: 'hidden',
+        width: '1.5em',
+        lineHeight: 1.5,
+      }}
+    >
+      <div
+        style={{
+          display: 'inline-block',
+          whiteSpace: 'nowrap',
+          transform: 'translate(0, 100%) rotate(-90deg)',
+          transformOrigin: '0 0',
+        }}
+      >
+        {valueCb(dataValue)}
+        <div
+          style={{
+            float: 'left',
+            marginTop: '100%',
+          }}
+        />
+      </div>
+    </div>
+  ) : (
+    <div>{valueCb(dataValue)}</div>
+  );
+
+/** formats values correctly for any rotation/side combination */
+const looseFormatter = (d: any) => (d < 100 ? d : moment(d).format('L'));
+
+export const Example = () => {
+  const maxMetric = 30;
+  const debug = boolean('Debug', true);
+  const showLegend = boolean('show legend', true);
+  const rotation = getChartRotationKnob();
+  const side = getPositionKnob('Side', Position.Bottom);
+  const padding = number('TickLine padding for markerBody', 30, { step: 5, min: 0, max: 100 });
+  const start = moment('4/1/2020').startOf('d');
+  const metric = number('Annotation metric', maxMetric, { step: 1, min: 0, max: maxMetric, range: true });
+  const isVerticalSide = isVerticalAxis(side);
+  const isYDomain = rotation === -90 || rotation === 90 ? !isVerticalSide : isVerticalSide;
+
+  return (
+    <Chart className="story-chart">
+      <Settings debug={debug} showLegend={showLegend} rotation={rotation} />
+      <Axis
+        id="count"
+        integersOnly
+        tickFormat={looseFormatter}
+        position={side === Position.Right ? Position.Right : Position.Left}
+        style={{ tickLine: { padding: isVerticalSide ? padding : undefined } }}
+      />
+      <Axis
+        id="x"
+        style={{ tickLine: { padding: isVerticalSide ? undefined : padding } }}
+        tickFormat={looseFormatter}
+        position={side === Position.Top ? Position.Top : Position.Bottom}
+      />
+      {isYDomain ? (
+        <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)}
+        />
+      ) : (
+        <LineAnnotation
+          id="annotation_x"
+          domainType={AnnotationDomainType.XDomain}
+          dataValues={[{ dataValue: start.clone().add(metric, 'd').valueOf() }]}
+          style={annotationStyle}
+          hideTooltips
+          marker={<EuiIcon type={iconMap[side]} />}
+          markerBody={getMarkerBody((v) => moment(v).format('lll'), isVerticalSide)}
+        />
+      )}
+      <HistogramBarSeries
+        id="bars"
+        xScaleType={ScaleType.Time}
+        data={Array.from({ length: maxMetric })
+          .fill(0)
+          .map((_, i) => ({ x: start.clone().add(i, 'd').valueOf(), y: maxMetric }))}
+      />
+    </Chart>
+  );
+};
+
+Example.story = {
+  parameters: {
+    options: { selectedPanel: SB_KNOBS_PANEL },
+    info: {
+      text: `The \`markerBody\` on the \`LineAnnotationSpec\` will be dynamically positioned to show content that would otherwise be hidden or overflow the chart.
+        The \`marker\` prop (also on the \`LineAnnotationSpec\`) however, will always be positioned centered on the given \`dataValue\`.
+        These can be used interchangeably to provide a content-rich annotation without losing the data reference.
+        **Note: you will need to provide the necessary axis padding for the \`markerBody\` content as this is _not_ currently accounted for in the chart dimensioning**`,
+    },
+  },
+};
diff --git a/packages/osd-charts/stories/annotations/lines/line.stories.tsx b/packages/osd-charts/stories/annotations/lines/line.stories.tsx
index 15162f5c0a9..e3057dcffcf 100644
--- a/packages/osd-charts/stories/annotations/lines/line.stories.tsx
+++ b/packages/osd-charts/stories/annotations/lines/line.stories.tsx
@@ -32,6 +32,7 @@ export { Example as xTimeDomain } from './3_x_time';
 export { Example as yDomain } from './4_y_domain';
 export { Example as styling } from './5_styling';
 export { Example as tooltipOptions } from './7_tooltip_options';
+export { Example as advancedMarkers } from './8_advanced_markers';
 
 // for testing
 export { Example as singleBarHistogram } from './6_test_single_bar_histogram';
diff --git a/packages/osd-charts/stories/utils/knobs.ts b/packages/osd-charts/stories/utils/knobs.ts
index f823b3bdf84..4565c0ef60d 100644
--- a/packages/osd-charts/stories/utils/knobs.ts
+++ b/packages/osd-charts/stories/utils/knobs.ts
@@ -100,7 +100,7 @@ export const getKnobsFromEnum = <T extends SelectTypeKnobValue, O extends Record
     group,
   ) || undefined;
 
-export const getPositionKnob = (name = 'chartRotation', defaultValue = Position.Right) =>
+export const getPositionKnob = (name = 'chartRotation', defaultValue: Position = Position.Right) =>
   select<Position>(
     name,
     {
diff --git a/packages/osd-charts/storybook/config.ts b/packages/osd-charts/storybook/config.ts
index feb51113e84..d55bb06287e 100644
--- a/packages/osd-charts/storybook/config.ts
+++ b/packages/osd-charts/storybook/config.ts
@@ -27,6 +27,7 @@ import { switchTheme } from './theme_service';
 import './style.scss';
 
 switchTheme('light');
+preloadIcons();
 
 if (process.env.STORYBOOK_VRT) {
   preloadIcons();