diff --git a/api/charts.api.md b/api/charts.api.md
index 9971f96f6a..7b550e9f07 100644
--- a/api/charts.api.md
+++ b/api/charts.api.md
@@ -2020,12 +2020,26 @@ export type TooltipProps = TooltipPortalSettings<'chart'> & {
     headerFormatter?: TooltipValueFormatter;
     unit?: string;
     customTooltip?: CustomTooltip;
-    stickTo?: Position;
+    stickTo?: TooltipStickTo;
 };
 
 // @public
 export type TooltipSettings = TooltipType | TooltipProps;
 
+// @public
+export const TooltipStickTo: Readonly<{
+    Top: "top";
+    Bottom: "bottom";
+    Middle: "middle";
+    Left: "left";
+    Right: "right";
+    Center: "center";
+    MousePosition: "MousePosition";
+}>;
+
+// @public (undocumented)
+export type TooltipStickTo = $Values<typeof TooltipStickTo>;
+
 // @public
 export const TooltipType: Readonly<{
     VerticalCursor: "vertical";
diff --git a/integration/server/generate/vrt_page_template.js b/integration/server/generate/vrt_page_template.js
index 306751c9bc..196097aca5 100644
--- a/integration/server/generate/vrt_page_template.js
+++ b/integration/server/generate/vrt_page_template.js
@@ -48,7 +48,7 @@ ReactDOM.render(<VRTPage />, document.getElementById('story-root') as HTMLElemen
 `.trim();
 }
 
-function pageTemplate(imports, routes) {
+function pageTemplate(imports, routes, urls) {
   return `
 import React, { Suspense } from 'react';
 
@@ -57,7 +57,16 @@ ${imports.join('\n')}
 export function VRTPage() {
   const path = new URL(window.location.toString()).searchParams.get('path');
   if(!path) {
-    return <h1>missing url path</h1>;
+    return (<>
+    <h1>missing url path</h1>
+      <ul>
+      ${urls
+        .map((url) => {
+          return `<li><a href="?path=${url}">${url.slice(7)}</a></li>`;
+        })
+        .join('\n')}
+      </ul>
+    </>);
   }
   return (
     <Suspense fallback={<div>Loading...</div>}>
@@ -74,16 +83,17 @@ function compileVRTPage(examples) {
     acc.push(...exampleFiles);
     return acc;
   }, []);
-  const { imports, routes } = flatExamples.reduce(
+  const { imports, routes, urls } = flatExamples.reduce(
     (acc, { filePath, url }, index) => {
       acc.imports.push(compileImportTemplate(index, filePath));
       acc.routes.push(compileRouteTemplate(index, url));
+      acc.urls.push(url);
       return acc;
     },
-    { imports: [], routes: [] },
+    { imports: [], routes: [], urls: [] },
   );
 
-  fs.writeFileSync(path.join('integration', 'tmp', 'vrt_page.tsx'), pageTemplate(imports, routes));
+  fs.writeFileSync(path.join('integration', 'tmp', 'vrt_page.tsx'), pageTemplate(imports, routes, urls));
   fs.writeFileSync(path.join('integration', 'tmp', 'index.tsx'), indexTemplate());
 }
 
diff --git a/src/chart_types/goal_chart/state/chart_state.tsx b/src/chart_types/goal_chart/state/chart_state.tsx
index 90077346b6..f4e12e68c6 100644
--- a/src/chart_types/goal_chart/state/chart_state.tsx
+++ b/src/chart_types/goal_chart/state/chart_state.tsx
@@ -110,8 +110,10 @@ export class GoalState implements InternalChartState {
     const { position } = state.interactions.pointer.current;
     return {
       isRotated: false,
-      x1: position.x,
-      y1: position.y,
+      x: position.x,
+      width: 0,
+      y: position.y,
+      height: 0,
     };
   }
 
diff --git a/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts b/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts
index c10b362a64..07e1f32073 100644
--- a/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts
+++ b/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts
@@ -19,7 +19,7 @@
 
 import createCachedSelector from 're-reselect';
 
-import { TooltipAnchorPosition } from '../../../../components/tooltip/types';
+import { AnchorPosition } from '../../../../components/portal/types';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
@@ -32,20 +32,21 @@ function getCurrentPointerPosition(state: GlobalChartState) {
 /** @internal */
 export const getTooltipAnchorSelector = createCachedSelector(
   [getPickedShapes, computeChartDimensionsSelector, getCurrentPointerPosition],
-  (shapes, chartDimensions, position): TooltipAnchorPosition => {
+  (shapes, chartDimensions, position): AnchorPosition => {
     if (Array.isArray(shapes) && shapes.length > 0) {
       const firstShape = shapes[0];
       return {
-        isRotated: false,
-        x1: firstShape.x + chartDimensions.left + firstShape.width / 2,
-        y1: firstShape.y - chartDimensions.top + firstShape.height,
+        x: firstShape.x + chartDimensions.left,
+        width: firstShape.width,
+        y: firstShape.y - chartDimensions.top,
+        height: firstShape.height,
       };
     }
     return {
-      isRotated: false,
-
-      x1: position.x,
-      y1: position.y,
+      x: position.x,
+      width: 0,
+      y: position.y,
+      height: 0,
     };
   },
 )(getChartIdSelector);
diff --git a/src/chart_types/partition_chart/state/chart_state.tsx b/src/chart_types/partition_chart/state/chart_state.tsx
index d7625e17bd..5efd88edfc 100644
--- a/src/chart_types/partition_chart/state/chart_state.tsx
+++ b/src/chart_types/partition_chart/state/chart_state.tsx
@@ -106,8 +106,10 @@ export class PartitionState implements InternalChartState {
     const { position } = state.interactions.pointer.current;
     return {
       isRotated: false,
-      x1: position.x,
-      y1: position.y,
+      x: position.x,
+      width: 0,
+      y: position.y,
+      height: 0,
     };
   }
 
diff --git a/src/chart_types/wordcloud/state/chart_state.tsx b/src/chart_types/wordcloud/state/chart_state.tsx
index 91290c24d8..edaaeefb82 100644
--- a/src/chart_types/wordcloud/state/chart_state.tsx
+++ b/src/chart_types/wordcloud/state/chart_state.tsx
@@ -87,8 +87,10 @@ export class WordcloudState implements InternalChartState {
     const { position } = state.interactions.pointer.current;
     return {
       isRotated: false,
-      x1: position.x,
-      y1: position.y,
+      x: position.x,
+      width: 0,
+      y: position.y,
+      height: 0,
     };
   }
 
diff --git a/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx b/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
index e3003d7525..8fdf2a3e14 100644
--- a/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
+++ b/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
@@ -173,8 +173,10 @@ describe('Annotation tooltips', () => {
       isVisible: true,
       annotationType: AnnotationType.Rectangle,
       anchor: {
-        left: 18,
-        top: 9,
+        x: 18,
+        y: 9,
+        width: 0,
+        height: 0,
       },
     });
     annotationRectangle.hideTooltips = true;
diff --git a/src/chart_types/xy_chart/annotations/rect/tooltip.test.ts b/src/chart_types/xy_chart/annotations/rect/tooltip.test.ts
index 503e671e2c..b4a35ccdb3 100644
--- a/src/chart_types/xy_chart/annotations/rect/tooltip.test.ts
+++ b/src/chart_types/xy_chart/annotations/rect/tooltip.test.ts
@@ -46,8 +46,10 @@ describe('Rect annotation tooltip', () => {
       isVisible: true,
       annotationType: AnnotationType.Rectangle,
       anchor: {
-        top: cursorPosition.y,
-        left: cursorPosition.x,
+        x: cursorPosition.x,
+        y: cursorPosition.y,
+        width: 0,
+        height: 0,
       },
       datum: { coordinates: { x0: 0, x1: 10, y0: 0, y1: 10 } },
     };
diff --git a/src/chart_types/xy_chart/annotations/rect/tooltip.ts b/src/chart_types/xy_chart/annotations/rect/tooltip.ts
index d7bbce8370..fa241c597e 100644
--- a/src/chart_types/xy_chart/annotations/rect/tooltip.ts
+++ b/src/chart_types/xy_chart/annotations/rect/tooltip.ts
@@ -53,8 +53,10 @@ export function getRectAnnotationTooltipState(
         isVisible: true,
         annotationType: AnnotationType.Rectangle,
         anchor: {
-          left: cursorPosition.x,
-          top: cursorPosition.y,
+          x: cursorPosition.x,
+          y: cursorPosition.y,
+          width: 0,
+          height: 0,
         },
         datum,
       };
diff --git a/src/chart_types/xy_chart/annotations/types.ts b/src/chart_types/xy_chart/annotations/types.ts
index 2f566b6a2f..1263f0ac2b 100644
--- a/src/chart_types/xy_chart/annotations/types.ts
+++ b/src/chart_types/xy_chart/annotations/types.ts
@@ -76,8 +76,10 @@ export interface AnnotationTooltipState {
   annotationType: AnnotationType;
   datum: LineAnnotationDatum | RectAnnotationDatum;
   anchor: {
-    top: number;
-    left: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
   };
   customTooltipDetails?: AnnotationTooltipFormatter;
   customTooltip?: CustomAnnotationTooltip;
diff --git a/src/chart_types/xy_chart/annotations/utils.test.ts b/src/chart_types/xy_chart/annotations/utils.test.ts
index 0ea4d823a9..6d82500e8b 100644
--- a/src/chart_types/xy_chart/annotations/utils.test.ts
+++ b/src/chart_types/xy_chart/annotations/utils.test.ts
@@ -21,7 +21,7 @@ import { MockGlobalSpec } from '../../../mocks/specs';
 import { Position, Rotation } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { AnnotationDomainType } from '../utils/specs';
-import { getAnnotationAxis, getTransformedCursor, invertTranformedCursor } from './utils';
+import { getAnnotationAxis, getTransformedCursor, invertTransformedCursor } from './utils';
 
 describe('Annotation utils', () => {
   const groupId = 'foo-group';
@@ -74,7 +74,7 @@ describe('Annotation utils', () => {
     };
     it.each<Rotation>([0, 90, -90, 180])('Should invert rotated cursor - rotation %d', (rotation) => {
       expect(
-        invertTranformedCursor(
+        invertTransformedCursor(
           getTransformedCursor(cursorPosition, chartDimensions, rotation),
           chartDimensions,
           rotation,
@@ -84,7 +84,7 @@ describe('Annotation utils', () => {
 
     it.each<Rotation>([0, 90, -90, 180])('Should invert rotated projected cursor - rotation %d', (rotation) => {
       expect(
-        invertTranformedCursor(
+        invertTransformedCursor(
           getTransformedCursor(cursorPosition, chartDimensions, rotation, true),
           chartDimensions,
           rotation,
diff --git a/src/chart_types/xy_chart/annotations/utils.ts b/src/chart_types/xy_chart/annotations/utils.ts
index ad0da5c3a2..1751f48b5c 100644
--- a/src/chart_types/xy_chart/annotations/utils.ts
+++ b/src/chart_types/xy_chart/annotations/utils.ts
@@ -86,7 +86,7 @@ export function getTransformedCursor(
 }
 
 /** @internal */
-export function invertTranformedCursor(
+export function invertTransformedCursor(
   cursorPosition: Point,
   chartDimensions: Dimensions,
   chartRotation: Rotation | null,
diff --git a/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts b/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts
index 311ef21748..93b8965693 100644
--- a/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts
+++ b/src/chart_types/xy_chart/crosshair/crosshair_utils.linear_snap.test.ts
@@ -312,10 +312,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 0,
-          y1: 0,
-          y2: 100,
+          x: 0,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -330,10 +330,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 0,
-          y1: 0,
-          y2: 100,
+          x: 0,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -348,10 +348,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 40,
-          x2: 40,
-          y1: 0,
-          y2: 100,
+          x: 40,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -366,10 +366,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 90,
-          x2: 90,
-          y1: 0,
-          y2: 100,
+          x: 90,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -401,10 +401,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 0,
-          y1: 0,
-          y2: 100,
+          x: 0,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -419,10 +419,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 0,
-          y1: 0,
-          y2: 100,
+          x: 0,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -437,10 +437,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 0,
-          y1: 0,
-          y2: 100,
+          x: 0,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -455,10 +455,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 60,
-          x2: 60,
-          y1: 0,
-          y2: 100,
+          x: 60,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -473,10 +473,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 120,
-          x2: 120,
-          y1: 0,
-          y2: 100,
+          x: 120,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -510,10 +510,10 @@ describe('Crosshair utils linear scale', () => {
         );
 
         expect(bandPosition).toEqual({
-          x1: 120,
-          x2: 120,
-          y1: 0,
-          y2: 100,
+          x: 120,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -528,10 +528,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 120,
-          x2: 120,
-          y1: 0,
-          y2: 100,
+          x: 120,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -546,10 +546,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 80,
-          x2: 80,
-          y1: 0,
-          y2: 100,
+          x: 80,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -564,10 +564,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 30,
-          x2: 30,
-          y1: 0,
-          y2: 100,
+          x: 30,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -600,10 +600,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 120,
-          x2: 120,
-          y1: 0,
-          y2: 100,
+          x: 120,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -618,10 +618,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 120,
-          x2: 120,
-          y1: 0,
-          y2: 100,
+          x: 120,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -636,10 +636,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 120,
-          x2: 120,
-          y1: 0,
-          y2: 100,
+          x: 120,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -654,10 +654,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 60,
-          x2: 60,
-          y1: 0,
-          y2: 100,
+          x: 60,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -672,10 +672,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 0,
-          y1: 0,
-          y2: 100,
+          x: 0,
+          width: 0,
+          y: 0,
+          height: 100,
         });
       });
 
@@ -708,10 +708,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 0,
-          y2: 0,
+          x: 0,
+          width: 120,
+          y: 0,
+          height: 0,
         });
       });
 
@@ -726,10 +726,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 45,
-          y2: 45,
+          x: 0,
+          width: 120,
+          y: 45,
+          height: 0,
         });
       });
 
@@ -744,10 +744,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 0,
-          y2: 0,
+          x: 0,
+          width: 120,
+          y: 0,
+          height: 0,
         });
       });
 
@@ -762,10 +762,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 0,
-          y2: 0,
+          x: 0,
+          width: 120,
+          y: 0,
+          height: 0,
         });
       });
 
@@ -798,10 +798,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 0,
-          y2: 0,
+          x: 0,
+          width: 120,
+          y: 0,
+          height: 0,
         });
       });
 
@@ -816,10 +816,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 60,
-          y2: 60,
+          x: 0,
+          width: 120,
+          y: 60,
+          height: 0,
         });
       });
 
@@ -834,10 +834,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 0,
-          y2: 0,
+          x: 0,
+          width: 120,
+          y: 0,
+          height: 0,
         });
       });
 
@@ -852,10 +852,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 0,
-          y2: 0,
+          x: 0,
+          width: 120,
+          y: 0,
+          height: 0,
         });
       });
 
@@ -870,10 +870,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 0,
-          y2: 0,
+          x: 0,
+          width: 120,
+          y: 0,
+          height: 0,
         });
       });
 
@@ -906,10 +906,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 100,
-          y2: 100,
+          x: 0,
+          width: 120,
+          y: 100,
+          height: 0,
         });
       });
 
@@ -924,10 +924,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 55,
-          y2: 55,
+          x: 0,
+          width: 120,
+          y: 55,
+          height: 0,
         });
       });
 
@@ -942,10 +942,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 100,
-          y2: 100,
+          x: 0,
+          width: 120,
+          y: 100,
+          height: 0,
         });
       });
 
@@ -960,10 +960,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 100,
-          y2: 100,
+          x: 0,
+          width: 120,
+          y: 100,
+          height: 0,
         });
       });
 
@@ -996,10 +996,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 100,
-          y2: 100,
+          x: 0,
+          width: 120,
+          y: 100,
+          height: 0,
         });
       });
 
@@ -1014,10 +1014,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 40,
-          y2: 40,
+          x: 0,
+          width: 120,
+          y: 40,
+          height: 0,
         });
       });
 
@@ -1032,10 +1032,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 100,
-          y2: 100,
+          x: 0,
+          width: 120,
+          y: 100,
+          height: 0,
         });
       });
 
@@ -1050,10 +1050,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 100,
-          y2: 100,
+          x: 0,
+          width: 120,
+          y: 100,
+          height: 0,
         });
       });
 
@@ -1068,10 +1068,10 @@ describe('Crosshair utils linear scale', () => {
           0,
         );
         expect(bandPosition).toEqual({
-          x1: 0,
-          x2: 120,
-          y1: 100,
-          y2: 100,
+          x: 0,
+          width: 120,
+          y: 100,
+          height: 0,
         });
       });
 
diff --git a/src/chart_types/xy_chart/crosshair/crosshair_utils.ts b/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
index dcec27b46f..645428630d 100644
--- a/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
+++ b/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
@@ -17,16 +17,15 @@
  * under the License.
  */
 
-import { TooltipAnchorPosition } from '../../../components/tooltip/types';
+import { AnchorPosition } from '../../../components/portal/types';
 import { Line, Rect } from '../../../geoms/types';
 import { Scale } from '../../../scales';
 import { isContinuousScale } from '../../../scales/types';
-import { TooltipProps } from '../../../specs/settings';
-import { Position, Rotation } from '../../../utils/common';
+import { TooltipStickTo } from '../../../specs/constants';
+import { Rotation } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { Point } from '../../../utils/point';
 import { isHorizontalRotation, isVerticalRotation } from '../state/utils/common';
-import { ChartDimensions } from '../utils/dimensions';
 
 /** @internal */
 export const DEFAULT_SNAP_POSITION_BAND = 1;
@@ -100,7 +99,7 @@ export function getCursorBandPosition(
   snapEnabled: boolean,
   xScale: Scale,
   totalBarsInCluster?: number,
-): Line | Rect | undefined {
+): Rect | undefined {
   const { top, left, width, height } = panel;
   const { x, y } = cursorPosition;
   const isHorizontalRotated = isHorizontalRotation(chartRotation);
@@ -133,10 +132,10 @@ export function getCursorBandPosition(
     }
     if (isLineOrAreaOnly && isContinuousScale(xScale)) {
       return {
-        x1: leftPosition,
-        x2: leftPosition,
-        y1: top,
-        y2: top + height,
+        x: leftPosition,
+        width: 0,
+        y: top,
+        height,
       };
     }
     return {
@@ -157,10 +156,10 @@ export function getCursorBandPosition(
   }
   if (isLineOrAreaOnly && isContinuousScale(xScale)) {
     return {
-      x1: left,
-      x2: left + width,
-      y1: topPosition,
-      y2: topPosition,
+      x: left,
+      width,
+      y: topPosition,
+      height: 0,
     };
   }
   return {
@@ -173,84 +172,43 @@ export function getCursorBandPosition(
 
 /** @internal */
 export function getTooltipAnchorPosition(
-  { offset }: ChartDimensions,
   chartRotation: Rotation,
-  cursorBandPosition: Line | Rect,
+  cursorBandPosition: Rect,
   cursorPosition: { x: number; y: number },
   panel: Dimensions,
-  stickTo?: TooltipProps['stickTo'],
-): TooltipAnchorPosition {
+  stickTo: TooltipStickTo = TooltipStickTo.MousePosition,
+): AnchorPosition {
+  const { x, y, width, height } = cursorBandPosition;
   const isRotated = isVerticalRotation(chartRotation);
-  const hPosition = getHorizontalTooltipPosition(
-    cursorPosition.x,
-    cursorBandPosition,
-    panel,
-    offset.left,
-    isRotated,
-    stickTo,
-  );
-  const vPosition = getVerticalTooltipPosition(
-    cursorPosition.y,
-    cursorBandPosition,
-    panel,
-    offset.top,
-    isRotated,
-    stickTo,
-  );
-  return {
-    isRotated,
-    ...vPosition,
-    ...hPosition,
-  };
-}
-
-function getHorizontalTooltipPosition(
-  cursorXPosition: number,
-  cursorBandPosition: Line | Rect,
-  panel: Dimensions,
-  globalOffset: number,
-  isRotated: boolean,
-  stickTo?: TooltipProps['stickTo'],
-): { x0?: number; x1: number } {
-  if (!isRotated) {
-    const left = 'x1' in cursorBandPosition ? cursorBandPosition.x1 : cursorBandPosition.x;
-    const width = 'width' in cursorBandPosition ? cursorBandPosition.width : 0;
-    return {
-      x0: left + globalOffset,
-      x1: left + width + globalOffset,
-    };
-  }
-  const x = stickTo === Position.Left ? 0 : stickTo === Position.Right ? panel.width : cursorXPosition;
-  return {
-    // NOTE: x0 set to zero blocks tooltip placement on left when rotated 90 deg
-    // Delete this comment before merging and verifying this doesn't break anything.
-    x1: panel.left + x + globalOffset,
-  };
-}
-
-function getVerticalTooltipPosition(
-  cursorYPosition: number,
-  cursorBandPosition: Line | Rect,
-  panel: Dimensions,
-  globalOffset: number,
-  isRotated: boolean,
-  stickTo?: TooltipProps['stickTo'],
-): {
-  y0: number;
-  y1: number;
-} {
-  const y = stickTo === Position.Top ? 0 : stickTo === Position.Bottom ? panel.height : cursorYPosition;
+  // horizontal movement of cursor
   if (!isRotated) {
-    const yPos = y + panel.top + globalOffset;
+    const stickY =
+      stickTo === TooltipStickTo.MousePosition
+        ? cursorPosition.y + panel.top
+        : stickTo === TooltipStickTo.Middle
+        ? y + height / 2
+        : stickTo === TooltipStickTo.Bottom
+        ? y + height
+        : y; // TooltipStickTo.Top is also ok with that value
     return {
-      y0: yPos,
-      y1: yPos,
+      x,
+      width,
+      y: stickY,
+      height: 0,
     };
   }
-  const top = 'y1' in cursorBandPosition ? cursorBandPosition.y1 : cursorBandPosition.y;
-  const height = 'height' in cursorBandPosition ? cursorBandPosition.height : 0;
+  const stickX =
+    stickTo === TooltipStickTo.MousePosition
+      ? cursorPosition.x + panel.left
+      : stickTo === TooltipStickTo.Right
+      ? x + width
+      : stickTo === TooltipStickTo.Center
+      ? x + width / 2
+      : x; // TooltipStickTo.Left
   return {
-    y0: top + globalOffset,
-    y1: height + top + globalOffset,
+    x: stickX,
+    width: 0,
+    y,
+    height,
   };
 }
diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
index a1bfbb2dcc..5338c08a66 100644
--- a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
+++ b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
@@ -89,7 +89,7 @@ interface ReactiveChartDispatchProps {
   onChartRendered: typeof onChartRendered;
 }
 interface ReactiveChartOwnProps {
-  forwardStageRef: RefObject<HTMLCanvasElement>;
+  forwardCanvasRef: RefObject<HTMLCanvasElement>;
 }
 const CLIPPING_MARGINS = 0.5;
 
@@ -148,14 +148,14 @@ class XYChartComponent extends React.Component<XYChartProps> {
   }
 
   private tryCanvasContext() {
-    const canvas = this.props.forwardStageRef.current;
+    const canvas = this.props.forwardCanvasRef.current;
     this.ctx = canvas && canvas.getContext('2d');
   }
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
   render() {
     const {
-      forwardStageRef,
+      forwardCanvasRef,
       initialized,
       isChartEmpty,
       chartContainerDimensions: { width, height },
@@ -170,7 +170,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
     return (
       <figure aria-labelledby={a11ySettings.labelId} aria-describedby={a11ySettings.descriptionId}>
         <canvas
-          ref={forwardStageRef}
+          ref={forwardCanvasRef}
           className="echCanvasRenderer"
           width={width * this.devicePixelRatio}
           height={height * this.devicePixelRatio}
diff --git a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx b/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
index 88632c82f3..6272f14e06 100644
--- a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
+++ b/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
@@ -37,7 +37,7 @@ import { getCursorLinePositionSelector } from '../../state/selectors/get_cursor_
 interface CrosshairProps {
   theme: Theme;
   chartRotation: Rotation;
-  cursorPosition?: (Line | Rect) & { isLine?: boolean };
+  cursorPosition?: Rect;
   cursorCrossLinePosition?: Line;
   tooltipType: TooltipType;
   fromExternalEvent?: boolean;
@@ -69,31 +69,20 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
     if (!cursorPosition || !canRenderBand(tooltipType, band.visible, fromExternalEvent)) {
       return null;
     }
-    if ('x1' in cursorPosition) {
-      const { x1, x2, y1, y2 } = cursorPosition;
-      const { strokeWidth, stroke, dash } = line;
-      const strokeDasharray = (dash ?? []).join(' ');
-      return (
-        <svg
-          className="echCrosshair__cursor"
-          width="100%"
-          height="100%"
-          style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
-        >
-          <line {...{ x1, x2, y1, y2, strokeWidth, stroke, strokeDasharray }} />
-        </svg>
-      );
-    }
     const { x, y, width, height } = cursorPosition;
+    const isLine = width === 0 || height === 0;
+    const { strokeWidth, stroke, dash } = line;
     const { fill } = band;
+    const strokeDasharray = (dash ?? []).join(' ');
     return (
       <svg
         className="echCrosshair__cursor"
         width="100%"
         height="100%"
-        style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
+        style={{ zIndex: cursorPosition && isLine ? zIndex : undefined }}
       >
-        <rect {...{ x, y, width, height, fill }} />;
+        {isLine && <line {...{ x1: x, x2: x + width, y1: y, y2: y + height, strokeWidth, stroke, strokeDasharray }} />}
+        {!isLine && <rect {...{ x, y, width, height, fill }} />}
       </svg>
     );
   }
diff --git a/src/chart_types/xy_chart/state/chart_state.tsx b/src/chart_types/xy_chart/state/chart_state.tsx
index 58ae89ce5d..a8080fc93b 100644
--- a/src/chart_types/xy_chart/state/chart_state.tsx
+++ b/src/chart_types/xy_chart/state/chart_state.tsx
@@ -120,13 +120,13 @@ export class XYAxisChartState implements InternalChartState {
     return getHighlightedValuesSelector(globalState);
   }
 
-  chartRenderer(containerRef: BackwardRef, forwardStageRef: RefObject<HTMLCanvasElement>) {
+  chartRenderer(containerRef: BackwardRef, forwardCanvasRef: RefObject<HTMLCanvasElement>) {
     return (
       <>
         <Crosshair />
-        <XYChart forwardStageRef={forwardStageRef} />
+        <XYChart forwardCanvasRef={forwardCanvasRef} />
         <Tooltip getChartContainerRef={containerRef} />
-        <Annotations getChartContainerRef={containerRef} chartAreaRef={forwardStageRef} />
+        <Annotations getChartContainerRef={containerRef} chartAreaRef={forwardCanvasRef} />
         <Highlighter />
         <BrushTool />
       </>
diff --git a/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts b/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts
index ef80000174..df69be257e 100644
--- a/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts
+++ b/src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts
@@ -22,9 +22,7 @@ import createCachedSelector from 're-reselect';
 import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
-import { getLegendSizeSelector, LegendSizing } from '../../../../state/selectors/get_legend_size';
 import { getSmallMultiplesSpec } from '../../../../state/selectors/get_small_multiples_spec';
-import { HorizontalAlignment, LayoutDirection, VerticalAlignment } from '../../../../utils/common';
 import { computeChartDimensions, ChartDimensions } from '../../utils/dimensions';
 import { computeAxisTicksDimensionsSelector } from './compute_axis_ticks_dimensions';
 import { getAxesStylesSelector } from './get_axis_styles';
@@ -38,49 +36,15 @@ export const computeChartDimensionsSelector = createCachedSelector(
     computeAxisTicksDimensionsSelector,
     getAxisSpecsSelector,
     getAxesStylesSelector,
-    getLegendSizeSelector,
     getSmallMultiplesSpec,
   ],
-  (
-    chartContainerDimensions,
-    chartTheme,
-    axesTicksDimensions,
-    axesSpecs,
-    axesStyles,
-    legendSize,
-    smSpec,
-  ): ChartDimensions =>
+  (chartContainerDimensions, chartTheme, axesTicksDimensions, axesSpecs, axesStyles, smSpec): ChartDimensions =>
     computeChartDimensions(
       chartContainerDimensions,
       chartTheme,
       axesTicksDimensions,
       axesStyles,
       axesSpecs,
-      getLegendDimension(legendSize),
       smSpec && smSpec[0],
     ),
 )(getChartIdSelector);
-
-function getLegendDimension({
-  position: { direction, vAlign, hAlign },
-  width,
-  height,
-  margin,
-}: LegendSizing): {
-  top: number;
-  left: number;
-} {
-  let left = 0;
-  let top = 0;
-
-  if (direction === LayoutDirection.Vertical && hAlign === HorizontalAlignment.Left) {
-    left = width + margin * 2;
-  } else if (direction === LayoutDirection.Horizontal && vAlign === VerticalAlignment.Top) {
-    top = height + margin * 2;
-  }
-
-  return {
-    left,
-    top,
-  };
-}
diff --git a/src/chart_types/xy_chart/state/selectors/get_annotation_tooltip_state.ts b/src/chart_types/xy_chart/state/selectors/get_annotation_tooltip_state.ts
index db63366c93..0cc5218bb5 100644
--- a/src/chart_types/xy_chart/state/selectors/get_annotation_tooltip_state.ts
+++ b/src/chart_types/xy_chart/state/selectors/get_annotation_tooltip_state.ts
@@ -144,8 +144,10 @@ function getTooltipStateForDOMElements(
     annotationType: AnnotationType.Line,
     datum: dimension.datum,
     anchor: {
-      top: (dimension.markers[0]?.position.top ?? 0) + dimension.panel.top + chartDimensions.top,
-      left: (dimension.markers[0]?.position.left ?? 0) + dimension.panel.left + chartDimensions.left,
+      y: (dimension.markers[0]?.position.top ?? 0) + dimension.panel.top + chartDimensions.top,
+      x: (dimension.markers[0]?.position.left ?? 0) + dimension.panel.left + chartDimensions.left,
+      width: 0,
+      height: 0,
     },
     customTooltipDetails: spec.customTooltipDetails,
     customTooltip: spec.customTooltip,
diff --git a/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts b/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts
index f10bc5cb92..94aa15b198 100644
--- a/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts
+++ b/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts
@@ -19,7 +19,7 @@
 
 import createCachedSelector from 're-reselect';
 
-import { Line, Rect } from '../../../../geoms/types';
+import { Rect } from '../../../../geoms/types';
 import { Scale } from '../../../../scales';
 import { SettingsSpec, PointerEvent } from '../../../../specs/settings';
 import { GlobalChartState } from '../../../../state/chart_state';
@@ -93,7 +93,7 @@ function getCursorBand(
   isTooltipSnapEnabled: boolean,
   geometriesIndexKeys: (string | number)[],
   smallMultipleScales: SmallMultipleScales,
-): ((Line | Rect) & { fromExternalEvent: boolean }) | undefined {
+): (Rect & { fromExternalEvent: boolean }) | undefined {
   if (!xScale) {
     return;
   }
diff --git a/src/chart_types/xy_chart/state/selectors/get_tooltip_position.ts b/src/chart_types/xy_chart/state/selectors/get_tooltip_position.ts
index 4995fedf76..57bf5d569f 100644
--- a/src/chart_types/xy_chart/state/selectors/get_tooltip_position.ts
+++ b/src/chart_types/xy_chart/state/selectors/get_tooltip_position.ts
@@ -19,7 +19,7 @@
 
 import createCachedSelector from 're-reselect';
 
-import { TooltipAnchorPosition } from '../../../../components/tooltip/types';
+import { AnchorPosition } from '../../../../components/portal/types';
 import { isTooltipType } from '../../../../specs/settings';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
@@ -44,7 +44,7 @@ export const getTooltipAnchorPositionSelector = createCachedSelector(
     cursorBandPosition,
     projectedPointerPosition,
     { horizontal, vertical },
-  ): TooltipAnchorPosition | null => {
+  ): AnchorPosition | null => {
     if (!cursorBandPosition) {
       return null;
     }
@@ -60,7 +60,6 @@ export const getTooltipAnchorPositionSelector = createCachedSelector(
     };
 
     return getTooltipAnchorPosition(
-      chartDimensions,
       settings.rotation,
       cursorBandPosition,
       projectedPointerPosition,
diff --git a/src/chart_types/xy_chart/utils/dimensions.test.ts b/src/chart_types/xy_chart/utils/dimensions.test.ts
index d2013540a6..d1bad05aeb 100644
--- a/src/chart_types/xy_chart/utils/dimensions.test.ts
+++ b/src/chart_types/xy_chart/utils/dimensions.test.ts
@@ -47,10 +47,6 @@ describe('Computed chart dimensions', () => {
     top: 10,
     bottom: 10,
   };
-  const legendSize = {
-    top: 0,
-    left: 0,
-  };
 
   const axis1Dims: AxisTicksDimensions = {
     tickValues: [0, 1],
@@ -94,14 +90,7 @@ describe('Computed chart dimensions', () => {
     const axisDims = new Map<AxisId, AxisTicksDimensions>();
     const axisStyles = new Map();
     const axisSpecs: AxisSpec[] = [];
-    const { chartDimensions } = computeChartDimensions(
-      parentDim,
-      chartTheme,
-      axisDims,
-      axisStyles,
-      axisSpecs,
-      legendSize,
-    );
+    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -113,14 +102,7 @@ describe('Computed chart dimensions', () => {
     const axisStyles = new Map();
     const axisSpecs = [axisLeftSpec];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(
-      parentDim,
-      chartTheme,
-      axisDims,
-      axisStyles,
-      axisSpecs,
-      legendSize,
-    );
+    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -132,14 +114,7 @@ describe('Computed chart dimensions', () => {
     const axisStyles = new Map();
     const axisSpecs = [{ ...axisLeftSpec, position: Position.Right }];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(
-      parentDim,
-      chartTheme,
-      axisDims,
-      axisStyles,
-      axisSpecs,
-      legendSize,
-    );
+    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -156,14 +131,7 @@ describe('Computed chart dimensions', () => {
       },
     ];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(
-      parentDim,
-      chartTheme,
-      axisDims,
-      axisStyles,
-      axisSpecs,
-      legendSize,
-    );
+    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -180,14 +148,7 @@ describe('Computed chart dimensions', () => {
       },
     ];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(
-      parentDim,
-      chartTheme,
-      axisDims,
-      axisStyles,
-      axisSpecs,
-      legendSize,
-    );
+    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -202,7 +163,7 @@ describe('Computed chart dimensions', () => {
       },
     ];
     axisDims.set('foo', axis1Dims);
-    const chartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs, legendSize);
+    const chartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
 
     const expectedDims = {
       chartDimensions: {
@@ -212,10 +173,6 @@ describe('Computed chart dimensions', () => {
         top: 20,
       },
       leftMargin: 10,
-      offset: {
-        top: 0,
-        left: 0,
-      },
     };
 
     expect(chartDimensions).toEqual(expectedDims);
@@ -228,14 +185,7 @@ describe('Computed chart dimensions', () => {
       hide: true,
       position: Position.Bottom,
     });
-    const hiddenAxisChartDimensions = computeChartDimensions(
-      parentDim,
-      chartTheme,
-      axisDims,
-      axisStyles,
-      axisSpecs,
-      legendSize,
-    );
+    const hiddenAxisChartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
 
     expect(hiddenAxisChartDimensions).toEqual(expectedDims);
   });
diff --git a/src/chart_types/xy_chart/utils/dimensions.ts b/src/chart_types/xy_chart/utils/dimensions.ts
index c3ea567ba7..7dc151de79 100644
--- a/src/chart_types/xy_chart/utils/dimensions.ts
+++ b/src/chart_types/xy_chart/utils/dimensions.ts
@@ -33,13 +33,6 @@ export interface ChartDimensions {
    * Dimensions relative to canvas element
    */
   chartDimensions: Dimensions;
-  /**
-   * Dimensions relative to echChart element
-   */
-  offset: {
-    top: number;
-    left: number;
-  };
   /**
    * Margin to account for ending text overflow
    */
@@ -57,10 +50,6 @@ export function computeChartDimensions(
   axisDimensions: Map<AxisId, AxisTicksDimensions>,
   axesStyles: Map<AxisId, AxisStyle | null>,
   axisSpecs: AxisSpec[],
-  legendSizing: {
-    top: number;
-    left: number;
-  },
   smSpec?: SmallMultiplesSpec,
 ): ChartDimensions {
   if (parentDimensions.width <= 0 || parentDimensions.height <= 0) {
@@ -72,10 +61,6 @@ export function computeChartDimensions(
         top: 0,
       },
       leftMargin: 0,
-      offset: {
-        left: 0,
-        top: 0,
-      },
     };
   }
 
@@ -94,9 +79,5 @@ export function computeChartDimensions(
       width: chartWidth - chartPaddings.left - chartPaddings.right,
       height: chartHeight - chartPaddings.top - chartPaddings.bottom,
     },
-    offset: {
-      top: legendSizing.top,
-      left: legendSizing.left,
-    },
   };
 }
diff --git a/src/common/constants.ts b/src/common/constants.ts
index 7186cd6c41..d94c20b64a 100644
--- a/src/common/constants.ts
+++ b/src/common/constants.ts
@@ -31,3 +31,16 @@ export const RIGHT_ANGLE = TAU / 4;
  * @internal
  */
 export const GOLDEN_RATIO = 1.618;
+
+/** @public */
+export const TOP = 'top' as const;
+/** @public */
+export const BOTTOM = 'bottom' as const;
+/** @public */
+export const LEFT = 'left' as const;
+/** @public */
+export const RIGHT = 'right' as const;
+/** @public */
+export const MIDDLE = 'middle' as const;
+/** @public */
+export const CENTER = 'center' as const;
diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
index 3e5550b593..de3a040a84 100644
--- a/src/components/__snapshots__/chart.test.tsx.snap
+++ b/src/components/__snapshots__/chart.test.tsx.snap
@@ -68,8 +68,8 @@ exports[`Chart should render the legend name test 1`] = `
                 <Connect(Crosshair)>
                   <Crosshair theme={{...}} chartRotation={0} cursorPosition={[undefined]} cursorCrossLinePosition={[undefined]} tooltipType=\\"vertical\\" fromExternalEvent={[undefined]} zIndex={0} dispatch={[Function: dispatch]} />
                 </Connect(Crosshair)>
-                <Connect(XYChart) forwardStageRef={{...}}>
-                  <XYChart forwardStageRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} a11ySettings={{...}} onChartRendered={[Function (anonymous)]}>
+                <Connect(XYChart) forwardCanvasRef={{...}}>
+                  <XYChart forwardCanvasRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} a11ySettings={{...}} onChartRendered={[Function (anonymous)]}>
                     <figure aria-labelledby={[undefined]} aria-describedby=\\"chart1--defaultSummary\\">
                       <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} role=\\"presentation\\">
                         <Connect(ScreenReaderSummaryComponent)>
diff --git a/src/components/chart.tsx b/src/components/chart.tsx
index 8b33095897..89dc4c72a4 100644
--- a/src/components/chart.tsx
+++ b/src/components/chart.tsx
@@ -172,7 +172,7 @@ export class Chart extends React.Component<ChartProps, ChartState> {
 
     return (
       <Provider store={this.chartStore}>
-        <div className={chartClassNames} style={containerSizeStyle} ref={this.chartContainerRef}>
+        <div className={chartClassNames} style={containerSizeStyle}>
           <ChartBackground />
           <ChartStatus />
           <ChartResizer />
@@ -180,7 +180,7 @@ export class Chart extends React.Component<ChartProps, ChartState> {
           {/* TODO: Add renderFn to error boundary */}
           <ErrorBoundary>
             <SpecsParser>{this.props.children}</SpecsParser>
-            <div className="echContainer">
+            <div className="echContainer" ref={this.chartContainerRef}>
               <ChartContainer getChartContainerRef={this.getChartContainerRef} forwardStageRef={this.chartStageRef} />
             </div>
           </ErrorBoundary>
diff --git a/src/components/portal/tooltip_portal.tsx b/src/components/portal/tooltip_portal.tsx
index 294f5a1c38..e9dc102d21 100644
--- a/src/components/portal/tooltip_portal.tsx
+++ b/src/components/portal/tooltip_portal.tsx
@@ -199,9 +199,8 @@ const TooltipPortalComponent = ({
       return;
     }
 
-    const { left, top, width, height } = position;
-    anchorNode.current.style.left = `${left}px`;
-    anchorNode.current.style.top = `${top}px`;
+    const { x, y, width, height } = position;
+    anchorNode.current.style.transform = `translate(${x}px, ${y}px)`;
 
     if (isDefined(width)) {
       anchorNode.current.style.width = `${width}px`;
@@ -211,7 +210,7 @@ const TooltipPortalComponent = ({
       anchorNode.current.style.height = `${height}px`;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, anchorNode, position?.left, position?.top, position?.width, position?.height]);
+  }, [visible, anchorNode, position?.x, position?.y, position?.width, position?.height]);
 
   useEffect(() => {
     if (!position) {
diff --git a/src/components/portal/types.ts b/src/components/portal/types.ts
index 845ecd2465..e369cb1d10 100644
--- a/src/components/portal/types.ts
+++ b/src/components/portal/types.ts
@@ -50,12 +50,24 @@ export const Placement = Object.freeze({
 export type Placement = $Values<typeof Placement>;
 
 /** @internal */
-export interface AnchorPosition {
-  left: number;
-  top: number;
-  width?: number;
-  height?: number;
-}
+export type AnchorPosition = {
+  /**
+   * the right position of anchor
+   */
+  x: number;
+  /**
+   * the top position of the anchor
+   */
+  y: number;
+  /**
+   * the width of the anchor
+   */
+  width: number;
+  /**
+   * the height of the anchor
+   */
+  height: number;
+};
 
 /**
  * Used to position tooltip relative to invisible anchor via ref element
@@ -111,6 +123,7 @@ export interface TooltipPortalSettings<B = never> {
   boundaryPadding?: Partial<Padding> | number;
   /**
    * Custom tooltip offset
+   * @defaultValue 10
    */
   offset?: number;
 }
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 9d2c6f884b..0f0e06e714 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -38,7 +38,7 @@ import { getTooltipHeaderFormatterSelector } from '../../state/selectors/get_too
 import { Rotation, isDefined } from '../../utils/common';
 import { TooltipPortal, TooltipPortalSettings, AnchorPosition, Placement } from '../portal';
 import { getTooltipSettings } from './get_tooltip_settings';
-import { TooltipInfo, TooltipAnchorPosition } from './types';
+import { TooltipInfo } from './types';
 
 interface TooltipDispatchProps {
   onPointerMove: typeof onPointerMoveAction;
@@ -47,7 +47,7 @@ interface TooltipDispatchProps {
 interface TooltipStateProps {
   zIndex: number;
   visible: boolean;
-  position: TooltipAnchorPosition | null;
+  position: AnchorPosition | null;
   info?: TooltipInfo;
   headerFormatter?: TooltipValueFormatter;
   settings?: TooltipSettings;
@@ -169,22 +169,6 @@ const TooltipComponent = ({
     );
   };
 
-  const anchorPosition = useMemo((): AnchorPosition | null => {
-    if (!position || !visible) {
-      return null;
-    }
-
-    const { x0, x1, y0, y1 } = position;
-    const width = x0 !== undefined ? x1 - x0 : 0;
-    const height = y0 !== undefined ? y1 - y0 : 0;
-    return {
-      left: x1 - width,
-      width,
-      top: y1 - height,
-      height,
-    };
-  }, [visible, position?.x0, position?.x1, position?.y0, position?.y1]); // eslint-disable-line react-hooks/exhaustive-deps
-
   const popperSettings = useMemo((): TooltipPortalSettings | undefined => {
     if (!settings || typeof settings === 'string') {
       return;
@@ -213,7 +197,7 @@ const TooltipComponent = ({
       // increasing by 100 the tooltip portal zIndex to avoid conflicts with highlighters and other elements in the DOM
       zIndex={zIndex + 100}
       anchor={{
-        position: anchorPosition,
+        position,
         ref: chartRef.current,
       }}
       settings={popperSettings}
diff --git a/src/components/tooltip/types.ts b/src/components/tooltip/types.ts
index 37e274fbf5..bb7bfebba5 100644
--- a/src/components/tooltip/types.ts
+++ b/src/components/tooltip/types.ts
@@ -43,31 +43,3 @@ export interface TooltipInfo {
  * @public
  */
 export type CustomTooltip = ComponentType<TooltipInfo>;
-
-/** @internal */
-export interface TooltipAnchorPosition {
-  /**
-   * true if the x axis is vertical
-   */
-  isRotated?: boolean;
-  /**
-   * the top position of the anchor
-   */
-  y0?: number;
-  /**
-   * the bottom position of the anchor
-   */
-  y1: number;
-  /**
-   * the right position of anchor
-   */
-  x0?: number;
-  /**
-   * the left position of the anchor
-   */
-  x1: number;
-  /**
-   * the padding to add between the tooltip position and the final position
-   */
-  padding?: number;
-}
diff --git a/src/specs/constants.ts b/src/specs/constants.ts
index fa1f49f1c7..c4e16dfbfa 100644
--- a/src/specs/constants.ts
+++ b/src/specs/constants.ts
@@ -20,6 +20,7 @@
 import { $Values } from 'utility-types';
 
 import { ChartType } from '../chart_types';
+import { BOTTOM, CENTER, LEFT, MIDDLE, RIGHT, TOP } from '../common/constants';
 import { Position } from '../utils/common';
 import { LIGHT_THEME } from '../utils/themes/light_theme';
 import { SettingsSpec } from './settings';
@@ -107,6 +108,21 @@ export const BrushAxis = Object.freeze({
 /** @public */
 export type BrushAxis = $Values<typeof BrushAxis>;
 
+/**
+ * The position to stick the tooltip to
+ * @public
+ */
+export const TooltipStickTo = Object.freeze({
+  Top: TOP,
+  Bottom: BOTTOM,
+  Middle: MIDDLE,
+  Left: LEFT,
+  Right: RIGHT,
+  Center: CENTER,
+  MousePosition: 'MousePosition' as const,
+});
+/** @public */
+export type TooltipStickTo = $Values<typeof TooltipStickTo>;
 /**
  * Default value for the tooltip type
  * @defaultValue `vertical` {@link (TooltipType:type) | TooltipType.VerticalCursor}
diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx
index 22a0e6be45..c0eb9e1be0 100644
--- a/src/specs/settings.tsx
+++ b/src/specs/settings.tsx
@@ -19,7 +19,7 @@
 
 import React, { ComponentType, ReactChild } from 'react';
 
-import { CustomXDomain, GroupByAccessor, Spec } from '.';
+import { CustomXDomain, GroupByAccessor, Spec, TooltipStickTo } from '.';
 import { Cell } from '../chart_types/heatmap/layout/types/viewmodel_types';
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
 import { LegendStrategy } from '../chart_types/partition_chart/layout/utils/highlighted_geoms';
@@ -274,8 +274,9 @@ export type TooltipProps = TooltipPortalSettings<'chart'> & {
   customTooltip?: CustomTooltip;
   /**
    * Stick the tooltip to a specific position within the current cursor
+   * @defaultValue mousePosition
    */
-  stickTo?: Position;
+  stickTo?: TooltipStickTo;
 };
 
 /**
diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts
index 4999fa86a8..5e736bad99 100644
--- a/src/state/chart_state.ts
+++ b/src/state/chart_state.ts
@@ -28,7 +28,8 @@ import { XYAxisChartState } from '../chart_types/xy_chart/state/chart_state';
 import { CategoryKey } from '../common/category';
 import { LegendItem, LegendItemExtraValues } from '../common/legend';
 import { SeriesIdentifier, SeriesKey } from '../common/series_id';
-import { TooltipAnchorPosition, TooltipInfo } from '../components/tooltip/types';
+import { AnchorPosition } from '../components/portal/types';
+import { TooltipInfo } from '../components/tooltip/types';
 import { DEFAULT_SETTINGS_SPEC, PointerEvent, Spec } from '../specs';
 import { Color, keepDistinct } from '../utils/common';
 import { Dimensions } from '../utils/dimensions';
@@ -122,7 +123,7 @@ export interface InternalChartState {
    * Get the tooltip anchor position
    * @param globalState
    */
-  getTooltipAnchor(globalState: GlobalChartState): TooltipAnchorPosition | null;
+  getTooltipAnchor(globalState: GlobalChartState): AnchorPosition | null;
 
   /**
    * Called on every state change to activate any event callback
diff --git a/src/state/selectors/get_internal_tooltip_anchor_position.ts b/src/state/selectors/get_internal_tooltip_anchor_position.ts
index 777d7b7d92..ab078a5a03 100644
--- a/src/state/selectors/get_internal_tooltip_anchor_position.ts
+++ b/src/state/selectors/get_internal_tooltip_anchor_position.ts
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import { TooltipAnchorPosition } from '../../components/tooltip/types';
+import { AnchorPosition } from '../../components/portal/types';
 import { GlobalChartState } from '../chart_state';
 
 /** @internal */
-export const getInternalTooltipAnchorPositionSelector = (state: GlobalChartState): TooltipAnchorPosition | null => {
+export const getInternalTooltipAnchorPositionSelector = (state: GlobalChartState): AnchorPosition | null => {
   if (state.internalChartState) {
     return state.internalChartState.getTooltipAnchor(state);
   }
diff --git a/stories/area/2_with_time.tsx b/stories/area/2_with_time.tsx
index 7c9541c631..c29bc2cf6f 100644
--- a/stories/area/2_with_time.tsx
+++ b/stories/area/2_with_time.tsx
@@ -23,7 +23,7 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Placement, Position, ScaleType, Settings, timeFormatter } from '../../src';
 import { isDefined } from '../../src/utils/common';
 import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
-import { getPlacementKnob, getPositionKnob } from '../utils/knobs';
+import { getChartRotationKnob, getPlacementKnob, getStickToKnob } from '../utils/knobs';
 import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
@@ -32,12 +32,12 @@ export const Example = () => (
   <Chart className="story-chart">
     <Settings
       tooltip={{
-        stickTo: getPositionKnob('stickTo', Position.Top),
-        placement: getPlacementKnob('placement', Placement.RightEnd),
+        stickTo: getStickToKnob('stickTo'),
+        placement: getPlacementKnob('placement', undefined),
         fallbackPlacements: [getPlacementKnob('fallback placement', Placement.LeftStart)].filter(isDefined),
         offset: number('placement offset', 5),
       }}
-      rotation={0}
+      rotation={getChartRotationKnob()}
     />
     <Axis
       id="bottom"
@@ -53,7 +53,7 @@ export const Example = () => (
       tickFormat={(d) => Number(d).toFixed(2)}
     />
     <AreaSeries
-      id="area"
+      id="area1"
       xScaleType={ScaleType.Time}
       yScaleType={ScaleType.Linear}
       xAccessor={0}
diff --git a/stories/bar/2_label_value.tsx b/stories/bar/2_label_value.tsx
index 42f049f8fe..904b8ac7a8 100644
--- a/stories/bar/2_label_value.tsx
+++ b/stories/bar/2_label_value.tsx
@@ -22,7 +22,7 @@ import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src';
 import { SeededDataGenerator } from '../../src/mocks/utils';
-import { getChartRotationKnob } from '../utils/knobs';
+import { getChartRotationKnob, getPositionKnob } from '../utils/knobs';
 
 const dataGen = new SeededDataGenerator();
 function generateDataWithAdditional(num: number) {
@@ -85,7 +85,14 @@ export const Example = () => {
   const stackAccessors = isStackedSeries ? ['x'] : undefined;
   return (
     <Chart renderer="canvas" className="story-chart">
-      <Settings theme={theme} debug={debug} rotation={getChartRotationKnob()} showLegend showLegendExtra />
+      <Settings
+        theme={theme}
+        debug={debug}
+        rotation={getChartRotationKnob()}
+        showLegend
+        showLegendExtra
+        legendPosition={getPositionKnob('legend')}
+      />
       <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
       <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
       <BarSeries
diff --git a/stories/bar/48_test_tooltip.tsx b/stories/bar/48_test_tooltip.tsx
index 8ab029e828..5fca5832b3 100644
--- a/stories/bar/48_test_tooltip.tsx
+++ b/stories/bar/48_test_tooltip.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../src';
@@ -27,6 +27,7 @@ import {
   getChartRotationKnob,
   getFallbackPlacementsKnob,
   getPlacementKnob,
+  getStickToKnob,
   getTooltipTypeKnob,
 } from '../utils/knobs';
 import { SB_SOURCE_PANEL } from '../utils/storybook';
@@ -47,11 +48,13 @@ const CustomTooltip = () => (
 export const Example = () => {
   const rotation = getChartRotationKnob();
   const tooltipOptions = {
+    stickTo: getStickToKnob('stickTo'),
     placement: getPlacementKnob('Tooltip placement'),
     fallbackPlacements: getFallbackPlacementsKnob(),
     type: getTooltipTypeKnob(),
     boundary: getBoundaryKnob(),
     customTooltip: boolean('Custom Tooltip', false) ? CustomTooltip : undefined,
+    offset: number('Tooltip offset', 10, { min: 0, max: 20, range: true, step: 1 }),
   };
   const showAxes = boolean('Show axes', false);
   const showLegend = boolean('Show Legend', false);
diff --git a/stories/utils/knobs.ts b/stories/utils/knobs.ts
index 4565c0ef60..9382812869 100644
--- a/stories/utils/knobs.ts
+++ b/stories/utils/knobs.ts
@@ -22,7 +22,7 @@ import { select, array, number, optionsKnob } from '@storybook/addon-knobs';
 import { SelectTypeKnobValue } from '@storybook/addon-knobs/dist/components/types';
 import { startCase, kebabCase } from 'lodash';
 
-import { Rotation, Position, Placement, TooltipProps } from '../../src';
+import { Rotation, Position, Placement, TooltipProps, TooltipStickTo } from '../../src';
 import { TooltipType } from '../../src/specs/constants';
 import { VerticalAlignment, HorizontalAlignment } from '../../src/utils/common';
 
@@ -140,6 +140,20 @@ export const getPlacementKnob = (name = 'placement', defaultValue?: Placement, g
   return value || undefined;
 };
 
+export const getStickToKnob = (name = 'stickTo', defaultValue = TooltipStickTo.MousePosition, groupId?: string) => {
+  const value = select<TooltipStickTo | undefined>(
+    name,
+    {
+      Default: undefined,
+      ...TooltipStickTo,
+    },
+    defaultValue,
+    groupId,
+  );
+
+  return value || undefined;
+};
+
 export const getEuiPopoverPositionKnob = (
   name = 'Popover position',
   defaultValue: PopoverAnchorPosition = 'leftCenter',