diff --git a/.buildkite/utils/github.ts b/.buildkite/utils/github.ts
index 7ee9938d50..e23d5f268f 100644
--- a/.buildkite/utils/github.ts
+++ b/.buildkite/utils/github.ts
@@ -32,7 +32,7 @@ const auth = JSON.parse(process.env.GITHUB_AUTH);
 const MyOctokit = Octokit.plugin(retry);
 export const octokit = new MyOctokit({
   authStrategy: createAppAuth,
-  auth: auth,
+  auth,
 });
 
 export const defaultGHOptions = {
@@ -237,7 +237,7 @@ export const updateCheckStatus = async (
     const output =
       title && typeof title === 'string'
         ? {
-            title: title,
+            title,
             summary: title,
             ...options.output,
           }
diff --git a/.eslintrc.js b/.eslintrc.js
index f3bbc7fe2a..f72498b1e8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -94,9 +94,11 @@ module.exports = {
     'react/require-default-props': 0,
     'react/display-name': 0,
     'react/require-render-return': 0, // rule is broken for certain types of function syntax
+    'react/prefer-stateless-function': 0, // annoying rule that could be used in the future
     'jsx-a11y/no-static-element-interactions': 1,
     'jsx-a11y/mouse-events-have-key-events': 1,
     'jsx-a11y/click-events-have-key-events': 1,
+    'jsx-a11y/no-static-element-interactions': 0,
     '@typescript-eslint/member-ordering': 0,
     eqeqeq: 2,
 
@@ -112,6 +114,7 @@ module.exports = {
     'consistent-return': 0,
     'no-plusplus': 0,
     'no-bitwise': 0,
+    'object-shorthand': ['error', 'properties'],
     'no-void': [2, { allowAsStatement: true }],
     yoda: 0,
     'no-restricted-globals': 0,
diff --git a/e2e/page_objects/common.ts b/e2e/page_objects/common.ts
index f773fa5425..a649c9e28d 100644
--- a/e2e/page_objects/common.ts
+++ b/e2e/page_objects/common.ts
@@ -282,11 +282,12 @@ export class CommonPage {
    * @param mousePosition
    * @param selector
    */
-  clickMouseRelativeToDOMElement = (page: Page) => async (mousePosition: MousePosition, selector: string) => {
-    const element = await this.getBoundingClientRect(page)(selector);
-    const { x, y } = getCursorPosition(mousePosition, element);
-    await page.mouse.click(x, y);
-  };
+  clickMouseRelativeToDOMElement =
+    (page: Page) => async (mousePosition: MousePosition, selector: string, button?: 'left' | 'right' | 'middle') => {
+      const element = await this.getBoundingClientRect(page)(selector);
+      const { x, y } = getCursorPosition(mousePosition, element);
+      await page.mouse.click(x, y, { button });
+    };
 
   /**
    * Drag mouse relative to element
@@ -435,6 +436,33 @@ export class CommonPage {
       });
     };
 
+  /**
+   * Expect a chart given a url from storybook with mouse click
+   *
+   * TODO - Find why this always creates a 2px diff
+   *
+   * @param url Storybook url from knobs section
+   * @param mousePosition - position of mouse relative to chart
+   * @param options
+   */
+  expectChartWithClickAtUrlToMatchScreenshot =
+    (page: Page) =>
+    async (
+      url: string,
+      mousePosition: MousePosition,
+      button?: 'left' | 'right' | 'middle',
+      options?: ScreenshotElementAtUrlOptions,
+    ) => {
+      const action = async () => {
+        await options?.action?.();
+        await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, button);
+      };
+      await this.expectChartAtUrlToMatchScreenshot(page)(url, {
+        ...options,
+        action,
+      });
+    };
+
   /**
    * Expect a chart given a url from storybook with keyboard events
    * @param url
diff --git a/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/hover-state/should-fade-all-other-annotations-when-line-marker-is-hovered-chrome-linux.png b/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/hover-state/should-fade-all-other-annotations-when-line-marker-is-hovered-chrome-linux.png
index 234e300313..7884357ba6 100644
Binary files a/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/hover-state/should-fade-all-other-annotations-when-line-marker-is-hovered-chrome-linux.png and b/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/hover-state/should-fade-all-other-annotations-when-line-marker-is-hovered-chrome-linux.png differ
diff --git a/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-x-domain-chrome-linux.png b/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-x-domain-chrome-linux.png
index fde5c0262d..972c6962db 100644
Binary files a/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-x-domain-chrome-linux.png and b/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-x-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-y-domain-chrome-linux.png b/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-y-domain-chrome-linux.png
index 686599096a..9cd08f63a8 100644
Binary files a/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-y-domain-chrome-linux.png and b/e2e/screenshots/annotations_stories.test.ts-snapshots/annotations-stories/outside-annotations/should-show-tooltip-on-hover-y-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bar_stories.test.ts-snapshots/bar-series-stories/functional-accessors/functional-accessors-with-field-name-with-tooltip-chrome-linux.png b/e2e/screenshots/bar_stories.test.ts-snapshots/bar-series-stories/functional-accessors/functional-accessors-with-field-name-with-tooltip-chrome-linux.png
index 2b194132ea..295b4ca84c 100644
Binary files a/e2e/screenshots/bar_stories.test.ts-snapshots/bar-series-stories/functional-accessors/functional-accessors-with-field-name-with-tooltip-chrome-linux.png and b/e2e/screenshots/bar_stories.test.ts-snapshots/bar-series-stories/functional-accessors/functional-accessors-with-field-name-with-tooltip-chrome-linux.png differ
diff --git a/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/sagitta-offset/should-show-custom-value-formatter-in-tooltip-chrome-linux.png b/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/sagitta-offset/should-show-custom-value-formatter-in-tooltip-chrome-linux.png
index e603710493..ea63ae73b0 100644
Binary files a/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/sagitta-offset/should-show-custom-value-formatter-in-tooltip-chrome-linux.png and b/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/sagitta-offset/should-show-custom-value-formatter-in-tooltip-chrome-linux.png differ
diff --git a/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/should-render-actual-tooltip-color-on-hover-chrome-linux.png b/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/should-render-actual-tooltip-color-on-hover-chrome-linux.png
index 9c53c20ad6..d29b54796e 100644
Binary files a/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/should-render-actual-tooltip-color-on-hover-chrome-linux.png and b/e2e/screenshots/goal_stories.test.ts-snapshots/goal-stories/should-render-actual-tooltip-color-on-hover-chrome-linux.png differ
diff --git a/e2e/screenshots/grid_stories.test.ts-snapshots/grid-stories/should-render-crosshair-lines-above-grid-lines-chrome-linux.png b/e2e/screenshots/grid_stories.test.ts-snapshots/grid-stories/should-render-crosshair-lines-above-grid-lines-chrome-linux.png
index 18b7b79e4d..e3f5e620f6 100644
Binary files a/e2e/screenshots/grid_stories.test.ts-snapshots/grid-stories/should-render-crosshair-lines-above-grid-lines-chrome-linux.png and b/e2e/screenshots/grid_stories.test.ts-snapshots/grid-stories/should-render-crosshair-lines-above-grid-lines-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-90-degree-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-90-degree-chrome-linux.png
index 45b625da3d..3d19d01f77 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-90-degree-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-90-degree-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-chrome-linux.png
index 1e9eaa2ead..6cd6dff8ca 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-rectangular-brush-selection-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-90-degree-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-90-degree-chrome-linux.png
index 2263ab29e4..6ddfb8d36f 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-90-degree-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-90-degree-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-chrome-linux.png
index 8d578cedaa..cf4a936bfb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-x-brush-selection-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-90-degree-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-90-degree-chrome-linux.png
index a9b9c9c807..b9871fb300 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-90-degree-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-90-degree-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-chrome-linux.png
index e632e3ecde..b2d7f19eca 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/brushing/show-y-brush-selection-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/hide-null-bars-in-tooltip-in-percentage-mode-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/hide-null-bars-in-tooltip-in-percentage-mode-chrome-linux.png
index 64ac4726cf..aed49a89f8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/hide-null-bars-in-tooltip-in-percentage-mode-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/hide-null-bars-in-tooltip-in-percentage-mode-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-dark-theme-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-dark-theme-chrome-linux.png
index 2733e473c1..f1186140d4 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-dark-theme-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-light-theme-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-light-theme-chrome-linux.png
index 56ff9b0c18..dabb63db7d 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-light-theme-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-band-when-background-is-set-with-eui-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-dark-theme-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-dark-theme-chrome-linux.png
index 7dbe71336f..b154e97172 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-dark-theme-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-light-theme-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-light-theme-chrome-linux.png
index fa6d3a6a96..2aab3ba6ed 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-light-theme-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/mouse-cursor/should-show-cursor-when-background-is-set-with-eui-light-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png
index 3d9191e148..2e1be9d1ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/hide-tooltip-if-configured-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png
index de99da9fab..18c981c55a 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-areas-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png
index 9c7ea32c23..4abc560e11 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-show-null-values-in-tooltip-if-configured/show-n-a-tooltip-for-bars-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png
index d490416528..998441b89d 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/should-size-legends-with-ordinal-x-axis-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png
index 358395cba3..ca7d331bf3 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-all-custom-tick-formatters-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png
index 4bda95bca7..625b9a26b8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-axis-tick-formatter-with-no-header-formatter-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-custom-mark-formatters-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-custom-mark-formatters-chrome-linux.png
index 4300cd249a..ff2f1f64cb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-custom-mark-formatters-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-custom-mark-formatters-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png
index e1a6c1b13f..793e77529f 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-header-formatter-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png
index e2d2adf383..31112c9d71 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-default-tick-formatter-with-no-axis-tick-formatter-nor-series-tick-formatter-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png
index 358395cba3..ca7d331bf3 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-header-formatter-for-x-axis-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png
index d801870053..657b6aa074 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png
index 38d76010d3..69265f85c4 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-formatting/should-use-series-tick-formatter-with-no-axis-tick-formatter-missing-series-tick-formatter-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png
index 34f0f11a7b..b6a4ef50d3 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-crosshairs-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png
index 91c5698dec..e7c45c4e44 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-extra-values-in-legend-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png
index 78dfc72a80..7dcc090176 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltip-sync/show-synced-tooltips-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-bottom-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-bottom-chrome-linux.png
index a439b7bfb8..4e4ecb143f 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-bottom-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-bottom-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-top-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-top-chrome-linux.png
index 6fb49c63ca..cca1920a99 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-top-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/boundary-chart/should-contain-tooltip-inside-boundary-near-top-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png
index 129f14dc5d..458ec41c44 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-top-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-top-chrome-linux.png
index 7c45ccaa4d..286af38f22 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-top-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-first-bar-group-top-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png
index 129f14dc5d..458ec41c44 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-top-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-top-chrome-linux.png
index f7b846d8f0..ce0191f84f 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-top-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-0/shows-tooltip-on-last-bar-group-top-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png
index 62b5c9b59b..09ed1e0033 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-bottom-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-top-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-top-chrome-linux.png
index 910d8f3304..f325a614c5 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-top-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-first-bar-group-top-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png
index af74df72f5..9e86314f48 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-bottom-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-top-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-top-chrome-linux.png
index 910d8f3304..f325a614c5 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-top-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/hover-over-specific-bars/rotation-90/shows-tooltip-on-last-bar-group-top-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 12a62b6d96..2f27170462 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 5fc4a734ee..30423235d7 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 7f64352a77..fe89f2d5dd 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 52babf141e..3103bf9687 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-chart/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 139b620e92..74d1338c2e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b6675fc8d3..4073b8f656 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 4114dc6743..724543f1a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index f9f4a6d5b9..05694e3f4a 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index a670765c72..1318eab80e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 336d4db037..815ac57e1d 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 91d496d2e5..3edfe7053b 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 4fe40394d9..7f643b8222 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-0/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 139b620e92..74d1338c2e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b6675fc8d3..4073b8f656 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 4114dc6743..724543f1a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index f9f4a6d5b9..05694e3f4a 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index a670765c72..1318eab80e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 336d4db037..815ac57e1d 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 91d496d2e5..3edfe7053b 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 4fe40394d9..7f643b8222 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-180/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 139b620e92..74d1338c2e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b6675fc8d3..4073b8f656 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 4114dc6743..724543f1a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index f9f4a6d5b9..05694e3f4a 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index a670765c72..1318eab80e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 336d4db037..815ac57e1d 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 91d496d2e5..3edfe7053b 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 4fe40394d9..7f643b8222 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png
index dff6758d89..c355001061 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png
index ba702514cf..fc55c0999e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-bottom/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 139b620e92..74d1338c2e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b6675fc8d3..4073b8f656 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png
index 4114dc6743..724543f1a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png
index f9f4a6d5b9..05694e3f4a 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-left/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index f3454dab1d..6bc55461a8 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index b79e0c66af..dff29a66ea 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png
index a670765c72..1318eab80e 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png
index 336d4db037..815ac57e1d 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-right/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png
index 2927e0e641..f32e8ab9fb 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png
index 86535f7469..c6bb8b45ad 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-bottom-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png
index 91d496d2e5..3edfe7053b 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-left-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png
index 4fe40394d9..7f643b8222 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/positioning/boundary-el-default/rotation-negative-90/placement-top/shows-tooltip-in-top-right-corner-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png
index b40e817b2e..cfa1c6a370 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-for-split-and-y-accessors-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-in-dark-theme-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-in-dark-theme-chrome-linux.png
index b99e470de8..737dc56d63 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-in-dark-theme-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-current-tooltip-in-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-custom-tooltip-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-custom-tooltip-chrome-linux.png
index 5ea857bde9..676480945d 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-custom-tooltip-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-render-custom-tooltip-chrome-linux.png differ
diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png
index eb570a6752..355e6a50b1 100644
Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png differ
diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png
index b23aae7182..27e3c66ae0 100644
Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png differ
diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-bottom-legend-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-bottom-legend-chrome-linux.png
index 6e2f40b266..f8e1bd42cb 100644
Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-bottom-legend-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-bottom-legend-chrome-linux.png differ
diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-left-legend-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-left-legend-chrome-linux.png
index 71c74d2dff..d45563244d 100644
Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-left-legend-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-left-legend-chrome-linux.png differ
diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-right-legend-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-right-legend-chrome-linux.png
index cfede315f1..e689cb1282 100644
Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-right-legend-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-right-legend-chrome-linux.png differ
diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-top-legend-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-top-legend-chrome-linux.png
index 958b0abff7..e1be31d77a 100644
Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-top-legend-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-top-legend-chrome-linux.png differ
diff --git a/e2e/screenshots/line_stories.test.ts-snapshots/line-series-stories/line-with-mark-accessor/with-hidden-points-default-point-highlighter-size-chrome-linux.png b/e2e/screenshots/line_stories.test.ts-snapshots/line-series-stories/line-with-mark-accessor/with-hidden-points-default-point-highlighter-size-chrome-linux.png
index ed937ce462..059a584578 100644
Binary files a/e2e/screenshots/line_stories.test.ts-snapshots/line-series-stories/line-with-mark-accessor/with-hidden-points-default-point-highlighter-size-chrome-linux.png and b/e2e/screenshots/line_stories.test.ts-snapshots/line-series-stories/line-with-mark-accessor/with-hidden-points-default-point-highlighter-size-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index a6e566c8b2..e4e8cf5825 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 40d8ff0eb1..843161e103 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 1773c3ba6a..5a073a1a06 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 5be49e696b..b08ec21a90 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 1773c3ba6a..5a073a1a06 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 5be49e696b..b08ec21a90 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-percentage/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 5347095f23..0cc3b8ad05 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index a32e57c95f..db01227ce9 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 34e4a63171..5a11f59412 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 5ea49ad429..bbfcf2e968 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index d8a463162c..bb9ece5b1d 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index a130da6905..8ed309bb0d 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-silhouette/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 979cc31ff6..73c28f5c75 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 677c0e1c85..29541694ac 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-mixed/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 6653cca207..eaae53e480 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index c80efb9191..6da21e68f0 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-negative/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index e8e4d3f947..ca50eb76c1 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/area-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png
index 0c007efb6b..d52b941ed9 100644
Binary files a/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png and b/e2e/screenshots/mixed_stories.test.ts-snapshots/mixed-series-stories/stack-mode-wiggle/polarity-positive/bar-series/should-show-area-chart-with-toggled-series-and-mouse-over-chrome-linux.png differ
diff --git a/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-america-new-york/use-default-local-timezone-america-new-york-chrome-linux.png b/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-america-new-york/use-default-local-timezone-america-new-york-chrome-linux.png
index b8c4df6ebd..8ced380582 100644
Binary files a/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-america-new-york/use-default-local-timezone-america-new-york-chrome-linux.png and b/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-america-new-york/use-default-local-timezone-america-new-york-chrome-linux.png differ
diff --git a/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-europe-rome/use-default-local-timezone-europe-rome-chrome-linux.png b/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-europe-rome/use-default-local-timezone-europe-rome-chrome-linux.png
index d7340caeaa..fe72ea4ee8 100644
Binary files a/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-europe-rome/use-default-local-timezone-europe-rome-chrome-linux.png and b/e2e/screenshots/timezone.test.ts-snapshots/time-zone/timezone-europe-rome/use-default-local-timezone-europe-rome-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/pinning-over-selection-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/pinning-over-selection-chrome-linux.png
new file mode 100644
index 0000000000..a1e88072c2
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/pinning-over-selection-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/pinning-without-selection-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/pinning-without-selection-chrome-linux.png
new file mode 100644
index 0000000000..d6411daea9
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/pinning-without-selection-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/selecting-series-on-pinned-tooltip-async-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/selecting-series-on-pinned-tooltip-async-chrome-linux.png
new file mode 100644
index 0000000000..334d8cd622
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/selecting-series-on-pinned-tooltip-async-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/selecting-series-on-pinned-tooltip-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/selecting-series-on-pinned-tooltip-chrome-linux.png
new file mode 100644
index 0000000000..1cbcc990b2
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/selecting-series-on-pinned-tooltip-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/show-loading-prompt-for-async-actions-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/show-loading-prompt-for-async-actions-chrome-linux.png
new file mode 100644
index 0000000000..ad7a2a5251
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/cartesian/show-loading-prompt-for-async-actions-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/flamegraph/pinning-with-selection-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/flamegraph/pinning-with-selection-chrome-linux.png
new file mode 100644
index 0000000000..4702a6de58
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/flamegraph/pinning-with-selection-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/heatmap/pinning-with-selection-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/heatmap/pinning-with-selection-chrome-linux.png
new file mode 100644
index 0000000000..bfce55deba
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/heatmap/pinning-with-selection-chrome-linux.png differ
diff --git a/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/partition/pinning-with-selection-chrome-linux.png b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/partition/pinning-with-selection-chrome-linux.png
new file mode 100644
index 0000000000..0d17fe9376
Binary files /dev/null and b/e2e/screenshots/tooltip.test.ts-snapshots/tooltip/chart-types/partition/pinning-with-selection-chrome-linux.png differ
diff --git a/e2e/tests/tooltip.test.ts b/e2e/tests/tooltip.test.ts
new file mode 100644
index 0000000000..75f34dbf5b
--- /dev/null
+++ b/e2e/tests/tooltip.test.ts
@@ -0,0 +1,105 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { test } from '@playwright/test';
+
+import { common } from '../page_objects/common';
+
+process.env.ENV_URL = 'http://localhost:9002/';
+
+test.describe('Tooltip', () => {
+  test.describe('Chart Types', () => {
+    test.describe('Cartesian', () => {
+      test('pinning without selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 240, bottom: 260 },
+          'right',
+        );
+      });
+
+      test('pinning over selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
+          { left: 220, bottom: 285 },
+          'right',
+        );
+      });
+
+      test('show loading prompt for async actions', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=1000',
+          { left: 220, bottom: 285 },
+          'right',
+        );
+      });
+
+      test('selecting series on pinned tooltip', async ({ page }) => {
+        await common.expectChartAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
+          {
+            action: async () => {
+              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
+              // table row not visible thus not clickable by playwright
+              const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
+              await items.nth(5).click();
+              await items.nth(0).click();
+              await items.nth(2).click();
+            },
+          },
+        );
+      });
+
+      test('selecting series on pinned tooltip async', async ({ page }) => {
+        const delay = 100;
+        await common.expectChartAtUrlToMatchScreenshot(page)(
+          `http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=${delay}`,
+          {
+            action: async () => {
+              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
+              // table row not visible thus not clickable by playwright
+              const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
+              await items.nth(2).click();
+            },
+            delay,
+          },
+        );
+      });
+    });
+
+    test.describe('Partition', () => {
+      test('pinning with selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--partition-charts&globals=background:white;theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 245, bottom: 185 },
+          'right',
+        );
+      });
+    });
+
+    test.describe('Heatmap', () => {
+      test('pinning with selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--heatmap-chart&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 300, bottom: 180 },
+          'right',
+        );
+      });
+    });
+
+    test.describe('Flamegraph', () => {
+      test('pinning with selection', async ({ page }) => {
+        await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+          'http://localhost:9001/?path=/story/components-tooltip--flamegraph&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
+          { left: 220, bottom: 220 },
+          'right',
+        );
+      });
+    });
+  });
+});
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index 4d76c387a7..616bda5937 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -229,7 +229,7 @@ export interface ArrayNode extends NodeDescriptor {
 }
 
 // @public
-export const Axis: FC<SFProps<AxisSpec, "chartType" | "specType", "position" | "groupId" | "hide" | "showOverlappingTicks" | "showOverlappingLabels" | "timeAxisLayerCount", "style" | "title" | "domain" | "integersOnly" | "ticks" | "tickFormat" | "gridLine" | "showGridLines" | "labelFormat" | "showDuplicatedTicks", "id">>;
+export const Axis: FC<SFProps<AxisSpec, "chartType" | "specType", "position" | "groupId" | "hide" | "showOverlappingTicks" | "showOverlappingLabels" | "timeAxisLayerCount", "style" | "title" | "domain" | "integersOnly" | "tickFormat" | "ticks" | "gridLine" | "showGridLines" | "labelFormat" | "showDuplicatedTicks", "id">>;
 
 // @public (undocumented)
 export type AxisId = string;
@@ -560,8 +560,9 @@ export interface ColorConfig {
 }
 
 // @public (undocumented)
-export type ColorStripCellProps = Omit<TooltipTableCellProps, 'children'> & {
+export type ColorStripCellProps = Omit<TooltipTableCellProps, 'children' | 'width'> & {
     color?: string;
+    displayOnly?: boolean;
 };
 
 // @public
@@ -648,12 +649,15 @@ export type CustomTooltip<D extends BaseDatum = Datum, SI extends SeriesIdentifi
 
 // @public
 export interface CustomTooltipProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> extends TooltipInfo<D, SI> {
-    // (undocumented)
     backgroundColor: string;
     // (undocumented)
     dir: 'ltr' | 'rtl';
     // (undocumented)
     headerFormatter?: TooltipValueFormatter<D, SI>;
+    pinned: boolean;
+    selected: TooltipValue<D, SI>[];
+    setSelection: (items: TooltipValue<D, SI>[]) => void;
+    toggleSelected: (item: TooltipValue<D, SI>) => void;
 }
 
 // @public (undocumented)
@@ -1262,7 +1266,7 @@ export type GroupId = string;
 export type GroupKeysOrKeyFn<T> = Array<keyof T> | GroupByKeyFn<T>;
 
 // @alpha
-export const Heatmap: <D extends BaseDatum = any>(props: SFProps<HeatmapSpec<D>, "chartType" | "specType", "data" | "timeZone" | "valueAccessor" | "valueFormatter" | "xAccessor" | "yAccessor" | "xSortPredicate" | "ySortPredicate" | "xScale" | "xAxisTitle" | "yAxisTitle" | "xAxisLabelFormatter" | "yAxisLabelFormatter" | "xAxisLabelName" | "yAxisLabelName", "name" | "onBrushEnd" | "highlightedData", "id" | "colorScale">) => null;
+export const Heatmap: <D extends BaseDatum = any>(props: SFProps<HeatmapSpec<D>, "chartType" | "specType", "data" | "timeZone" | "valueAccessor" | "xAccessor" | "yAccessor" | "valueFormatter" | "xScale" | "xSortPredicate" | "ySortPredicate" | "xAxisTitle" | "yAxisTitle" | "xAxisLabelFormatter" | "yAxisLabelFormatter" | "xAxisLabelName" | "yAxisLabelName", "name" | "onBrushEnd" | "highlightedData", "id" | "colorScale">) => null;
 
 // @alpha (undocumented)
 export interface HeatmapBandsColorScale {
@@ -1896,7 +1900,7 @@ export type PartialTheme = RecursivePartial<Theme>;
 // Warning: (ae-forgotten-export) The symbol "PartitionSpec" needs to be exported by the entry point index.d.ts
 //
 // @public
-export const Partition: <D extends BaseDatum = any>(props: SFProps<PartitionSpec<D>, "chartType" | "specType", "animation" | "layout" | "valueAccessor" | "valueFormatter" | "valueGetter" | "clockwiseSectors" | "specialFirstInnermostSector" | "drilldown" | "maxRowCount" | "fillOutside" | "radiusOutside" | "fillRectangleWidth" | "fillRectangleHeight" | "percentFormatter" | "topGroove" | "smallMultiples" | "layers", never, "data" | "id">) => null;
+export const Partition: <D extends BaseDatum = any>(props: SFProps<PartitionSpec<D>, "chartType" | "specType", "animation" | "layout" | "valueAccessor" | "smallMultiples" | "valueFormatter" | "valueGetter" | "clockwiseSectors" | "specialFirstInnermostSector" | "drilldown" | "maxRowCount" | "fillOutside" | "radiusOutside" | "fillRectangleWidth" | "fillRectangleHeight" | "percentFormatter" | "topGroove" | "layers", never, "data" | "id">) => null;
 
 // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
 //
@@ -2011,6 +2015,9 @@ export interface PerSideDistance {
     top: number;
 }
 
+// @public (undocumented)
+export type PinTooltipCallback = (pinned: boolean, resetPointer?: boolean) => any;
+
 // @public (undocumented)
 export type Pixels = number;
 
@@ -2417,13 +2424,16 @@ export const SeriesType: Readonly<{
 // @public
 export type SeriesType = $Values<typeof SeriesType>;
 
+// @public (undocumented)
+export type SetSelectedTooltipItemsCallback = (items: TooltipValue<any, SeriesIdentifier>[]) => any;
+
 // @public
 export const Settings: (props: SFProps<SettingsSpec, keyof (typeof settingsBuildProps)['overrides'], keyof (typeof settingsBuildProps)['defaults'], keyof (typeof settingsBuildProps)['optionals'], keyof (typeof settingsBuildProps)['requires']>) => null;
 
 // Warning: (ae-forgotten-export) The symbol "BuildProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "rotation" | "debug" | "externalPointerEvents" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "legendPosition" | "legendMaxDepth" | "legendSize" | "showLegend" | "showLegendExtra" | "baseTheme" | "rendering" | "animateData" | "resizeDebounce" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin", "ariaLabel" | "tooltip" | "ariaDescription" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaTableCaption" | "onElementOver" | "onElementClick" | "onElementOut" | "onRenderChange" | "theme" | "xDomain" | "flatLegend" | "legendAction" | "legendColorPicker" | "legendStrategy" | "onLegendItemClick" | "onLegendItemMinusClick" | "onLegendItemOut" | "onLegendItemOver" | "onLegendItemPlusClick" | "orderOrdinalBinsBy" | "debugState" | "onProjectionClick" | "pointBuffer" | "onBrushEnd" | "onPointerUpdate" | "onProjectionAreaChange" | "onAnnotationClick" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "noResults" | "legendSort", never>;
+export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "rotation" | "debug" | "legendPosition" | "legendMaxDepth" | "legendSize" | "showLegend" | "showLegendExtra" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "resizeDebounce" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary", "ariaLabel" | "tooltip" | "theme" | "onBrushEnd" | "flatLegend" | "legendAction" | "legendColorPicker" | "legendStrategy" | "onLegendItemClick" | "onLegendItemMinusClick" | "onLegendItemOut" | "onLegendItemOver" | "onLegendItemPlusClick" | "xDomain" | "orderOrdinalBinsBy" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "pointBuffer" | "onPointerUpdate" | "onRenderChange" | "onProjectionAreaChange" | "onAnnotationClick" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "noResults" | "ariaLabelledBy" | "ariaDescription" | "ariaDescribedBy" | "ariaTableCaption" | "legendSort", never>;
 
 // @public (undocumented)
 export type SettingsProps = ComponentProps<typeof Settings>;
@@ -2712,13 +2722,13 @@ export interface Theme {
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
-    // (undocumented)
     metric: MetricStyle;
     partition: PartitionStyle;
     // (undocumented)
     scales: ScalesConfig;
     // (undocumented)
     sharedStyle: SharedGeometryStateStyle;
+    tooltip: TooltipStyle;
 }
 
 // @public (undocumented)
@@ -2777,11 +2787,22 @@ export interface TimeslipSpec extends Spec {
 // @public
 export function toEntries<T extends Record<string, string>, S>(array: T[], accessor: keyof T, staticValue: S): Record<string, S>;
 
+// @public (undocumented)
+export type ToggleSelectedTooltipItemCallback = (item: TooltipValue<any, SeriesIdentifier>) => any;
+
 // @public
-export const Tooltip: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>(props: SFProps<TooltipSpec<D, SI>, "id" | "chartType" | "specType", "type" | "snap" | "showNullValues", "footer" | "header" | "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "headerFormatter" | "unit" | "customTooltip" | "stickTo", never>) => null;
+export const Tooltip: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>(props: SFProps<TooltipSpec<D, SI>, "id" | "chartType" | "specType", "type" | "actions" | "selectionPrompt" | "actionsLoading" | "noActionsLoaded" | "snap" | "showNullValues" | "actionPrompt" | "pinningPrompt" | "maxTooltipItems" | "maxVisibleTooltipItems", "footer" | "header" | "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "headerFormatter" | "unit" | "customTooltip" | "stickTo", never>) => null;
 
 // @public
-export const tooltipBuildProps: BuildProps<TooltipSpec<any, SeriesIdentifier>, "id" | "chartType" | "specType", "type" | "snap" | "showNullValues", "footer" | "header" | "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "headerFormatter" | "unit" | "customTooltip" | "stickTo", never>;
+export type TooltipAction<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = {
+    label: string | ((selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => ReactNode);
+    hide?: (selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => boolean;
+    disabled?: (selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => boolean | string;
+    onSelect: (selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => void;
+};
+
+// @public
+export const tooltipBuildProps: BuildProps<TooltipSpec<any, SeriesIdentifier>, "id" | "chartType" | "specType", "type" | "actions" | "selectionPrompt" | "actionsLoading" | "noActionsLoaded" | "snap" | "showNullValues" | "actionPrompt" | "pinningPrompt" | "maxTooltipItems" | "maxVisibleTooltipItems", "footer" | "header" | "offset" | "fallbackPlacements" | "placement" | "boundary" | "boundaryPadding" | "headerFormatter" | "unit" | "customTooltip" | "stickTo", never>;
 
 // @public
 export type TooltipCellStyle = Pick<CSSProperties, 'maxHeight' | 'textAlign' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
@@ -2829,10 +2850,22 @@ export type TooltipSettings = TooltipType | TooltipProps;
 
 // @public
 export interface TooltipSpec<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> extends Spec, TooltipPortalSettings<'chart'> {
+    actionPrompt: string;
+    actions: TooltipAction<D, SI>[] | ((selected: TooltipValue<D, SI>[]) => Promise<TooltipAction<D, SI>[]> | TooltipAction<D, SI>[]);
+    actionsLoading: string | ComponentType<{
+        selected: TooltipValue<D, SI>[];
+    }>;
     customTooltip?: CustomTooltip<D, SI>;
     footer?: string | ((items: TooltipValue<D, SI>[]) => ReactNode);
     header?: string | ((items: TooltipValue<D, SI>[]) => ReactNode);
     headerFormatter?: TooltipValueFormatter<D, SI>;
+    maxTooltipItems: number;
+    maxVisibleTooltipItems: number;
+    noActionsLoaded: string | ComponentType<{
+        selected: TooltipValue<D, SI>[];
+    }>;
+    pinningPrompt: string;
+    selectionPrompt: string;
     showNullValues: boolean;
     snap: boolean;
     stickTo?: TooltipStickTo;
@@ -2855,10 +2888,17 @@ export const TooltipStickTo: Readonly<{
 // @public (undocumented)
 export type TooltipStickTo = $Values<typeof TooltipStickTo>;
 
+// @public
+export interface TooltipStyle {
+    defaultDotColor: Color;
+    maxTableHeight: CSSProperties['maxHeight'];
+    maxWidth: NonNullable<CSSProperties['maxWidth']>;
+}
+
 // Warning: (ae-forgotten-export) The symbol "TooltipTableProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const TooltipTable: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ maxHeight, className, ...props }: TooltipTableProps<D, SI>) => JSX.Element;
+export const TooltipTable: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ className, ...props }: TooltipTableProps<D, SI>) => JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "TooltipTableBodyProps" needs to be exported by the entry point index.d.ts
 //
@@ -2866,17 +2906,19 @@ export const TooltipTable: <D extends BaseDatum = any, SI extends SeriesIdentifi
 export const TooltipTableBody: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ className, ...props }: TooltipTableBodyProps<D, SI>) => JSX.Element;
 
 // @public (undocumented)
-export const TooltipTableCell: ({ style, tagName, className, children }: TooltipTableCellProps) => JSX.Element;
+export const TooltipTableCell: ({ style, truncate, tagName, className, children, title: manualTitle, }: TooltipTableCellProps) => JSX.Element;
 
 // @public (undocumented)
 export type TooltipTableCellProps = PropsWithChildren_2<{
     tagName?: 'td' | 'th';
+    truncate?: boolean;
     className?: string;
+    title?: string;
     style?: TooltipCellStyle;
 }>;
 
 // @public
-export function TooltipTableColorCell({ color, className, ...cellProps }: ColorStripCellProps): JSX.Element | null;
+export function TooltipTableColorCell({ color, className, displayOnly, ...cellProps }: ColorStripCellProps): JSX.Element | null;
 
 // @alpha
 export type TooltipTableColumn<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = TooltipTableColumnCustom<D, SI> | TooltipTableColumnColor<D, SI> | TooltipTableColumnNumber<D, SI> | TooltipTableColumnText<D, SI>;
@@ -2889,6 +2931,8 @@ export type TooltipTableColumnBase<D extends BaseDatum = Datum, SI extends Serie
     footer?: string | ((items: TooltipValue<D, SI>[]) => string);
     hidden?: boolean | ((items: TooltipValue<D, SI>[]) => boolean);
     style?: TooltipCellStyle;
+    truncate?: boolean;
+    width?: CSSProperties['gridTemplateColumns'];
 };
 
 // @alpha
@@ -2925,17 +2969,17 @@ export interface TooltipTableColumnText<D extends BaseDatum = Datum, SI extends
 // Warning: (ae-forgotten-export) The symbol "TooltipTableFooterProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const TooltipTableFooter: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ maxHeight, className, ...props }: TooltipTableFooterProps<D, SI>) => JSX.Element | null;
+export const TooltipTableFooter: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ className, ...props }: TooltipTableFooterProps<D, SI>) => JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "TooltipTableHeaderProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const TooltipTableHeader: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ maxHeight, className, ...props }: TooltipTableHeaderProps<D, SI>) => JSX.Element | null;
+export const TooltipTableHeader: <D extends BaseDatum = any, SI extends SeriesIdentifier = SeriesIdentifier>({ className, ...props }: TooltipTableHeaderProps<D, SI>) => JSX.Element | null;
 
 // Warning: (ae-forgotten-export) The symbol "TooltipTableRowProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const TooltipTableRow: ({ maxHeight, isHighlighted, children, className }: TooltipTableRowProps) => JSX.Element;
+export const TooltipTableRow: ({ id, isHighlighted, isSelected, children, onSelect, className, }: TooltipTableRowProps) => JSX.Element;
 
 // @public
 export const TooltipType: Readonly<{
diff --git a/packages/charts/src/chart_types/flame_chart/flame_chart.tsx b/packages/charts/src/chart_types/flame_chart/flame_chart.tsx
index 9328a6d655..c4b7d965ed 100644
--- a/packages/charts/src/chart_types/flame_chart/flame_chart.tsx
+++ b/packages/charts/src/chart_types/flame_chart/flame_chart.tsx
@@ -6,16 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React, { createRef, CSSProperties, KeyboardEvent, MouseEvent, RefObject, WheelEventHandler } from 'react';
+import React, { createRef, CSSProperties, RefObject, WheelEventHandler } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
 import { ChartType } from '..';
-import { DEFAULT_CSS_CURSOR } from '../../common/constants';
+import { DEFAULT_CSS_CURSOR, SECONDARY_BUTTON } from '../../common/constants';
 import { bindFramebuffer, createTexture, NullTexture, readPixel, Texture } from '../../common/kingly';
 import { GL } from '../../common/webgl_constants';
 import { BasicTooltip } from '../../components/tooltip/tooltip';
-import { SettingsSpec, SpecType, TooltipType } from '../../specs';
+import { SettingsSpec, SpecType, TooltipType, TooltipValue } from '../../specs';
 import { onChartRendered } from '../../state/actions/chart';
 import { ON_POINTER_MOVE } from '../../state/actions/mouse';
 import { BackwardRef, GlobalChartState } from '../../state/chart_state';
@@ -145,6 +145,7 @@ interface StateProps {
   chartDimensions: Size;
   a11ySettings: ReturnType<typeof getA11ySettingsSelector>;
   tooltipRequired: boolean;
+  pinnableTooltip: boolean;
   onElementOver: NonNullable<SettingsSpec['onElementOver']>;
   onElementClick: NonNullable<SettingsSpec['onElementClick']>;
   onElementOut: NonNullable<SettingsSpec['onElementOut']>;
@@ -183,8 +184,17 @@ class FlameComponent extends React.Component<FlameProps> {
   private pointerX: number = NaN;
   private pointerY: number = NaN;
 
+  // mouse coordinates for pinned tooltip
+  private pinnedPointerX: number = NaN;
+  private pinnedPointerY: number = NaN;
+
+  // pinned tooltip state
+  private tooltipPinned: boolean = false;
+  private tooltipSelectedSeries: TooltipValue[] = [];
+
   // currently hovered over datum
   private hoverIndex: number = NaN;
+  private tooltipValues: TooltipValue[] = [];
 
   // drilldown animation
   private animationRafId: number = NaN;
@@ -255,6 +265,29 @@ class FlameComponent extends React.Component<FlameProps> {
       columns.position0 === columns.position1 && columns.size0 === columns.size1 ? -Infinity : Infinity; // if nothing to tween, then skip it
   }
 
+  private pinTooltip = (pinned: boolean): void => {
+    if (!pinned) {
+      this.unpinTooltip(true);
+      return;
+    }
+
+    this.tooltipPinned = true;
+    this.tooltipSelectedSeries = this.tooltipValues;
+    // this.setState({});
+  };
+
+  private toggleSelectedTooltipItem = (tooltipValue: TooltipValue): void => {
+    // selection is arbitrary for flame elements - just toggle single selection
+    if (!this.tooltipPinned) return;
+    this.tooltipSelectedSeries = this.tooltipSelectedSeries.length === 0 ? [tooltipValue] : [];
+    this.setState({});
+  };
+
+  private setSelectedTooltipItems = (tooltipValues: TooltipValue[]): void => {
+    this.tooltipSelectedSeries = tooltipValues;
+    this.setState({});
+  };
+
   private focusOnNavElement(element?: NavRect) {
     if (!element) {
       return;
@@ -357,8 +390,15 @@ class FlameComponent extends React.Component<FlameProps> {
     this.drawCanvas();
   };
 
-  componentDidUpdate = () => {
+  private chartDimensionsChanged({ height, width }: Size): boolean {
+    return this.props.chartDimensions.height !== height || this.props.chartDimensions.width !== width;
+  }
+
+  componentDidUpdate = ({ chartDimensions }: FlameProps) => {
     if (!this.ctx) this.tryCanvasContext();
+    if (this.tooltipPinned && this.chartDimensionsChanged(chartDimensions)) {
+      this.unpinTooltip();
+    }
     this.bindControls();
     this.ensureTextureAndDraw();
 
@@ -378,48 +418,83 @@ class FlameComponent extends React.Component<FlameProps> {
     const box = this.props.forwardStageRef.current.getBoundingClientRect();
     this.pointerX = e.clientX - box.left;
     this.pointerY = e.clientY - box.top;
+
+    if (!this.tooltipPinned) {
+      this.pinnedPointerX = this.pointerX;
+      this.pinnedPointerY = this.pointerY;
+    }
+  }
+
+  private unpinTooltip(redraw = false) {
+    this.pinnedPointerX = NaN;
+    this.pinnedPointerY = NaN;
+    this.tooltipPinned = false;
+    this.tooltipSelectedSeries = [];
+    this.updateHoverIndex();
+    if (redraw) {
+      this.smartDraw();
+    }
   }
 
   private getHoveredDatumIndex = () => {
     const pr = window.devicePixelRatio * this.pinchZoomScale;
-    return {
-      datumIndex: this.datumAtXY(pr * this.pointerX, pr * (this.props.chartDimensions.height - this.pointerY)),
-    };
+    const x = this.tooltipPinned ? this.pinnedPointerX : this.pointerX;
+    const y = this.tooltipPinned ? this.pinnedPointerY : this.pointerY;
+    return this.datumAtXY(pr * x, pr * (this.props.chartDimensions.height - y));
   };
 
   private getDragDistanceX = () => this.pointerX - this.startOfDragX;
   private getDragDistanceY = () => -(this.pointerY - this.startOfDragY);
   private isDragging = ({ buttons }: { buttons: number }) => buttons & LEFT_MOUSE_BUTTON;
 
-  private handleMouseHoverMove = (e: React.MouseEvent<HTMLCanvasElement, globalThis.MouseEvent>) => {
+  private handleMouseHoverMove = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
     if (!this.isDragging(e)) {
       e.stopPropagation();
       this.updatePointerLocation(e);
-      const hovered = this.getHoveredDatumIndex();
-      const prevHoverIndex = this.hoverIndex >= 0 ? this.hoverIndex : NaN;
-      if (hovered) {
-        this.hoverIndex = hovered.datumIndex;
-        if (!Object.is(this.hoverIndex, prevHoverIndex)) {
-          if (Number.isFinite(hovered.datumIndex)) {
-            this.props.onElementOver([{ vmIndex: hovered.datumIndex }]); // userland callback
-          } else {
-            this.hoverIndex = NaN;
-            this.props.onElementOut(); // userland callback
-          }
-        }
-        this.setState({}); // exact tooltip location needs an update
+      if (!this.tooltipPinned) {
+        this.updateHoverIndex();
       }
     }
   };
 
-  private handleMouseDragMove = (e: {
-    stopPropagation: () => void;
-    buttons: number;
-    clientX: number;
-    clientY: number;
-  }) => {
+  private updateHoverIndex() {
+    const hoveredDatumIndex = this.getHoveredDatumIndex();
+    const prevHoverIndex = this.hoverIndex >= 0 ? this.hoverIndex : NaN;
+    this.hoverIndex = hoveredDatumIndex;
+    if (!Object.is(this.hoverIndex, prevHoverIndex)) {
+      if (Number.isFinite(hoveredDatumIndex)) {
+        this.props.onElementOver([{ vmIndex: hoveredDatumIndex }]); // userland callback
+      } else {
+        this.hoverIndex = NaN;
+        this.props.onElementOut(); // userland callback
+      }
+    }
+
+    if (prevHoverIndex !== this.hoverIndex) {
+      const columns = this.props.columnarViewModel;
+      this.tooltipValues =
+        this.hoverIndex >= 0
+          ? [
+              {
+                label: columns.label[this.hoverIndex],
+                color: getColor(columns.color, this.hoverIndex),
+                isHighlighted: false,
+                isVisible: true,
+                seriesIdentifier: { specId: '', key: '' },
+                value: columns.value[this.hoverIndex],
+                formattedValue: `${specValueFormatter(columns.value[this.hoverIndex])}`,
+                valueAccessor: this.hoverIndex,
+              },
+            ]
+          : [];
+    }
+    this.setState({}); // exact tooltip location needs an update
+  }
+
+  private handleMouseDragMove = (e: MouseEvent) => {
     e.stopPropagation();
     this.updatePointerLocation(e);
+
     if (this.isDragging(e)) {
       const dragInMinimap = this.pointerInMinimap(this.startOfDragX, this.startOfDragY);
       const focusMoveDirection = dragInMinimap ? 1 : -1; // focus box moves in direction of drag: positive; opposite: negative
@@ -471,47 +546,91 @@ class FlameComponent extends React.Component<FlameProps> {
     this.startOfDragY = this.pointerY;
   };
 
-  private handleMouseDown = (e: MouseEvent<HTMLCanvasElement>) => {
+  private handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
     e.stopPropagation();
+    if (e.button === SECONDARY_BUTTON || e.ctrlKey) return; // context menu click
     if (Number.isNaN(this.pointerX + this.pointerY)) return; // don't reset from minimap
+    if (this.tooltipPinned) return; // prevent dragging while tooltip is pinned
+
     this.resetDrag();
+
     window.addEventListener('mousemove', this.handleMouseDragMove, { passive: true });
     window.addEventListener('mouseup', this.handleMouseUp, { passive: true });
   };
 
-  private handleMouseUp = (e: {
-    stopPropagation: () => void;
-    buttons: number;
-    clientX: number;
-    clientY: number;
-    detail: number;
-  }) => {
+  private handleContextMenu = (e: React.MouseEvent<HTMLCanvasElement>) => {
     e.stopPropagation();
+    e.preventDefault(); // prevent browser context menu
+
+    if (this.tooltipPinned) {
+      this.handleUnpinningTooltip();
+      return;
+    }
+    if (!Number.isFinite(this.getHoveredDatumIndex())) {
+      // NOP if not hover a node
+      return;
+    }
+    window.addEventListener('keyup', this.handleKeyUp);
+    window.addEventListener('click', this.handleUnpinningTooltip);
+    window.addEventListener('visibilitychange', this.handleUnpinningTooltip);
+    this.pinTooltip(true);
+    this.setState({}); // updates cursor
+  };
+
+  private handleMouseUp = (e: MouseEvent) => {
+    e.stopPropagation();
+
     window.removeEventListener('mousemove', this.handleMouseDragMove);
     window.removeEventListener('mouseup', this.handleMouseUp);
+
+    if (this.tooltipPinned) {
+      this.unpinTooltip();
+      this.clearDrag();
+      return;
+    }
+
     this.updatePointerLocation(e); // just in case: eg. the user tabbed away, moved mouse elsewhere, and came back
     const dragDistanceX = this.getDragDistanceX(); // zero or NaN means that a non-zero drag didn't happen
     const dragDistanceY = this.getDragDistanceY(); // zero or NaN means that a non-zero drag didn't happen
     if (!dragDistanceX && !dragDistanceY) {
-      const hovered = this.getHoveredDatumIndex();
+      const hoveredDatumIndex = this.getHoveredDatumIndex();
       const isDoubleClick = e.detail > 1;
-      const hasClickedOnRectangle = Number.isFinite(hovered?.datumIndex);
+      const hasClickedOnRectangle = Number.isFinite(hoveredDatumIndex);
       const mustFocus = SINGLE_CLICK_EMPTY_FOCUS || isDoubleClick !== hasClickedOnRectangle; // xor: either double-click on empty space, or single-click on a node
-      if (mustFocus && !this.pointerInMinimap(this.pointerX, this.pointerY)) {
-        const { datumIndex } = hovered;
-        const rect = focusRect(this.props.columnarViewModel, this.props.chartDimensions.height, datumIndex);
-        this.navigator.add({ ...rect, index: datumIndex });
-        this.focusOnNode(datumIndex);
-        this.props.onElementClick([{ vmIndex: datumIndex }]); // userland callback
+      const isContextClick = e.button === SECONDARY_BUTTON || e.ctrlKey;
+
+      if (mustFocus && !isContextClick && !this.pointerInMinimap(this.pointerX, this.pointerY)) {
+        const rect = focusRect(this.props.columnarViewModel, this.props.chartDimensions.height, hoveredDatumIndex);
+        this.navigator.add({ ...rect, index: hoveredDatumIndex });
+        this.focusOnNode(hoveredDatumIndex);
+        this.props.onElementClick([{ vmIndex: hoveredDatumIndex }]); // userland callback
       }
     }
     this.clearDrag();
     this.setState({});
   };
 
-  private handleMouseLeave = (e: MouseEvent<HTMLCanvasElement>) => {
+  private handleUnpinningTooltip = () => {
+    window.removeEventListener('keyup', this.handleKeyUp);
+    window.removeEventListener('click', this.handleUnpinningTooltip);
+    window.removeEventListener('visibilitychange', this.handleUnpinningTooltip);
+    this.pinTooltip(false);
+  };
+
+  static watchedKeys: KeyboardEvent['key'][] = ['Escape'];
+  private handleKeyUp = ({ key }: KeyboardEvent) => {
+    if (!FlameComponent.watchedKeys.includes(key)) return;
+
+    window.removeEventListener('keyup', this.handleKeyUp);
+
+    this.unpinTooltip();
+  };
+
+  private handleMouseLeave = (e: React.MouseEvent<HTMLCanvasElement>) => {
     e.stopPropagation();
-    this.smartDraw();
+    if (!this.tooltipPinned) {
+      this.smartDraw();
+    }
   };
 
   private preventScroll = (e: WheelEvent) => e.metaKey === IS_META_REQUIRED_FOR_ZOOM && e.preventDefault();
@@ -519,7 +638,9 @@ class FlameComponent extends React.Component<FlameProps> {
   private handleWheel: WheelEventHandler = (e) => {
     if (e.metaKey !== IS_META_REQUIRED_FOR_ZOOM) return; // one way: zoom; other way: let scroll happen
 
+    this.unpinTooltip();
     this.updatePointerLocation(e);
+
     const { x0, x1, y0, y1 } = this.currentFocus;
     const wheelDelta = -e.deltaY; // mapbox convention: scroll down increases magnification
     const delta = wheelDelta * ZOOM_SPEED;
@@ -628,7 +749,7 @@ class FlameComponent extends React.Component<FlameProps> {
     this.setState({});
   };
 
-  private handleEnterKey = (e: KeyboardEvent) => {
+  private handleEnterKey = (e: React.KeyboardEvent<HTMLCanvasElement | HTMLInputElement>) => {
     e.stopPropagation();
     if (e.key === 'Enter') {
       if (e.shiftKey) {
@@ -647,14 +768,13 @@ class FlameComponent extends React.Component<FlameProps> {
     this.searchForText(false);
   };
 
-  private handleEscapeKey = (e: KeyboardEvent) => {
-    e.stopPropagation();
+  private handleEscapeKey = (e: React.KeyboardEvent<HTMLCanvasElement | HTMLInputElement>) => {
     if (e.key === 'Escape') {
       this.clearSearchText();
     }
   };
 
-  private handleSearchFieldKeyPress = (e: KeyboardEvent) => {
+  private handleSearchFieldKeyPress = (e: React.KeyboardEvent<HTMLCanvasElement | HTMLInputElement>) => {
     e.stopPropagation();
     if (!this.handleEnterKey(e)) {
       this.searchForText(false);
@@ -717,6 +837,13 @@ class FlameComponent extends React.Component<FlameProps> {
     this.setState({});
   };
 
+  private getActiveCursor(): CSSProperties['cursor'] {
+    if (this.tooltipPinned) return DEFAULT_CSS_CURSOR;
+    if (this.startOfDragX) return 'grabbing';
+    if (this.hoverIndex >= 0) return 'pointer';
+    return 'grab';
+  }
+
   render = () => {
     const {
       forwardStageRef,
@@ -736,12 +863,12 @@ class FlameComponent extends React.Component<FlameProps> {
       margin: 0,
       border: 0,
       position: 'absolute',
-      cursor: this.startOfDragX ? 'grab' : this.hoverIndex >= 0 ? 'pointer' : DEFAULT_CSS_CURSOR,
+      cursor: this.getActiveCursor(),
     };
+
     const dpr = window.devicePixelRatio * this.pinchZoomScale;
     const canvasWidth = width * dpr;
     const canvasHeight = height * dpr;
-    const columns = this.props.columnarViewModel;
     const hitCount = this.currentSearchHitCount;
 
     const {
@@ -772,6 +899,7 @@ class FlameComponent extends React.Component<FlameProps> {
             height={canvasHeight}
             onMouseMove={this.handleMouseHoverMove}
             onMouseDown={this.handleMouseDown}
+            onContextMenu={this.props.pinnableTooltip ? this.handleContextMenu : undefined}
             onMouseLeave={this.handleMouseLeave}
             onKeyPress={this.handleEnterKey}
             onKeyUp={this.handleEscapeKey}
@@ -989,26 +1117,24 @@ class FlameComponent extends React.Component<FlameProps> {
           </p>
         </div>
         <BasicTooltip
+          canPinTooltip
           onPointerMove={() => ({ type: ON_POINTER_MOVE, position: { x: NaN, y: NaN }, time: NaN })}
-          position={{ x: this.pointerX, y: this.pointerY, width: 0, height: 0 }}
-          visible={this.props.tooltipRequired && this.hoverIndex >= 0 && !(this.wobbleTimeLeft > 0)}
+          position={
+            this.tooltipPinned
+              ? { x: this.pinnedPointerX, y: this.pinnedPointerY, width: 0, height: 0 }
+              : { x: this.pointerX, y: this.pointerY, width: 0, height: 0 }
+          }
+          pinned={this.tooltipPinned}
+          selected={this.tooltipSelectedSeries}
+          pinTooltip={this.pinTooltip}
+          toggleSelectedTooltipItem={this.toggleSelectedTooltipItem}
+          setSelectedTooltipItems={this.setSelectedTooltipItems}
+          visible={
+            this.tooltipPinned || (this.props.tooltipRequired && this.hoverIndex >= 0 && !(this.wobbleTimeLeft > 0))
+          }
           info={{
             header: null,
-            values:
-              this.hoverIndex >= 0
-                ? [
-                    {
-                      label: columns.label[this.hoverIndex],
-                      color: getColor(columns.color, this.hoverIndex),
-                      isHighlighted: false,
-                      isVisible: true,
-                      seriesIdentifier: { specId: '', key: '' },
-                      value: columns.value[this.hoverIndex],
-                      formattedValue: `${specValueFormatter(columns.value[this.hoverIndex])}`,
-                      valueAccessor: this.hoverIndex,
-                    },
-                  ]
-                : [],
+            values: this.tooltipValues,
           }}
           getChartContainerRef={this.props.containerRef}
         />
@@ -1211,6 +1337,7 @@ class FlameComponent extends React.Component<FlameProps> {
 const mapStateToProps = (state: GlobalChartState): StateProps => {
   const flameSpec = getSpecsFromStore<FlameSpec>(state.specs, ChartType.Flame, SpecType.Series)[0];
   const settingsSpec = getSettingsSpecSelector(state);
+  const tooltipSpec = getTooltipSpecSelector(state);
   return {
     theme: getChartThemeSelector(state).flamegraph,
     debugHistory: settingsSpec.debug,
@@ -1219,7 +1346,8 @@ const mapStateToProps = (state: GlobalChartState): StateProps => {
     animationDuration: flameSpec?.animation.duration ?? 0,
     chartDimensions: state.parentDimensions,
     a11ySettings: getA11ySettingsSelector(state),
-    tooltipRequired: getTooltipSpecSelector(state).type !== TooltipType.None,
+    tooltipRequired: tooltipSpec.type !== TooltipType.None,
+    pinnableTooltip: tooltipSpec.actions.length > 0,
 
     // mandatory charts API protocol; todo extract these mappings once there are other charts like Flame
     onElementOver: settingsSpec.onElementOver ?? (() => {}),
diff --git a/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts b/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts
index a7aedd2161..d6708ff7f9 100644
--- a/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts
+++ b/packages/charts/src/chart_types/flame_chart/internal_chart_state.ts
@@ -31,7 +31,7 @@ export class FlameState implements InternalChartState {
   getLegendExtraValues = () => new Map<SeriesKey, LegendItemExtraValues>();
   getPointerCursor = () => DEFAULT_CSS_CURSOR;
   getTooltipAnchor = () => ({ x: 0, y: 0, width: 0, height: 0 });
-  isTooltipVisible = () => ({ visible: false, isExternal: false });
+  isTooltipVisible = () => ({ visible: false, isExternal: false, displayOnly: false, isPinnable: false });
   getTooltipInfo = () => ({ header: null, values: [] });
   getProjectionContainerArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
   getMainProjectionArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
diff --git a/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx b/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx
index 9a3dc94623..7b95ed91df 100644
--- a/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx
+++ b/packages/charts/src/chart_types/goal_chart/state/chart_state.tsx
@@ -12,7 +12,8 @@ import { ChartType } from '../..';
 import { DEFAULT_CSS_CURSOR } from '../../../common/constants';
 import { LegendItem } from '../../../common/legend';
 import { Tooltip } from '../../../components/tooltip/tooltip';
-import { InternalChartState, GlobalChartState, BackwardRef } from '../../../state/chart_state';
+import { InternalChartState, GlobalChartState, BackwardRef, TooltipVisibility } from '../../../state/chart_state';
+import { getActivePointerPosition } from '../../../state/selectors/get_active_pointer_position';
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';
 import { LegendItemLabel } from '../../../state/selectors/get_legend_items_labels';
 import { DebugState } from '../../../state/types';
@@ -87,8 +88,13 @@ export class GoalState implements InternalChartState {
     return DEFAULT_CSS_CURSOR;
   }
 
-  isTooltipVisible(globalState: GlobalChartState) {
-    return { visible: isTooltipVisibleSelector(globalState), isExternal: false };
+  isTooltipVisible(globalState: GlobalChartState): TooltipVisibility {
+    return {
+      visible: isTooltipVisibleSelector(globalState),
+      isExternal: false,
+      displayOnly: false,
+      isPinnable: false,
+    };
   }
 
   getTooltipInfo(globalState: GlobalChartState) {
@@ -96,7 +102,7 @@ export class GoalState implements InternalChartState {
   }
 
   getTooltipAnchor(state: GlobalChartState) {
-    const { position } = state.interactions.pointer.current;
+    const position = getActivePointerPosition(state);
     return {
       isRotated: false,
       x: position.x,
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts
index 2b4e52e01e..9dda9a7c18 100644
--- a/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts
+++ b/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts
@@ -8,16 +8,12 @@
 
 import { Rectangle } from '../../../../common/geometry';
 import { LayerValue } from '../../../../specs';
-import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { BulletViewModel } from '../../layout/types/viewmodel_types';
 import { initialBoundingBox, Mark } from '../../layout/viewmodel/geoms';
+import { getActivePointerPosition } from './../../../../state/selectors/get_active_pointer_position';
 import { geometries, getPrimitiveGeoms } from './geometries';
 
-function getCurrentPointerPosition(state: GlobalChartState) {
-  return state.interactions.pointer.current.position;
-}
-
 function fullBoundingBox(ctx: CanvasRenderingContext2D | null, geoms: Mark[]) {
   const box = initialBoundingBox();
   if (ctx) {
@@ -42,7 +38,7 @@ export const getCaptureBoundingBox = createCustomCachedSelector([getPrimitiveGeo
 
 /** @internal */
 export const getPickedShapes = createCustomCachedSelector(
-  [geometries, getCurrentPointerPosition, getCaptureBoundingBox],
+  [geometries, getActivePointerPosition, getCaptureBoundingBox],
   (geoms, pointerPosition, capture): BulletViewModel[] => {
     const picker = geoms.pickQuads;
     const { chartCenter } = geoms;
diff --git a/packages/charts/src/chart_types/heatmap/state/chart_state.tsx b/packages/charts/src/chart_types/heatmap/state/chart_state.tsx
index 4056c80412..3fb300900e 100644
--- a/packages/charts/src/chart_types/heatmap/state/chart_state.tsx
+++ b/packages/charts/src/chart_types/heatmap/state/chart_state.tsx
@@ -98,7 +98,7 @@ export class HeatmapState implements InternalChartState {
   }
 
   isTooltipVisible(globalState: GlobalChartState) {
-    return { visible: isTooltipVisibleSelector(globalState), isExternal: false };
+    return isTooltipVisibleSelector(globalState);
   }
 
   getTooltipInfo(globalState: GlobalChartState) {
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_brush_area.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_brush_area.ts
index 2e484f18c0..e30c5cbf84 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/get_brush_area.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_brush_area.ts
@@ -9,6 +9,7 @@
 import { BrushAxis } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getActivePointerPosition } from '../../../../state/selectors/get_active_pointer_position';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
 import { clamp } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
@@ -17,14 +18,13 @@ import { getBrushedHighlightedShapesSelector } from './get_brushed_highlighted_s
 
 const getMouseDownPosition = (state: GlobalChartState) => state.interactions.pointer.down;
 const getIsDragging = (state: GlobalChartState) => state.interactions.pointer.dragging;
-const getCurrentPointerPosition = (state: GlobalChartState) => state.interactions.pointer.current.position;
 
 /** @internal */
 export const getBrushAreaSelector = createCustomCachedSelector(
   [
     getIsDragging,
     getMouseDownPosition,
-    getCurrentPointerPosition,
+    getActivePointerPosition,
     getSettingsSpecSelector,
     computeChartElementSizesSelector,
     getBrushedHighlightedShapesSelector,
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.ts
index 8b58e01aa4..66e9a11950 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.ts
@@ -9,6 +9,7 @@
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { DragShape } from '../../layout/types/viewmodel_types';
+import { getActivePointerPosition } from './../../../../state/selectors/get_active_pointer_position';
 import { getHeatmapGeometries } from './geometries';
 
 function getCurrentPointerStates(state: GlobalChartState) {
@@ -17,12 +18,12 @@ function getCurrentPointerStates(state: GlobalChartState) {
 
 /** @internal */
 export const getBrushedHighlightedShapesSelector = createCustomCachedSelector(
-  [getHeatmapGeometries, getCurrentPointerStates],
-  (geoms, pointerStates): DragShape => {
+  [getHeatmapGeometries, getCurrentPointerStates, getActivePointerPosition],
+  (geoms, pointerStates, activePosition): DragShape => {
     if (!pointerStates.dragging || !pointerStates.down) {
       return null;
     }
 
-    return geoms.pickDragShape([pointerStates.down.position, pointerStates.current.position]);
+    return geoms.pickDragShape([pointerStates.down.position, activePosition]);
   },
 );
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_band.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_band.ts
index 7b8ce11a66..959d0e85a5 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_band.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_band.ts
@@ -8,27 +8,26 @@
 
 import { Rect } from '../../../../geoms/types';
 import { isPointerOverEvent, PointerEvent } from '../../../../specs';
-import { GlobalChartState, PointerState } from '../../../../state/chart_state';
+import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
-import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { getActivePointerPosition } from '../../../../state/selectors/get_active_pointer_position';
 import { isNil } from '../../../../utils/common';
+import { Point } from '../../../../utils/point';
 import { ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { getHeatmapGeometries } from './geometries';
 
 const getExternalPointerEventStateSelector = (state: GlobalChartState) => state.externalEvents.pointer;
 
-const getPointerEventStateSelector = (state: GlobalChartState) => state.interactions.pointer.current;
-
 /** @internal */
 export const getCursorBandPositionSelector = createCustomCachedSelector(
-  [getHeatmapGeometries, getExternalPointerEventStateSelector, getPointerEventStateSelector, getSettingsSpecSelector],
+  [getHeatmapGeometries, getExternalPointerEventStateSelector, getActivePointerPosition],
   getCursorBand,
 );
 
 function getCursorBand(
   geoms: ShapeViewModel,
   externalPointerEvent: PointerEvent | null,
-  currentPointer: PointerState,
+  currentPointerPosition: Point,
 ): (Rect & { fromExternalEvent: boolean }) | undefined {
   // external pointer events takes precedence over the current mouse pointer
   if (isPointerOverEvent(externalPointerEvent)) {
@@ -44,8 +43,8 @@ function getCursorBand(
     }
   }
   // display the current hovered cell
-  if (currentPointer.position.x > -1) {
-    const point = currentPointer.position;
+  if (currentPointerPosition.x > -1) {
+    const point = currentPointerPosition;
     const end = { x: point.x + Number.EPSILON, y: point.y + Number.EPSILON };
     const band = geoms.pickDragShape([point, end]);
     if (band) {
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts
index 7ae0b1920a..b9c1dcba6d 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts
@@ -6,15 +6,21 @@
  * Side Public License, v 1.
  */
 
+import { CSSProperties } from 'react';
+
 import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getTooltipInteractionState } from '../../../../state/selectors/get_tooltip_interaction_state';
 import { isBrushingSelector } from './is_brushing';
 import { getPickedShapes } from './picked_shapes';
 
 /** @internal */
 export const getPointerCursorSelector = createCustomCachedSelector(
-  [getPickedShapes, isBrushingSelector],
-  (pickedShapes, isBrushing) => {
-    return isBrushing || (Array.isArray(pickedShapes) && pickedShapes.length > 0) ? 'pointer' : DEFAULT_CSS_CURSOR;
+  [getPickedShapes, isBrushingSelector, getTooltipInteractionState],
+  (pickedShapes, isBrushing, tooltipState): CSSProperties['cursor'] => {
+    if (tooltipState.pinned) return;
+    return isBrushing || (Array.isArray(pickedShapes) && pickedShapes.some(({ visible }) => visible))
+      ? 'pointer'
+      : DEFAULT_CSS_CURSOR;
   },
 );
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts
index 122b989894..99b399e703 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_tooltip_anchor.ts
@@ -7,18 +7,14 @@
  */
 
 import { AnchorPosition } from '../../../../components/portal/types';
-import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getActivePointerPosition } from '../../../../state/selectors/get_active_pointer_position';
 import { computeChartElementSizesSelector } from './compute_chart_dimensions';
 import { getPickedShapes } from './picked_shapes';
 
-function getCurrentPointerPosition(state: GlobalChartState) {
-  return state.interactions.pointer.current.position;
-}
-
 /** @internal */
 export const getTooltipAnchorSelector = createCustomCachedSelector(
-  [getPickedShapes, computeChartElementSizesSelector, getCurrentPointerPosition],
+  [getPickedShapes, computeChartElementSizesSelector, getActivePointerPosition],
   (shapes, { grid }, position): AnchorPosition => {
     if (Array.isArray(shapes) && shapes.length > 0) {
       const firstShape = shapes[0];
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/is_tooltip_visible.ts b/packages/charts/src/chart_types/heatmap/state/selectors/is_tooltip_visible.ts
index ba48181922..87f9e0d214 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/is_tooltip_visible.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/is_tooltip_visible.ts
@@ -7,15 +7,30 @@
  */
 
 import { TooltipType } from '../../../../specs/constants';
+import { TooltipVisibility } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getTooltipInteractionState } from '../../../../state/selectors/get_tooltip_interaction_state';
 import { getTooltipSpecSelector } from '../../../../state/selectors/get_tooltip_spec';
 import { getTooltipInfoSelector } from './tooltip';
 
 /** @internal */
 export const isTooltipVisibleSelector = createCustomCachedSelector(
-  [getTooltipSpecSelector, getTooltipInfoSelector],
-  ({ type }, tooltipInfo): boolean => {
-    if (type === TooltipType.None) return false;
-    return tooltipInfo.values.length > 0;
+  [getTooltipSpecSelector, getTooltipInfoSelector, getTooltipInteractionState],
+  ({ type }, tooltipInfo, { pinned }): TooltipVisibility => {
+    if (type === TooltipType.None) {
+      return {
+        visible: false,
+        isExternal: false,
+        displayOnly: false,
+        isPinnable: false,
+      };
+    }
+
+    return {
+      visible: tooltipInfo.values.length > 0 || pinned,
+      displayOnly: tooltipInfo.values.every(({ displayOnly }) => displayOnly),
+      isExternal: false,
+      isPinnable: tooltipInfo.values.length > 0,
+    };
   },
 );
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/on_pointer_update_caller.ts b/packages/charts/src/chart_types/heatmap/state/selectors/on_pointer_update_caller.ts
index 070c313df3..c8938cab38 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/on_pointer_update_caller.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/on_pointer_update_caller.ts
@@ -18,11 +18,12 @@ import {
 } from '../../../../specs';
 import { GlobalChartState, PointerState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getActivePointerPosition } from '../../../../state/selectors/get_active_pointer_position';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getLastClickSelector } from '../../../../state/selectors/get_last_click';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
 import { getSpecOrNull } from './heatmap_spec';
-import { getCurrentPointerPosition, getPickedGridCell } from './picked_shapes';
+import { getPickedGridCell } from './picked_shapes';
 
 function isSameEventValue(a: PointerOverEvent, b: PointerOverEvent, changeTrigger: PointerUpdateTrigger) {
   const checkX = changeTrigger === PointerUpdateTrigger.X || changeTrigger === PointerUpdateTrigger.Both;
@@ -57,7 +58,7 @@ export function createOnPointerUpdateCaller(): (state: GlobalChartState) => void
           getSpecOrNull,
           getLastClickSelector,
           getSettingsSpecSelector,
-          getCurrentPointerPosition,
+          getActivePointerPosition,
           getPickedGridCell,
           getChartIdSelector,
         ],
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts
index 1947387f55..91ae3da11e 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts
@@ -6,20 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getActivePointerPosition } from '../../../../state/selectors/get_active_pointer_position';
 import { Cell, GridCell, TextBox } from '../../layout/types/viewmodel_types';
 import { computeChartElementSizesSelector } from './compute_chart_dimensions';
 import { getHeatmapGeometries } from './geometries';
 
-/** @internal */
-export function getCurrentPointerPosition(state: GlobalChartState) {
-  return state.interactions.pointer.current.position;
-}
-
 /** @internal */
 export const getPickedShapes = createCustomCachedSelector(
-  [getHeatmapGeometries, getCurrentPointerPosition, computeChartElementSizesSelector],
+  [getHeatmapGeometries, getActivePointerPosition, computeChartElementSizesSelector],
   (geoms, pointerPosition, dims): Cell[] | TextBox => {
     const picker = geoms.pickQuads;
     const { x, y } = pointerPosition;
@@ -32,7 +27,7 @@ export const getPickedShapes = createCustomCachedSelector(
 
 /** @internal */
 export const getPickedGridCell = createCustomCachedSelector(
-  [getHeatmapGeometries, getCurrentPointerPosition, computeChartElementSizesSelector],
+  [getHeatmapGeometries, getActivePointerPosition, computeChartElementSizesSelector],
   (geoms, pointerPosition): GridCell | undefined => {
     return geoms.pickGridCell(pointerPosition.x, pointerPosition.y);
   },
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts
index 3c33f70030..601b7c776f 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts
@@ -16,6 +16,7 @@ import { getPickedShapes } from './picked_shapes';
 const EMPTY_TOOLTIP = Object.freeze({
   header: null,
   values: [],
+  disableActions: false,
 });
 
 /** @internal */
@@ -29,6 +30,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
     const tooltipInfo: TooltipInfo = {
       header: null,
       values: [],
+      disableActions: false,
     };
 
     if (Array.isArray(pickedShapes)) {
@@ -78,6 +80,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
             value: `${shape.value}`,
             formattedValue: `${shape.formatted}`,
             datum: shape.datum,
+            displayOnly: true,
           });
         });
     } else {
@@ -93,7 +96,9 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
         value: `${pickedShapes.value}`,
         formattedValue: `${pickedShapes.value}`,
         datum: pickedShapes.value,
+        displayOnly: true,
       });
+      tooltipInfo.disableActions = true;
     }
 
     return tooltipInfo;
diff --git a/packages/charts/src/chart_types/metric/state/chart_state.tsx b/packages/charts/src/chart_types/metric/state/chart_state.tsx
index ca9db3ca33..ee23c7a63c 100644
--- a/packages/charts/src/chart_types/metric/state/chart_state.tsx
+++ b/packages/charts/src/chart_types/metric/state/chart_state.tsx
@@ -33,7 +33,13 @@ export class MetricState implements InternalChartState {
   getLegendItemsLabels = () => EMPTY_LEGEND_ITEM_LIST;
   getLegendExtraValues = () => EMPTY_MAP;
   getPointerCursor = () => DEFAULT_CSS_CURSOR;
-  isTooltipVisible = () => ({ visible: false, isExternal: false });
+  isTooltipVisible = () => ({
+    visible: false,
+    isExternal: false,
+    displayOnly: false,
+    isPinnable: false,
+  });
+
   getTooltipInfo = () => undefined;
   getTooltipAnchor = () => null;
   eventCallbacks = () => {};
diff --git a/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx b/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx
index 665b57f193..9ec6b4f072 100644
--- a/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx
+++ b/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx
@@ -10,6 +10,7 @@ import { RefObject } from 'react';
 
 import { ChartType } from '../..';
 import { BackwardRef, GlobalChartState, InternalChartState } from '../../../state/chart_state';
+import { getActivePointerPosition } from '../../../state/selectors/get_active_pointer_position';
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';
 import { DebugState } from '../../../state/types';
 import { Dimensions } from '../../../utils/dimensions';
@@ -86,6 +87,8 @@ export class PartitionState implements InternalChartState {
     return {
       visible: isTooltipVisibleSelector(globalState),
       isExternal: false,
+      displayOnly: false,
+      isPinnable: true,
     };
   }
 
@@ -94,7 +97,7 @@ export class PartitionState implements InternalChartState {
   }
 
   getTooltipAnchor(state: GlobalChartState) {
-    const { position } = state.interactions.pointer.current;
+    const position = getActivePointerPosition(state);
     return {
       isRotated: false,
       x: position.x,
diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts
index dfb99a3bbe..51fa0f9c2e 100644
--- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts
+++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts
@@ -9,12 +9,14 @@
 import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { getTooltipInteractionState } from '../../../../state/selectors/get_tooltip_interaction_state';
 import { getPickedShapes } from './picked_shapes';
 
 /** @internal */
 export const getPointerCursorSelector = createCustomCachedSelector(
-  [getPickedShapes, getSettingsSpecSelector],
-  (pickedShapes, { onElementClick, onElementOver }) => {
+  [getPickedShapes, getSettingsSpecSelector, getTooltipInteractionState],
+  (pickedShapes, { onElementClick, onElementOver }, tooltipState) => {
+    if (tooltipState.pinned) return;
     return Array.isArray(pickedShapes) && pickedShapes.length > 0 && (onElementClick || onElementOver)
       ? 'pointer'
       : DEFAULT_CSS_CURSOR;
diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.ts
index bb087420c6..f0a372fd40 100644
--- a/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.ts
+++ b/packages/charts/src/chart_types/partition_chart/state/selectors/picked_shapes.ts
@@ -6,18 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { pickedShapes, pickShapesLayerValues } from '../../layout/viewmodel/picked_shapes';
+import { getActivePointerPosition } from './../../../../state/selectors/get_active_pointer_position';
 import { partitionDrilldownFocus, partitionMultiGeometries } from './geometries';
 
-function getCurrentPointerPosition(state: GlobalChartState) {
-  return state.interactions.pointer.current.position;
-}
-
 /** @internal */
 export const getPickedShapes = createCustomCachedSelector(
-  [partitionMultiGeometries, getCurrentPointerPosition, partitionDrilldownFocus],
+  [partitionMultiGeometries, getActivePointerPosition, partitionDrilldownFocus],
   pickedShapes,
 );
 
diff --git a/packages/charts/src/chart_types/timeslip/internal_chart_state.ts b/packages/charts/src/chart_types/timeslip/internal_chart_state.ts
index 92d70cbd8b..05d9c94548 100644
--- a/packages/charts/src/chart_types/timeslip/internal_chart_state.ts
+++ b/packages/charts/src/chart_types/timeslip/internal_chart_state.ts
@@ -31,7 +31,13 @@ export class TimeslipState implements InternalChartState {
   getLegendExtraValues = () => new Map<SeriesKey, LegendItemExtraValues>();
   getPointerCursor = () => DEFAULT_CSS_CURSOR;
   getTooltipAnchor = () => ({ x: 0, y: 0, width: 0, height: 0 });
-  isTooltipVisible = () => ({ visible: false, isExternal: false });
+  isTooltipVisible = () => ({
+    visible: false,
+    isExternal: false,
+    displayOnly: false,
+    isPinnable: false,
+  });
+
   getTooltipInfo = () => ({ header: null, values: [] });
   getProjectionContainerArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
   getMainProjectionArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
diff --git a/packages/charts/src/chart_types/timeslip/timeslip/data.ts b/packages/charts/src/chart_types/timeslip/timeslip/data.ts
index 367428e4b0..7000e52917 100644
--- a/packages/charts/src/chart_types/timeslip/timeslip/data.ts
+++ b/packages/charts/src/chart_types/timeslip/timeslip/data.ts
@@ -24,6 +24,5 @@ export const getEnrichedData = (rows: { epochMs: number; value?: number }[]) =>
       maxValue: -Infinity,
     },
   );
-  // console.log({ from: new Date(stats.minEpochMs), to: new Date(stats.maxEpochMs), count: rows.length })
   return { rows, stats };
 };
diff --git a/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx b/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx
index cebd755eb6..e2789157ef 100644
--- a/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx
+++ b/packages/charts/src/chart_types/wordcloud/state/chart_state.tsx
@@ -65,7 +65,12 @@ export class WordcloudState implements InternalChartState {
   }
 
   isTooltipVisible() {
-    return { visible: false, isExternal: false };
+    return {
+      visible: false,
+      isExternal: false,
+      displayOnly: false,
+      isPinnable: false,
+    };
   }
 
   getTooltipInfo() {
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx b/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
index 0579209c26..5506e6c07f 100644
--- a/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
+++ b/packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx
@@ -59,12 +59,12 @@ describe('Annotation tooltips', () => {
       expect(annotation).toHaveLength(1);
       expect(wrapper.find('.echAnnotation')).toHaveLength(0);
       annotation.simulate('mouseenter');
-      const header = wrapper.find('.echTooltip__header');
+      const header = wrapper.find('.echTooltipHeader');
       expect(header).toHaveLength(1);
       expect(header.text()).toEqual('2');
       expect(wrapper.find('.echAnnotation__details').text()).toEqual('foo');
       annotation.simulate('mouseleave');
-      expect(annotation.find('.echTooltip__header')).toHaveLength(0);
+      expect(annotation.find('.echTooltipHeader')).toHaveLength(0);
     });
 
     test('should now show tooltip if hidden', () => {
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/animations/animation.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/animations/animation.ts
index 3a8b7f3f3e..cab615f09c 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/animations/animation.ts
+++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/animations/animation.ts
@@ -77,7 +77,6 @@ export class Animation {
     if (!isFiniteNumber(this.initial) || !isFiniteNumber(this.target) || this.initial === this.target) {
       return false;
     }
-    // if (this.debug && count++ % 30 === 0) console.log(t, this.delay, this.duration, this.timeOffset);
 
     return t - this.delay + this.timeOffset < this.duration;
   }
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss b/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss
index 9707849b77..c47f1b4f48 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss
+++ b/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss
@@ -3,7 +3,7 @@
   transition: opacity $euiAnimSpeedNormal;
   pointer-events: none;
   user-select: none;
-  max-width: 256px;
+  max-width: 260px;
 
   &__marker {
     position: absolute;
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/annotation_tooltip.tsx b/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/annotation_tooltip.tsx
index d471e19d7b..d5d8f0ee7f 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/annotation_tooltip.tsx
+++ b/packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/annotation_tooltip.tsx
@@ -29,7 +29,16 @@ export const AnnotationTooltip = ({ state, chartRef, chartId, onScroll, zIndex }
     }
 
     return (
-      <TooltipWrapper className="echAnnotation">
+      <TooltipWrapper
+        // actions not used on annotations yet
+        actions={[]}
+        actionPrompt=""
+        pinningPrompt=""
+        selectionPrompt=""
+        actionsLoading=""
+        noActionsLoaded=""
+        className="echAnnotation"
+      >
         <TooltipContent {...state} />
       </TooltipWrapper>
     );
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_band.tsx b/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_band.tsx
index a24b27a06e..216d5a1719 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_band.tsx
+++ b/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_band.tsx
@@ -12,12 +12,14 @@ import { connect } from 'react-redux';
 import { Rect } from '../../../../geoms/types';
 import { getTooltipType } from '../../../../specs';
 import { TooltipType } from '../../../../specs/constants';
-import { GlobalChartState } from '../../../../state/chart_state';
+import { GlobalChartState, TooltipInteractionState } from '../../../../state/chart_state';
 import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { getTooltipInteractionState } from '../../../../state/selectors/get_tooltip_interaction_state';
 import { getTooltipSpecSelector } from '../../../../state/selectors/get_tooltip_spec';
+import { getInitialTooltipState } from '../../../../state/utils';
 import { Rotation } from '../../../../utils/common';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
 import { Theme } from '../../../../utils/themes/theme';
@@ -25,14 +27,18 @@ import { getCursorBandPositionSelector } from '../../state/selectors/get_cursor_
 
 interface CursorBandProps {
   theme: Theme;
+  isBrushing: boolean;
   chartRotation: Rotation;
   cursorPosition?: Rect;
   tooltipType: TooltipType;
   fromExternalEvent?: boolean;
+  tooltipState: TooltipInteractionState;
 }
 
-function canRenderBand(type: TooltipType, visible: boolean, fromExternalEvent?: boolean) {
-  return visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor || fromExternalEvent);
+function canRenderBand(type: TooltipType, pinned: boolean, visible: boolean, fromExternalEvent?: boolean) {
+  return (
+    pinned || (visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor || fromExternalEvent))
+  );
 }
 
 class CursorBandComponent extends React.Component<CursorBandProps> {
@@ -43,12 +49,19 @@ class CursorBandComponent extends React.Component<CursorBandProps> {
       theme: {
         crosshair: { band },
       },
+      isBrushing,
       cursorPosition,
       tooltipType,
       fromExternalEvent,
+      tooltipState: { pinned },
     } = this.props;
     const isBand = (cursorPosition?.width ?? 0) > 0 && (cursorPosition?.height ?? 0) > 0;
-    if (!isBand || !cursorPosition || !canRenderBand(tooltipType, band.visible, fromExternalEvent)) {
+    if (
+      isBrushing ||
+      !isBand ||
+      !cursorPosition ||
+      !canRenderBand(tooltipType, pinned, band.visible, fromExternalEvent)
+    ) {
       return null;
     }
     const { x, y, width, height } = cursorPosition;
@@ -64,9 +77,11 @@ class CursorBandComponent extends React.Component<CursorBandProps> {
 const mapStateToProps = (state: GlobalChartState): CursorBandProps => {
   if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) {
     return {
+      isBrushing: false,
       theme: LIGHT_THEME,
       chartRotation: 0,
       tooltipType: TooltipType.None,
+      tooltipState: getInitialTooltipState(),
     };
   }
   const settings = getSettingsSpecSelector(state);
@@ -76,11 +91,13 @@ const mapStateToProps = (state: GlobalChartState): CursorBandProps => {
   const tooltipType = getTooltipType(tooltip, settings, fromExternalEvent);
 
   return {
+    isBrushing: state.interactions.pointer.dragging,
     theme: getChartThemeSelector(state),
     chartRotation: getChartRotationSelector(state),
     cursorPosition: cursorBandPosition,
     tooltipType,
     fromExternalEvent,
+    tooltipState: getTooltipInteractionState(state),
   };
 };
 
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_line.tsx b/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_line.tsx
index 862f7987dd..a193ba4ec0 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_line.tsx
+++ b/packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_line.tsx
@@ -12,12 +12,14 @@ import { connect } from 'react-redux';
 import { Rect } from '../../../../geoms/types';
 import { getTooltipType } from '../../../../specs';
 import { TooltipType } from '../../../../specs/constants';
-import { GlobalChartState } from '../../../../state/chart_state';
+import { GlobalChartState, TooltipInteractionState } from '../../../../state/chart_state';
 import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { getTooltipInteractionState } from '../../../../state/selectors/get_tooltip_interaction_state';
 import { getTooltipSpecSelector } from '../../../../state/selectors/get_tooltip_spec';
+import { getInitialTooltipState } from '../../../../state/utils';
 import { Rotation } from '../../../../utils/common';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
 import { Theme } from '../../../../utils/themes/theme';
@@ -25,15 +27,19 @@ import { getCursorBandPositionSelector } from '../../state/selectors/get_cursor_
 
 interface CursorLineProps {
   theme: Theme;
+  isBrushing: boolean;
   chartRotation: Rotation;
   cursorPosition?: Rect;
   tooltipType: TooltipType;
   fromExternalEvent?: boolean;
   isLine: boolean;
+  tooltipState: TooltipInteractionState;
 }
 
-function canRenderBand(type: TooltipType, visible: boolean, fromExternalEvent?: boolean) {
-  return visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor || fromExternalEvent);
+function canRenderBand(type: TooltipType, pinned: boolean, visible: boolean, fromExternalEvent?: boolean) {
+  return (
+    pinned || (visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor || fromExternalEvent))
+  );
 }
 
 class CursorLineComponent extends React.Component<CursorLineProps> {
@@ -44,13 +50,20 @@ class CursorLineComponent extends React.Component<CursorLineProps> {
       theme: {
         crosshair: { band, line },
       },
+      isBrushing,
       cursorPosition,
       tooltipType,
       fromExternalEvent,
       isLine,
+      tooltipState: { pinned },
     } = this.props;
 
-    if (!cursorPosition || !canRenderBand(tooltipType, band.visible, fromExternalEvent) || !isLine) {
+    if (
+      isBrushing ||
+      !cursorPosition ||
+      !canRenderBand(tooltipType, pinned, band.visible, fromExternalEvent) ||
+      !isLine
+    ) {
       return null;
     }
     const { x, y, width, height } = cursorPosition;
@@ -67,10 +80,12 @@ class CursorLineComponent extends React.Component<CursorLineProps> {
 const mapStateToProps = (state: GlobalChartState): CursorLineProps => {
   if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) {
     return {
+      isBrushing: false,
       theme: LIGHT_THEME,
       chartRotation: 0,
       tooltipType: TooltipType.None,
       isLine: false,
+      tooltipState: getInitialTooltipState(),
     };
   }
   const settings = getSettingsSpecSelector(state);
@@ -81,12 +96,14 @@ const mapStateToProps = (state: GlobalChartState): CursorLineProps => {
   const isLine = cursorBandPosition?.width === 0 || cursorBandPosition?.height === 0;
 
   return {
+    isBrushing: state.interactions.pointer.dragging,
     theme: getChartThemeSelector(state),
     chartRotation: getChartRotationSelector(state),
     cursorPosition: cursorBandPosition,
     tooltipType,
     fromExternalEvent,
     isLine,
+    tooltipState: getTooltipInteractionState(state),
   };
 };
 
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/dom/highlighter.tsx b/packages/charts/src/chart_types/xy_chart/renderer/dom/highlighter.tsx
index 7d10482c99..abb2c0e3b0 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/dom/highlighter.tsx
+++ b/packages/charts/src/chart_types/xy_chart/renderer/dom/highlighter.tsx
@@ -28,6 +28,7 @@ interface HighlighterProps {
   initialized: boolean;
   chartId: string;
   zIndex: number;
+  isBrushing: boolean;
   highlightedGeometries: IndexedGeometry[];
   chartTransform: Transform;
   chartDimensions: Dimensions;
@@ -54,7 +55,8 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
   static displayName = 'Highlighter';
 
   render() {
-    const { highlightedGeometries, chartDimensions, chartRotation, chartId, zIndex } = this.props;
+    const { highlightedGeometries, chartDimensions, chartRotation, chartId, zIndex, isBrushing } = this.props;
+    if (isBrushing) return null;
     const clipWidth = [90, -90].includes(chartRotation) ? chartDimensions.height : chartDimensions.width;
     const clipHeight = [90, -90].includes(chartRotation) ? chartDimensions.width : chartDimensions.height;
     const clipPathId = `echHighlighterClipPath__${chartId}`;
@@ -116,6 +118,7 @@ const mapStateToProps = (state: GlobalChartState): HighlighterProps => {
       initialized: false,
       chartId,
       zIndex,
+      isBrushing: false,
       highlightedGeometries: [],
       chartTransform: {
         x: 0,
@@ -131,6 +134,7 @@ const mapStateToProps = (state: GlobalChartState): HighlighterProps => {
     initialized: true,
     chartId,
     zIndex,
+    isBrushing: state.interactions.pointer.dragging,
     highlightedGeometries: getHighlightedGeomsSelector(state),
     chartTransform: computeChartTransformSelector(state),
     chartDimensions: computeChartDimensionsSelector(state).chartDimensions,
diff --git a/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx b/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx
index 7771fa0be5..a6895654dd 100644
--- a/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx
+++ b/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx
@@ -31,7 +31,7 @@ import { getCursorBandPositionSelector } from './selectors/get_cursor_band';
 import { getProjectedPointerPositionSelector } from './selectors/get_projected_pointer_position';
 import {
   getHighlightedGeomsSelector,
-  getTooltipInfoAndGeometriesSelector,
+  getHighlightedTooltipTooltipValuesSelector,
 } from './selectors/get_tooltip_values_highlighted_geoms';
 import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible';
 import { createOnBrushEndCaller } from './selectors/on_brush_end_caller';
@@ -171,7 +171,7 @@ describe('Chart state pointer interactions', () => {
     };
     MockStore.addSpecs([ordinalBarSeries, updatedSettings], store);
     store.dispatch(onPointerMove({ x: 10, y: 10 + 70 }, 0));
-    const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+    const tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
     // no tooltip values exist if we have a TooltipType === None
     expect(tooltipInfo.tooltip.values.length).toBe(0);
     let isTooltipVisible = isTooltipVisibleSelector(store.getState());
@@ -222,7 +222,7 @@ describe('Chart state pointer interactions', () => {
         onElementOverCaller(state);
         onPointerMoveCaller(state);
       });
-      const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      const tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.tooltip.values).toEqual([]);
     });
 
@@ -238,14 +238,14 @@ describe('Chart state pointer interactions', () => {
       MockStore.flush(store);
       expect(onPointerUpdateListener).toHaveBeenCalledTimes(1);
 
-      const tooltipInfo1 = getTooltipInfoAndGeometriesSelector(store.getState());
+      const tooltipInfo1 = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo1.tooltip.values.length).toBe(1);
       // avoid calls
       store.dispatch(onPointerMove({ x: chartLeft + 12, y: chartTop + 12 }, 1));
       MockStore.flush(store);
       expect(onPointerUpdateListener).toHaveBeenCalledTimes(1);
 
-      const tooltipInfo2 = getTooltipInfoAndGeometriesSelector(store.getState());
+      const tooltipInfo2 = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo2.tooltip.values.length).toBe(1);
       expect(tooltipInfo1).toEqual(tooltipInfo2);
     });
@@ -256,14 +256,14 @@ describe('Chart state pointer interactions', () => {
       MockStore.flush(store);
       expect(onPointerUpdateListener).toHaveBeenCalledTimes(1);
 
-      const tooltipInfo1 = getTooltipInfoAndGeometriesSelector(store.getState());
+      const tooltipInfo1 = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo1.tooltip.values.length).toBe(1);
       // avoid calls
       store.dispatch(onPointerMove({ x: chartLeft + 12, y: chartTop + 10 }, 1));
       MockStore.flush(store);
       expect(onPointerUpdateListener).toHaveBeenCalledTimes(1);
 
-      const tooltipInfo2 = getTooltipInfoAndGeometriesSelector(store.getState());
+      const tooltipInfo2 = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo2.tooltip.values.length).toBe(1);
       expect(tooltipInfo1).toEqual(tooltipInfo2);
     });
@@ -396,7 +396,7 @@ describe('Chart state pointer interactions', () => {
     });
 
     test('can hover top-left corner of the first bar', () => {
-      let tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      let tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.tooltip.values).toEqual([]);
       store.dispatch(onPointerMove({ x: chartLeft + 0, y: chartTop + 0 }, 0));
       let projectedPointerPosition = getProjectedPointerPositionSelector(store.getState());
@@ -407,7 +407,7 @@ describe('Chart state pointer interactions', () => {
       expect((cursorBandPosition as Rect).width).toBe(45);
       let isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       expect(tooltipInfo.highlightedGeometries.length).toBe(1);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -437,7 +437,7 @@ describe('Chart state pointer interactions', () => {
       expect(projectedPointerPosition).toMatchObject({ x: -1, y: -1 });
       isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(false);
-      tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.tooltip.values.length).toBe(0);
       expect(tooltipInfo.highlightedGeometries.length).toBe(0);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -454,7 +454,7 @@ describe('Chart state pointer interactions', () => {
       expect((cursorBandPosition as Rect).width).toBe(45);
       let isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      let tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      let tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.highlightedGeometries.length).toBe(1);
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -483,7 +483,7 @@ describe('Chart state pointer interactions', () => {
       expect(projectedPointerPosition).toMatchObject({ x: -1, y: 89 });
       isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(false);
-      tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.tooltip.values.length).toBe(0);
       expect(tooltipInfo.highlightedGeometries.length).toBe(0);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -504,7 +504,7 @@ describe('Chart state pointer interactions', () => {
       expect((cursorBandPosition as Rect).width).toBe(45);
       let isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      let tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      let tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.highlightedGeometries.length).toBe(1);
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -538,7 +538,7 @@ describe('Chart state pointer interactions', () => {
       expect((cursorBandPosition as Rect).width).toBe(45);
       isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       expect(tooltipInfo.highlightedGeometries.length).toBe(0);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -559,7 +559,7 @@ describe('Chart state pointer interactions', () => {
       expect((cursorBandPosition as Rect).width).toBe(45);
       let isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      let tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      let tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.highlightedGeometries.length).toBe(1);
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -593,7 +593,7 @@ describe('Chart state pointer interactions', () => {
       expect((cursorBandPosition as Rect).width).toBe(45);
       isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       // we are over the second bar here
       expect(tooltipInfo.highlightedGeometries.length).toBe(1);
@@ -626,7 +626,7 @@ describe('Chart state pointer interactions', () => {
     test('can hover top-right corner of the chart', () => {
       expect(onOverListener).toHaveBeenCalledTimes(0);
       expect(onOutListener).toHaveBeenCalledTimes(0);
-      let tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      let tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.highlightedGeometries.length).toBe(0);
       expect(tooltipInfo.tooltip.values.length).toBe(0);
 
@@ -640,7 +640,7 @@ describe('Chart state pointer interactions', () => {
 
       const isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.highlightedGeometries.length).toBe(0);
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       expect(onOverListener).toHaveBeenCalledTimes(0);
@@ -692,7 +692,7 @@ describe('Chart state pointer interactions', () => {
       expect((cursorBandPosition as Rect).width).toBe(45);
       const isTooltipVisible = isTooltipVisibleSelector(store.getState());
       expect(isTooltipVisible.visible).toBe(true);
-      const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+      const tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(tooltipInfo.highlightedGeometries.length).toBe(1);
       expect(tooltipInfo.tooltip.values.length).toBe(1);
       expect(onOverListener).toHaveBeenCalledTimes(1);
@@ -782,7 +782,7 @@ describe('Chart state pointer interactions', () => {
       test('chart 0 rotation', () => {
         MockStore.addSpecs([spec, leftAxis, bottomAxis, currentSettingSpec], store);
         store.dispatch(onPointerMove({ x: chartLeft + 0, y: chartTop + 89 }, 0));
-        const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+        const tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
         expect(tooltipInfo.tooltip.header?.value).toBe(0);
         expect(tooltipInfo.tooltip.header?.formattedValue).toBe('bottom 0');
         expect(tooltipInfo.tooltip.values[0].value).toBe(10);
@@ -797,7 +797,7 @@ describe('Chart state pointer interactions', () => {
         MockStore.addSpecs([spec, leftAxis, bottomAxis, updatedSettings], store);
 
         store.dispatch(onPointerMove({ x: chartLeft + 0, y: chartTop + 89 }, 0));
-        const tooltipInfo = getTooltipInfoAndGeometriesSelector(store.getState());
+        const tooltipInfo = getHighlightedTooltipTooltipValuesSelector(store.getState());
         expect(tooltipInfo.tooltip.header?.value).toBe(1);
         expect(tooltipInfo.tooltip.header?.formattedValue).toBe('left 1');
         expect(tooltipInfo.tooltip.values[0].value).toBe(5);
@@ -1380,7 +1380,7 @@ describe('Clickable annotations', () => {
     });
 
     const tooltipValues = (s: Store) =>
-      getTooltipInfoAndGeometriesSelector(s.getState()).tooltip.values.map((d) => [d.label, d.value]);
+      getHighlightedTooltipTooltipValuesSelector(s.getState()).tooltip.values.map((d) => [d.label, d.value]);
 
     it.each`
       type               | stackMode               | first                   | second        | third
diff --git a/packages/charts/src/chart_types/xy_chart/state/chart_state.tooltip.test.ts b/packages/charts/src/chart_types/xy_chart/state/chart_state.tooltip.test.ts
index 20f830426b..20a5ed9ac3 100644
--- a/packages/charts/src/chart_types/xy_chart/state/chart_state.tooltip.test.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/chart_state.tooltip.test.ts
@@ -14,7 +14,7 @@ import { updateParentDimensions } from '../../../state/actions/chart_settings';
 import { onPointerMove } from '../../../state/actions/mouse';
 import { upsertSpec, specParsed } from '../../../state/actions/specs';
 import { GlobalChartState, chartStoreReducer } from '../../../state/chart_state';
-import { getTooltipInfoAndGeometriesSelector } from './selectors/get_tooltip_values_highlighted_geoms';
+import { getHighlightedTooltipTooltipValuesSelector } from './selectors/get_tooltip_values_highlighted_geoms';
 
 describe('XYChart - State tooltips', () => {
   let store: Store<GlobalChartState>;
@@ -65,7 +65,7 @@ describe('XYChart - State tooltips', () => {
       );
       store.dispatch(specParsed());
       const state = store.getState();
-      const tooltipValues = getTooltipInfoAndGeometriesSelector(state);
+      const tooltipValues = getHighlightedTooltipTooltipValuesSelector(state);
       expect(tooltipValues.tooltip.values).toHaveLength(expectedTooltipValuesLength);
       expect(tooltipValues.tooltip.header === null).toBe(expectHeader);
       expect(tooltipValues.highlightedGeometries).toHaveLength(expectedHgeomsLength);
diff --git a/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx b/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx
index bbd1dfd218..30d3405f57 100644
--- a/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx
+++ b/packages/charts/src/chart_types/xy_chart/state/chart_state.tsx
@@ -29,7 +29,7 @@ import { getBrushAreaSelector } from './selectors/get_brush_area';
 import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_description';
 import { getPointerCursorSelector } from './selectors/get_cursor_pointer';
 import { getDebugStateSelector } from './selectors/get_debug_state';
-import { getHighlightedValuesSelector } from './selectors/get_highlighted_values';
+import { getLegendItemExtraValuesSelector } from './selectors/get_legend_item_extra_values';
 import { getLegendItemsLabelsSelector } from './selectors/get_legend_items_labels';
 import { getSeriesSpecsSelector } from './selectors/get_specs';
 import { getTooltipAnchorPositionSelector } from './selectors/get_tooltip_anchor_position';
@@ -111,7 +111,7 @@ export class XYAxisChartState implements InternalChartState {
   }
 
   getLegendExtraValues(globalState: GlobalChartState): Map<SeriesKey, LegendItemExtraValues> {
-    return getHighlightedValuesSelector(globalState);
+    return getLegendItemExtraValuesSelector(globalState);
   }
 
   chartRenderer(containerRef: BackwardRef, forwardCanvasRef: RefObject<HTMLCanvasElement>) {
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_pointer.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_pointer.ts
index 7f176a59e1..4cefe0b385 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_pointer.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_pointer.ts
@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { CSSProperties } from 'react';
+
 import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
@@ -17,6 +19,8 @@ import { getHighlightedGeomsSelector } from './get_tooltip_values_highlighted_ge
 import { isBrushAvailableSelector } from './is_brush_available';
 
 const getCurrentPointerPositionSelector = (state: GlobalChartState) => state.interactions.pointer.current.position;
+const getTooltipInteractionStateSelector = (state: GlobalChartState) => state.interactions.tooltip;
+const getIsDragging = (state: GlobalChartState) => state.interactions.pointer.dragging;
 
 /** @internal */
 export const getPointerCursorSelector = createCustomCachedSelector(
@@ -28,6 +32,8 @@ export const getPointerCursorSelector = createCustomCachedSelector(
     computeChartDimensionsSelector,
     isBrushAvailableSelector,
     getAnnotationTooltipStateSelector,
+    getTooltipInteractionStateSelector,
+    getIsDragging,
   ],
   (
     highlightedGeometries,
@@ -37,12 +43,17 @@ export const getPointerCursorSelector = createCustomCachedSelector(
     { chartDimensions },
     isBrushAvailable,
     annotationTooltipState,
-  ): string => {
+    tooltipState,
+    isDragging,
+  ): CSSProperties['cursor'] => {
+    if (tooltipState.pinned) return;
     const { x, y } = currentPointerPosition;
     // get positions relative to chart
     const xPos = x - chartDimensions.left;
     const yPos = y - chartDimensions.top;
 
+    if (isDragging) return 'crosshair';
+
     // limit cursorPosition to chartDimensions
     if (xPos < 0 || xPos >= chartDimensions.width || yPos < 0 || yPos >= chartDimensions.height) {
       return DEFAULT_CSS_CURSOR;
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_highlighted_values.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts
similarity index 61%
rename from packages/charts/src/chart_types/xy_chart/state/selectors/get_highlighted_values.ts
rename to packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts
index d6c53168e3..3ed29c0dce 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_highlighted_values.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts
@@ -9,11 +9,11 @@
 import { LegendItemExtraValues } from '../../../../common/legend';
 import { SeriesKey } from '../../../../common/series_id';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
-import { getHighlightedValues } from '../../tooltip/tooltip';
-import { getTooltipInfoSelector } from './get_tooltip_values_highlighted_geoms';
+import { getLegendItemExtraValues } from '../../tooltip/tooltip';
+import { getTooltipInfoAndGeomsSelector } from './get_tooltip_values_highlighted_geoms';
 
 /** @internal */
-export const getHighlightedValuesSelector = createCustomCachedSelector(
-  [getTooltipInfoSelector],
-  ({ values }): Map<SeriesKey, LegendItemExtraValues> => getHighlightedValues(values),
+export const getLegendItemExtraValuesSelector = createCustomCachedSelector(
+  [getTooltipInfoAndGeomsSelector],
+  ({ tooltip: { values } }): Map<SeriesKey, LegendItemExtraValues> => getLegendItemExtraValues(values),
 );
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts
index eed6513da3..58654c880d 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts
@@ -7,24 +7,23 @@
  */
 
 import { ScaleBand } from '../../../../scales/scale_band';
-import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getActivePointerPosition } from '../../../../state/selectors/get_active_pointer_position';
 import { Dimensions } from '../../../../utils/dimensions';
 import { Point } from '../../../../utils/point';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
 import { computeSmallMultipleScalesSelector, SmallMultipleScales } from './compute_small_multiple_scales';
 
-const getCurrentPointerPosition = (state: GlobalChartState) => state.interactions.pointer.current.position;
-
 /** @internal */
 export type PointerPosition = Point & { horizontalPanelValue: PrimitiveValue; verticalPanelValue: PrimitiveValue };
+
 /**
  * Get the x and y pointer position relative to the chart projection area
  * @internal
  */
 export const getProjectedPointerPositionSelector = createCustomCachedSelector(
-  [getCurrentPointerPosition, computeChartDimensionsSelector, computeSmallMultipleScalesSelector],
+  [getActivePointerPosition, computeChartDimensionsSelector, computeSmallMultipleScalesSelector],
   (currentPointerPosition, { chartDimensions }, smallMultipleScales): PointerPosition =>
     getProjectedPointerPosition(currentPointerPosition, chartDimensions, smallMultipleScales),
 );
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.test.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.test.ts
index 9d0403452e..2cc0e49545 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.test.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.test.ts
@@ -13,7 +13,7 @@ import { MockStore } from '../../../../mocks/store/store';
 import { ScaleType } from '../../../../scales/constants';
 import { onPointerMove } from '../../../../state/actions/mouse';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getTooltipInfoAndGeometriesSelector } from './get_tooltip_values_highlighted_geoms';
+import { getHighlightedTooltipTooltipValuesSelector } from './get_tooltip_values_highlighted_geoms';
 
 describe('Highlight points', () => {
   describe('On Ordinal area chart', () => {
@@ -37,12 +37,12 @@ describe('Highlight points', () => {
     });
     it('On ordinal area chart, it should correctly highlight points', () => {
       store.dispatch(onPointerMove({ x: 50, y: 100 }, 0));
-      const { highlightedGeometries } = getTooltipInfoAndGeometriesSelector(store.getState());
+      const { highlightedGeometries } = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(highlightedGeometries).toHaveLength(1);
     });
     it('On ordinal area chart, it should not highlight points if not within the buffer', () => {
       store.dispatch(onPointerMove({ x: 5, y: 100 }, 0));
-      const { highlightedGeometries } = getTooltipInfoAndGeometriesSelector(store.getState());
+      const { highlightedGeometries } = getHighlightedTooltipTooltipValuesSelector(store.getState());
       expect(highlightedGeometries).toHaveLength(0);
     });
   });
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts
index f008dd4cc8..26608305e5 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts
@@ -21,6 +21,7 @@ import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { getTooltipInteractionState } from '../../../../state/selectors/get_tooltip_interaction_state';
 import { getTooltipSpecSelector } from '../../../../state/selectors/get_tooltip_spec';
 import { isNil, Rotation } from '../../../../utils/common';
 import { isValidPointerOverEvent } from '../../../../utils/events';
@@ -59,7 +60,7 @@ export interface TooltipAndHighlightedGeoms {
 const getExternalPointerEventStateSelector = (state: GlobalChartState) => state.externalEvents.pointer;
 
 /** @internal */
-export const getTooltipInfoAndGeometriesSelector = createCustomCachedSelector(
+export const getTooltipInfoAndGeomsSelector = createCustomCachedSelector(
   [
     getSeriesSpecsSelector,
     getAxisSpecsSelector,
@@ -158,12 +159,6 @@ function getTooltipAndHighlightFromValue(
       highlightedGeometries.push(indexedGeometry);
     }
 
-    // if it's a follow tooltip, and no element is highlighted
-    // do _not_ add element into tooltip list
-    if (!isHighlighted && isFollowTooltipType(tooltipType)) {
-      return acc;
-    }
-
     // format the tooltip values
     const formattedTooltip = formatTooltip(indexedGeometry, spec, false, isHighlighted, hasSingleSeries, yAxis);
 
@@ -203,14 +198,35 @@ function getTooltipAndHighlightFromValue(
   };
 }
 
+/** @internal */
+export const getHighlightedTooltipTooltipValuesSelector = createCustomCachedSelector(
+  [getTooltipInteractionState, getTooltipInfoAndGeomsSelector, getTooltipSpecSelector, getSettingsSpecSelector],
+  ({ pinned }, values, tooltip, settings): TooltipAndHighlightedGeoms => {
+    const tooltipType = getTooltipType(tooltip, settings);
+    const highlightedValues = values.tooltip.values.filter((v) => v.isHighlighted);
+    const hasTooltipContent = values.tooltip.values.length > tooltip.maxTooltipItems && highlightedValues.length > 0;
+
+    if (!pinned && (isFollowTooltipType(tooltipType) || hasTooltipContent)) {
+      return {
+        ...values,
+        tooltip: {
+          ...values.tooltip,
+          values: highlightedValues,
+        },
+      };
+    }
+    return values;
+  },
+);
+
 /** @internal */
 export const getTooltipInfoSelector = createCustomCachedSelector(
-  [getTooltipInfoAndGeometriesSelector],
+  [getHighlightedTooltipTooltipValuesSelector],
   ({ tooltip }): TooltipInfo => tooltip,
 );
 
 /** @internal */
 export const getHighlightedGeomsSelector = createCustomCachedSelector(
-  [getTooltipInfoAndGeometriesSelector],
+  [getHighlightedTooltipTooltipValuesSelector],
   ({ highlightedGeometries }): IndexedGeometry[] => highlightedGeometries,
 );
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_visible.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_visible.ts
index 28e6d6c59b..e149276493 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_visible.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_visible.ts
@@ -6,27 +6,25 @@
  * Side Public License, v 1.
  */
 
-import { TooltipInfo } from '../../../../components/tooltip/types';
 import { TooltipType } from '../../../../specs/constants';
-import { GlobalChartState, PointerStates } from '../../../../state/chart_state';
+import { InteractionsState, TooltipVisibility } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getTooltipInteractionState } from '../../../../state/selectors/get_tooltip_interaction_state';
 import { isExternalTooltipVisibleSelector } from '../../../../state/selectors/is_external_tooltip_visible';
 import { Point } from '../../../../utils/point';
-import { TooltipSpec } from './../../../../specs/tooltip';
+import { isFollowTooltipType, TooltipSpec } from './../../../../specs/tooltip';
 import { getTooltipSpecSelector } from './../../../../state/selectors/get_tooltip_spec';
 import { getProjectedPointerPositionSelector } from './get_projected_pointer_position';
-import { getTooltipInfoSelector } from './get_tooltip_values_highlighted_geoms';
+import { getTooltipInfoAndGeomsSelector, TooltipAndHighlightedGeoms } from './get_tooltip_values_highlighted_geoms';
 import { isAnnotationTooltipVisibleSelector } from './is_annotation_tooltip_visible';
 
-const getPointerSelector = (state: GlobalChartState) => state.interactions.pointer;
-
 /** @internal */
 export const isTooltipVisibleSelector = createCustomCachedSelector(
   [
     getTooltipSpecSelector,
-    getPointerSelector,
+    getTooltipInteractionState,
     getProjectedPointerPositionSelector,
-    getTooltipInfoSelector,
+    getTooltipInfoAndGeomsSelector,
     isAnnotationTooltipVisibleSelector,
     isExternalTooltipVisibleSelector,
   ],
@@ -34,23 +32,30 @@ export const isTooltipVisibleSelector = createCustomCachedSelector(
 );
 
 function isTooltipVisible(
-  { type: tooltipType }: TooltipSpec,
-  pointer: PointerStates,
+  { type: tooltipType, maxTooltipItems }: TooltipSpec,
+  { pinned }: InteractionsState['tooltip'],
   projectedPointerPosition: Point,
-  tooltip: TooltipInfo,
+  { tooltip, highlightedGeometries }: TooltipAndHighlightedGeoms,
   isAnnotationTooltipVisible: boolean,
   externalTooltipVisible: boolean,
-) {
+): TooltipVisibility {
+  const visibleTooltip = isFollowTooltipType(tooltipType)
+    ? highlightedGeometries
+    : tooltip.values.length > maxTooltipItems && highlightedGeometries.length > 0
+    ? highlightedGeometries
+    : tooltip.values;
   const isLocalTooltip =
     tooltipType !== TooltipType.None &&
-    pointer.down === null &&
     projectedPointerPosition.x > -1 &&
     projectedPointerPosition.y > -1 &&
-    tooltip.values.length > 0 &&
+    visibleTooltip.length > 0 &&
     !isAnnotationTooltipVisible;
-  const isExternalTooltip = externalTooltipVisible && tooltip.values.length > 0;
+  const isExternalTooltip = externalTooltipVisible && visibleTooltip.length > 0;
+
   return {
-    visible: isLocalTooltip || isExternalTooltip,
+    visible: isLocalTooltip || isExternalTooltip || pinned,
     isExternal: externalTooltipVisible,
+    displayOnly: false,
+    isPinnable: tooltip.values.length > 0,
   };
 }
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_out_caller.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_out_caller.ts
index 683c83846c..155b4f2530 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_out_caller.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_out_caller.ts
@@ -15,7 +15,7 @@ import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
 import { IndexedGeometry } from '../../../../utils/geometry';
 import {
-  getTooltipInfoAndGeometriesSelector,
+  getHighlightedTooltipTooltipValuesSelector,
   TooltipAndHighlightedGeoms,
 } from './get_tooltip_values_highlighted_geoms';
 
@@ -44,7 +44,7 @@ export function createOnElementOutCaller(): (state: GlobalChartState) => void {
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartType.XYAxis) {
       selector = createCustomCachedSelector(
-        [getTooltipInfoAndGeometriesSelector, getSettingsSpecSelector],
+        [getHighlightedTooltipTooltipValuesSelector, getSettingsSpecSelector],
         ({ highlightedGeometries }: TooltipAndHighlightedGeoms, settings: SettingsSpec): void => {
           const nextProps = {
             settings,
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_over_caller.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_over_caller.ts
index 0117707be2..10fadb997d 100644
--- a/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_over_caller.ts
+++ b/packages/charts/src/chart_types/xy_chart/state/selectors/on_element_over_caller.ts
@@ -16,7 +16,7 @@ import { getSettingsSpecSelector } from '../../../../state/selectors/get_setting
 import { IndexedGeometry, GeometryValue } from '../../../../utils/geometry';
 import { XYChartSeriesIdentifier } from '../../utils/series';
 import {
-  getTooltipInfoAndGeometriesSelector,
+  getHighlightedTooltipTooltipValuesSelector,
   TooltipAndHighlightedGeoms,
 } from './get_tooltip_values_highlighted_geoms';
 
@@ -53,7 +53,7 @@ export function createOnElementOverCaller(): (state: GlobalChartState) => void {
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartType.XYAxis) {
       selector = createCustomCachedSelector(
-        [getTooltipInfoAndGeometriesSelector, getSettingsSpecSelector],
+        [getHighlightedTooltipTooltipValuesSelector, getSettingsSpecSelector],
         ({ highlightedGeometries }: TooltipAndHighlightedGeoms, settings: SettingsSpec): void => {
           const nextProps = {
             settings,
diff --git a/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts b/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts
index 336a0aabad..df5b9f4606 100644
--- a/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts
+++ b/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts
@@ -22,7 +22,7 @@ export const Y0_ACCESSOR_POSTFIX = ' - lower';
 export const Y1_ACCESSOR_POSTFIX = ' - upper';
 
 /** @internal */
-export function getHighlightedValues(
+export function getLegendItemExtraValues(
   tooltipValues: TooltipValue[],
   defaultValue?: string,
 ): Map<SeriesKey, LegendItemExtraValues> {
diff --git a/packages/charts/src/common/constants.ts b/packages/charts/src/common/constants.ts
index 7528b1613e..29627784fb 100644
--- a/packages/charts/src/common/constants.ts
+++ b/packages/charts/src/common/constants.ts
@@ -7,7 +7,7 @@
  */
 
 /** @internal */
-export const DEFAULT_CSS_CURSOR = 'default';
+export const DEFAULT_CSS_CURSOR = undefined;
 /** @internal */
 export const TAU = 2 * Math.PI;
 /** @internal */
@@ -27,3 +27,8 @@ export const RIGHT = 'right' as const;
 export const MIDDLE = 'middle' as const;
 /** @public */
 export const CENTER = 'center' as const;
+
+/** @internal
+ * Value used to describe the secondary button (usually the right button) on a `MouseEvent.button`
+ */
+export const SECONDARY_BUTTON = 2;
diff --git a/packages/charts/src/common/hooks/use_render_skip.ts b/packages/charts/src/common/hooks/use_render_skip.ts
new file mode 100644
index 0000000000..d24c4e0010
--- /dev/null
+++ b/packages/charts/src/common/hooks/use_render_skip.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Helper hook to skips n renders
+ * @internal
+ */
+export function useRenderSkip(rendersToSkip: number = 1) {
+  const [renderCount, setRenderCount] = useState(0);
+  useEffect(
+    () => {
+      if (renderCount >= rendersToSkip) return;
+      setRenderCount((n) => n + 1);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    rendersToSkip === 1 ? [] : undefined,
+  );
+  return renderCount >= rendersToSkip;
+}
diff --git a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
index f683a80d9a..d7246242a6 100644
--- a/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
+++ b/packages/charts/src/components/__snapshots__/chart.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Chart should render the legend name test 1`] = `
         </Resizer>
       </Connect(Resizer)>
       <Connect(LegendComponent)>
-        <LegendComponent debug={true} chartDimensions={{...}} containerDimensions={{...}} chartTheme={{...}} size={{...}} items={{...}} extraValues={{...}} config={{...}} onToggleDeselectSeriesAction={[Function (anonymous)]} onItemOutAction={[Function (anonymous)]} onItemOverAction={[Function (anonymous)]} clearTemporaryColors={[Function (anonymous)]} setTemporaryColor={[Function (anonymous)]} setPersistedColor={[Function (anonymous)]}>
+        <LegendComponent debug={true} isBrushing={false} chartDimensions={{...}} containerDimensions={{...}} chartTheme={{...}} size={{...}} items={{...}} extraValues={{...}} config={{...}} onToggleDeselectSeriesAction={[Function (anonymous)]} onItemOutAction={[Function (anonymous)]} onItemOverAction={[Function (anonymous)]} clearTemporaryColors={[Function (anonymous)]} setTemporaryColor={[Function (anonymous)]} setPersistedColor={[Function (anonymous)]}>
           <div className="echLegend echLegend--debug echLegend--vertical echLegend--right echLegend--top" style={{...}} dir="ltr">
             <div style={{...}} className="echLegendListContainer">
               <ul style={{...}} className="echLegendList">
@@ -61,10 +61,10 @@ exports[`Chart should render the legend name test 1`] = `
         </Connect(SpecsParserComponent)>
         <div className="echContainer">
           <Connect(ChartContainer) getChartContainerRef={[Function (anonymous)]} forwardStageRef={{...}}>
-            <ChartContainer getChartContainerRef={[Function (anonymous)]} forwardStageRef={{...}} status="Initialized" initialized={true} isChartEmpty={false} pointerCursor="default" isBrushingAvailable={false} isBrushing={false} internalChartRenderer={[Function (anonymous)]} settings={{...}} onPointerMove={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onKeyPress={[Function (anonymous)]}>
-              <div className="echChartPointerContainer" style={{...}} onMouseMove={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseUp={[Function (anonymous)]}>
+            <ChartContainer getChartContainerRef={[Function (anonymous)]} forwardStageRef={{...}} status="Initialized" initialized={true} tooltipState={{...}} isChartEmpty={false} canPinTooltip={false} pointerCursor={[undefined]} isBrushingAvailable={false} isBrushing={false} internalChartRenderer={[Function (anonymous)]} settings={{...}} tooltip={{...}} disableInteractions={false} onPointerMove={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onKeyPress={[Function (anonymous)]} pinTooltip={[Function (anonymous)]}>
+              <div className="echChartPointerContainer" style={{...}} onMouseMove={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onContextMenu={[undefined]}>
                 <Connect(CursorBand)>
-                  <CursorBand theme={{...}} chartRotation={0} cursorPosition={[undefined]} tooltipType="vertical" fromExternalEvent={[undefined]} dispatch={[Function: dispatch]} />
+                  <CursorBand isBrushing={false} theme={{...}} chartRotation={0} cursorPosition={[undefined]} tooltipType="vertical" fromExternalEvent={[undefined]} tooltipState={{...}} dispatch={[Function: dispatch]} />
                 </Connect(CursorBand)>
                 <Connect(XYChart) forwardCanvasRef={{...}}>
                   <XYChart forwardCanvasRef={{...}} isRTL={false} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} hoveredAnnotationIds={{...}} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} a11ySettings={{...}} onChartRendered={[Function (anonymous)]}>
@@ -92,13 +92,13 @@ exports[`Chart should render the legend name test 1`] = `
                   </XYChart>
                 </Connect(XYChart)>
                 <Connect(CursorLine)>
-                  <CursorLine theme={{...}} chartRotation={0} cursorPosition={[undefined]} tooltipType="vertical" fromExternalEvent={[undefined]} isLine={false} dispatch={[Function: dispatch]} />
+                  <CursorLine isBrushing={false} theme={{...}} chartRotation={0} cursorPosition={[undefined]} tooltipType="vertical" fromExternalEvent={[undefined]} isLine={false} tooltipState={{...}} dispatch={[Function: dispatch]} />
                 </Connect(CursorLine)>
                 <Connect(CursorCrossLine)>
                   <CursorCrossLine theme={{...}} chartRotation={0} cursorCrossLinePosition={[undefined]} tooltipType="vertical" dispatch={[Function: dispatch]} />
                 </Connect(CursorCrossLine)>
                 <Connect(Tooltip) getChartContainerRef={[Function (anonymous)]}>
-                  <Tooltip getChartContainerRef={[Function (anonymous)]} zIndex={0} headerFormatter={[undefined]} settings={{...}} header={[undefined]} footer={[undefined]} rotation={0} chartId="chart1" backgroundColor="transparent" visible={false} position={{...}} info={{...}} onPointerMove={[Function (anonymous)]} />
+                  <Tooltip getChartContainerRef={[Function (anonymous)]} tooltip={{...}} isExternal={false} isBrushing={false} zIndex={0} settings={{...}} tooltipTheme={{...}} rotation={0} chartId="chart1" backgroundColor="transparent" visible={false} position={{...}} info={{...}} pinned={false} selected={{...}} canPinTooltip={false} onPointerMove={[Function (anonymous)]} toggleSelectedTooltipItem={[Function (anonymous)]} setSelectedTooltipItems={[Function (anonymous)]} pinTooltip={[Function (anonymous)]} />
                 </Connect(Tooltip)>
                 <Connect(Annotations) getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}}>
                   <Annotations getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}} isChartEmpty={false} chartDimensions={{...}} sharedStyle={{...}} annotationDimensions={{...}} annotationSpecs={{...}} tooltipState={{...}} chartId="chart1" zIndex={0} hoveredAnnotationIds={{...}} clickable={false} onPointerMove={[Function (anonymous)]} onDOMElementLeave={[Function (anonymous)]} onDOMElementEnter={[Function (anonymous)]} onDOMElementClick={[Function (anonymous)]}>
@@ -106,7 +106,7 @@ exports[`Chart should render the legend name test 1`] = `
                   </Annotations>
                 </Connect(Annotations)>
                 <Connect(Highlighter)>
-                  <Highlighter initialized={true} chartId="chart1" zIndex={0} highlightedGeometries={{...}} chartTransform={{...}} chartDimensions={{...}} chartRotation={0} dispatch={[Function: dispatch]}>
+                  <Highlighter initialized={true} chartId="chart1" zIndex={0} isBrushing={false} highlightedGeometries={{...}} chartTransform={{...}} chartDimensions={{...}} chartRotation={0} dispatch={[Function: dispatch]}>
                     <svg className="echHighlighter" style={{...}}>
                       <defs>
                         <clipPath id="echHighlighterClipPath__chart1">
diff --git a/packages/charts/src/components/_index.scss b/packages/charts/src/components/_index.scss
index 96aa10c069..ce2091babf 100644
--- a/packages/charts/src/components/_index.scss
+++ b/packages/charts/src/components/_index.scss
@@ -1,7 +1,7 @@
 @import 'global';
 @import 'container';
 @import 'brush/index';
-@import 'tooltip/index';
+@import 'tooltip/components/index';
 @import 'portal/index';
 @import 'icons/index';
 @import 'legend/index';
diff --git a/packages/charts/src/components/chart_container.tsx b/packages/charts/src/components/chart_container.tsx
index 5a0799405d..060ea4aeb3 100644
--- a/packages/charts/src/components/chart_container.tsx
+++ b/packages/charts/src/components/chart_container.tsx
@@ -6,25 +6,29 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
-import { DEFAULT_CSS_CURSOR } from '../common/constants';
-import { SettingsSpec } from '../specs';
+import { ChartType } from '../chart_types';
+import { DEFAULT_CSS_CURSOR, SECONDARY_BUTTON } from '../common/constants';
+import { SettingsSpec, TooltipSpec } from '../specs';
 import { onKeyPress as onKeyPressAction } from '../state/actions/key';
 import {
   onMouseUp as onMouseUpAction,
   onMouseDown as onMouseDownAction,
   onPointerMove as onPointerMoveAction,
 } from '../state/actions/mouse';
-import { GlobalChartState, BackwardRef } from '../state/chart_state';
+import { pinTooltip as pinTooltipAction } from '../state/actions/tooltip';
+import { GlobalChartState, BackwardRef, TooltipInteractionState } from '../state/chart_state';
+import { isPinnableTooltip } from '../state/selectors/can_pin_tooltip';
 import { getInternalChartRendererSelector } from '../state/selectors/get_chart_type_components';
 import { getInternalPointerCursor } from '../state/selectors/get_internal_cursor_pointer';
 import { getInternalIsBrushingSelector } from '../state/selectors/get_internal_is_brushing';
 import { getInternalIsBrushingAvailableSelector } from '../state/selectors/get_internal_is_brushing_available';
 import { getInternalIsInitializedSelector, InitStatus } from '../state/selectors/get_internal_is_intialized';
 import { getSettingsSpecSelector } from '../state/selectors/get_settings_spec';
+import { getTooltipSpecSelector } from '../state/selectors/get_tooltip_spec';
 import { isInternalChartEmptySelector } from '../state/selectors/is_chart_empty';
 import { deepEqual } from '../utils/fast_deep_equal';
 import { NoResults } from './no_results';
@@ -32,11 +36,15 @@ import { NoResults } from './no_results';
 interface ChartContainerComponentStateProps {
   status: InitStatus;
   isChartEmpty?: boolean;
-  pointerCursor: string;
+  pointerCursor: CSSProperties['cursor'];
   isBrushing: boolean;
+  tooltipState: TooltipInteractionState;
   initialized?: boolean;
+  canPinTooltip: boolean;
   isBrushingAvailable: boolean;
   settings?: SettingsSpec;
+  tooltip: TooltipSpec;
+  disableInteractions: boolean;
   internalChartRenderer: (
     containerRef: BackwardRef,
     forwardStageRef: React.RefObject<HTMLCanvasElement>,
@@ -47,6 +55,7 @@ interface ChartContainerComponentDispatchProps {
   onMouseUp: typeof onMouseUpAction;
   onMouseDown: typeof onMouseDownAction;
   onKeyPress: typeof onKeyPressAction;
+  pinTooltip: typeof pinTooltipAction;
 }
 
 interface ChartContainerComponentOwnProps {
@@ -60,6 +69,7 @@ type ReactiveChartProps = ChartContainerComponentStateProps &
 
 class ChartContainerComponent extends React.Component<ReactiveChartProps> {
   static displayName = 'ChartContainer';
+  static watchedKeys: KeyboardEvent['key'][] = ['Escape'];
 
   shouldComponentUpdate(nextProps: ReactiveChartProps) {
     return !deepEqual(this.props, nextProps);
@@ -68,8 +78,8 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
   handleMouseMove = ({
     nativeEvent: { offsetX, offsetY, timeStamp },
   }: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const { isChartEmpty, onPointerMove, internalChartRenderer } = this.props;
-    if (isChartEmpty || internalChartRenderer.name === 'FlameWithTooltip') {
+    const { isChartEmpty, disableInteractions, onPointerMove, internalChartRenderer } = this.props;
+    if (isChartEmpty || disableInteractions || internalChartRenderer.name === 'FlameWithTooltip') {
       // Flame chart does its own event handling, and panning temporarily attaches
       // an event handler onto `window`. So this `chart_container.handleMouseMove`
       // can not be avoided with `e.stopPropagation()`. So we should avoid emission
@@ -86,23 +96,20 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
   };
 
   handleMouseLeave = ({ nativeEvent: { timeStamp } }: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const { isChartEmpty, onPointerMove, isBrushing } = this.props;
-    if (isChartEmpty) {
-      return;
-    }
-    if (isBrushing) {
+    const { isChartEmpty, disableInteractions, onPointerMove, isBrushing } = this.props;
+    if (isChartEmpty || disableInteractions || isBrushing) {
       return;
     }
     onPointerMove({ x: -1, y: -1 }, timeStamp);
   };
 
   handleMouseDown = ({
-    nativeEvent: { offsetX, offsetY, timeStamp },
+    nativeEvent: { offsetX, offsetY, timeStamp, button, ctrlKey },
   }: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const { isChartEmpty, onMouseDown, isBrushingAvailable } = this.props;
-    if (isChartEmpty) {
-      return;
-    }
+    const { isChartEmpty, disableInteractions, onMouseDown, isBrushingAvailable, tooltipState } = this.props;
+
+    // button 2 to block brushing on right click
+    if (tooltipState.pinned || button === SECONDARY_BUTTON || ctrlKey || isChartEmpty || disableInteractions) return;
 
     if (isBrushingAvailable) {
       window.addEventListener('mouseup', this.handleBrushEnd);
@@ -119,9 +126,38 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
     );
   };
 
+  handleUnpinningTooltip = () => {
+    window.removeEventListener('keyup', this.handleKeyUp);
+    window.removeEventListener('click', this.handleUnpinningTooltip);
+    window.removeEventListener('scroll', this.handleUnpinningTooltip);
+    window.removeEventListener('visibilitychange', this.handleUnpinningTooltip);
+    this.props.pinTooltip(false, true);
+  };
+
+  handleContextMenu = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const { isChartEmpty, disableInteractions, tooltipState } = this.props;
+    if (isChartEmpty || disableInteractions) {
+      return;
+    }
+
+    e.preventDefault(); // prevent browser context menu
+
+    if (tooltipState.pinned) {
+      this.handleUnpinningTooltip();
+      return;
+    }
+
+    window.addEventListener('keyup', this.handleKeyUp);
+    window.addEventListener('click', this.handleUnpinningTooltip);
+    window.addEventListener('scroll', this.handleUnpinningTooltip);
+    window.addEventListener('visibilitychange', this.handleUnpinningTooltip);
+
+    this.props.pinTooltip(true);
+  };
+
   handleMouseUp = ({ nativeEvent: { offsetX, offsetY, timeStamp } }: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const { isChartEmpty, onMouseUp } = this.props;
-    if (isChartEmpty) {
+    const { isChartEmpty, disableInteractions, onMouseUp, tooltipState } = this.props;
+    if (tooltipState.pinned || isChartEmpty || disableInteractions) {
       return;
     }
 
@@ -137,10 +173,12 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
   };
 
   handleKeyUp = ({ key }: KeyboardEvent) => {
+    if (!ChartContainerComponent.watchedKeys.includes(key)) return;
+
     window.removeEventListener('keyup', this.handleKeyUp);
 
-    const { isChartEmpty, onKeyPress } = this.props;
-    if (isChartEmpty) {
+    const { isChartEmpty, disableInteractions, onKeyPress } = this.props;
+    if (isChartEmpty || disableInteractions) {
       return;
     }
 
@@ -172,6 +210,7 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
     }
 
     const { pointerCursor, internalChartRenderer, getChartContainerRef, forwardStageRef } = this.props;
+
     return (
       <div
         className="echChartPointerContainer"
@@ -182,6 +221,7 @@ class ChartContainerComponent extends React.Component<ReactiveChartProps> {
         onMouseLeave={this.handleMouseLeave}
         onMouseDown={this.handleMouseDown}
         onMouseUp={this.handleMouseUp}
+        onContextMenu={this.props.canPinTooltip ? this.handleContextMenu : undefined}
       >
         {internalChartRenderer(getChartContainerRef, forwardStageRef)}
       </div>
@@ -196,35 +236,46 @@ const mapDispatchToProps = (dispatch: Dispatch): ChartContainerComponentDispatch
       onMouseUp: onMouseUpAction,
       onMouseDown: onMouseDownAction,
       onKeyPress: onKeyPressAction,
+      pinTooltip: pinTooltipAction,
     },
     dispatch,
   );
 const mapStateToProps = (state: GlobalChartState): ChartContainerComponentStateProps => {
   const status = getInternalIsInitializedSelector(state);
   const settings = getSettingsSpecSelector(state);
+  const tooltip = getTooltipSpecSelector(state);
   const initialized = !state.specParsing && state.specsInitialized;
+  const tooltipState = state.interactions.tooltip;
 
   if (status !== InitStatus.Initialized) {
     return {
       status,
       initialized,
+      tooltipState,
+      canPinTooltip: false,
       pointerCursor: DEFAULT_CSS_CURSOR,
       isBrushingAvailable: false,
       isBrushing: false,
       internalChartRenderer: () => null,
       settings,
+      tooltip,
+      disableInteractions: false,
     };
   }
 
   return {
     status,
     initialized,
+    tooltipState,
     isChartEmpty: isInternalChartEmptySelector(state),
+    canPinTooltip: isPinnableTooltip(state),
     pointerCursor: getInternalPointerCursor(state),
     isBrushingAvailable: getInternalIsBrushingAvailableSelector(state),
     isBrushing: getInternalIsBrushingSelector(state),
     internalChartRenderer: getInternalChartRendererSelector(state),
     settings,
+    tooltip,
+    disableInteractions: state.chartType === ChartType.Flame,
   };
 };
 
diff --git a/packages/charts/src/components/legend/_legend.scss b/packages/charts/src/components/legend/_legend.scss
index 9ab2247e30..353b8fa418 100644
--- a/packages/charts/src/components/legend/_legend.scss
+++ b/packages/charts/src/components/legend/_legend.scss
@@ -31,6 +31,10 @@
     position: relative;
   }
 
+  &--inert {
+    pointer-events: none;
+  }
+
   .echLegendListContainer {
     @include euiYScrollWithShadows;
     width: 100%;
diff --git a/packages/charts/src/components/legend/label.tsx b/packages/charts/src/components/legend/label.tsx
index f97668e71b..dd61c54e94 100644
--- a/packages/charts/src/components/legend/label.tsx
+++ b/packages/charts/src/components/legend/label.tsx
@@ -19,6 +19,7 @@ interface LabelProps {
   onToggle?: (negate: boolean) => void;
   options: LegendLabelOptions;
 }
+
 /**
  * Label component used to display text in legend item
  * @internal
diff --git a/packages/charts/src/components/legend/legend.tsx b/packages/charts/src/components/legend/legend.tsx
index 65dc0b31be..204de752d1 100644
--- a/packages/charts/src/components/legend/legend.tsx
+++ b/packages/charts/src/components/legend/legend.tsx
@@ -39,6 +39,7 @@ import { getLegendStyle, getLegendListStyle } from './style_utils';
 
 interface LegendStateProps {
   debug: boolean;
+  isBrushing: boolean;
   chartDimensions: Dimensions;
   containerDimensions: Dimensions;
   chartTheme: Theme;
@@ -62,6 +63,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) {
     items,
     size,
     debug,
+    isBrushing,
     chartTheme: { chartMargins, legend },
     chartDimensions,
     containerDimensions,
@@ -79,6 +81,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) {
 
   const legendClasses = classNames('echLegend', {
     'echLegend--debug': debug,
+    'echLegend--inert': isBrushing,
     'echLegend--horizontal': positionConfig.direction === LayoutDirection.Horizontal,
     'echLegend--vertical': positionConfig.direction === LayoutDirection.Vertical,
     'echLegend--left': positionConfig.hAlign === HorizontalAlignment.Left,
@@ -137,6 +140,7 @@ const EMPTY_DEFAULT_STATE: LegendStateProps = {
   items: [],
   extraValues: new Map(),
   debug: false,
+  isBrushing: false,
   chartTheme: LIGHT_THEME,
   size: { width: 0, height: 0 },
   config: DEFAULT_LEGEND_CONFIG,
@@ -153,6 +157,7 @@ const mapStateToProps = (state: GlobalChartState): LegendStateProps => {
   const { debug } = getSettingsSpecSelector(state);
   return {
     debug,
+    isBrushing: state.interactions.pointer.dragging,
     chartDimensions: getInternalMainProjectionAreaSelector(state),
     containerDimensions: getInternalProjectionContainerAreaSelector(state),
     chartTheme: getChartThemeSelector(state),
diff --git a/packages/charts/src/components/portal/tooltip_portal.tsx b/packages/charts/src/components/portal/tooltip_portal.tsx
index 852031cc8d..858a9ad88f 100644
--- a/packages/charts/src/components/portal/tooltip_portal.tsx
+++ b/packages/charts/src/components/portal/tooltip_portal.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { createPopper, Instance } from '@popperjs/core';
+import { createPopper, Instance, Placement as PopperPlacement } from '@popperjs/core';
 import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -44,6 +44,11 @@ type PortalTooltipProps = {
    * Chart Id to add new anchor for each chart on the page
    */
   chartId: string;
+
+  /**
+   * Called when computed placement changes
+   */
+  onPlacementChange?: (placement: PopperPlacement) => void;
 };
 
 function addToPadding(padding: Partial<Padding> | number = 0, extra: number = 0): Padding | number | undefined {
@@ -67,7 +72,9 @@ const TooltipPortalComponent = ({
   visible,
   chartId,
   zIndex,
+  onPlacementChange,
 }: PortalTooltipProps) => {
+  const finalPlacement = useRef<PopperPlacement>('auto');
   const skipPositioning = isHTMLElement((anchor as PortalAnchorRef).current);
   const { position } = anchor as PositionedPortalAnchorRef;
 
@@ -147,6 +154,17 @@ const TooltipPortalComponent = ({
             padding: addToPadding(boundaryPadding, offset),
           },
         },
+        {
+          name: 'reportPlacement',
+          phase: 'afterWrite',
+          enabled: Boolean(onPlacementChange),
+          fn: ({ state }) => {
+            if (finalPlacement.current !== state.placement) {
+              finalPlacement.current = state.placement;
+              onPlacementChange?.(state.placement);
+            }
+          },
+        },
       ],
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/charts/src/components/tooltip/_index.scss b/packages/charts/src/components/tooltip/_index.scss
deleted file mode 100644
index 0a06e6f1bb..0000000000
--- a/packages/charts/src/components/tooltip/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'tooltip';
diff --git a/packages/charts/src/components/tooltip/_tooltip.scss b/packages/charts/src/components/tooltip/_tooltip.scss
deleted file mode 100644
index 8bac8b91de..0000000000
--- a/packages/charts/src/components/tooltip/_tooltip.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@import '../mixins';
-
-$tooltipBorderColor: $euiColorLightShade;
-$tooltipBorderWidth: 1px;
-$rowColorStripWidth: 5px;
-$maxRowColorStripWidth: 8px;
-$rowColorStripAnimatedWidthDelta: 3px;
-
-.echTooltip {
-  @include euiToolTipStyle;
-  @include euiFontSizeXS;
-  padding: 0;
-  transition: opacity $euiAnimSpeedNormal;
-  pointer-events: none;
-  user-select: none;
-  max-width: 256px;
-  background-color: $euiColorEmptyShade;
-  color: $euiTextColor;
-  overflow: hidden;
-
-  & > :not(:last-child) {
-    border-bottom: solid $tooltipBorderWidth $tooltipBorderColor;
-  }
-
-  .euiTable {
-    background-color: transparent;
-  }
-
-  .euiTableFooterCell,
-  .euiTableHeaderCell,
-  .euiTableRowCell {
-    color: white;
-  }
-
-  &__list {
-    &--scrollable {
-      overflow-y: auto;
-      pointer-events: auto;
-    }
-  }
-
-  &__divider {
-    border-bottom: solid $tooltipBorderWidth $tooltipBorderColor;
-  }
-
-  &__metricRow {
-    padding: $euiSizeXS ($euiSizeXS * 2);
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__header {
-    font-weight: $euiFontWeightBold;
-    margin-bottom: 0;
-    padding: $euiSizeXS ($euiSizeXS * 2);
-  }
-
-  &__footer {
-    font-weight: $euiFontWeightBold;
-    border-top: solid $tooltipBorderWidth $tooltipBorderColor;
-    margin-top: 0;
-    padding: $euiSizeXS ($euiSizeXS * 2);
-  }
-
-  &__stickyAction {
-    color: #69707d;
-    padding: $euiSizeS;
-    margin-left: $rowColorStripWidth;
-  }
-
-  &__table {
-    width: 100%;
-
-    &--scrollable {
-      overflow-y: auto;
-      pointer-events: auto;
-    }
-  }
-
-  &__tableHeader {
-    font-weight: $euiFontWeightBold;
-    margin-bottom: 0;
-    border-bottom: solid $tooltipBorderWidth $tooltipBorderColor;
-  }
-
-  &__tableCell:not(.echTooltip__colorCell) {
-    padding: 4px;
-  }
-
-  &__tableBody {
-    td:not(.echTooltip__colorCell) {
-      padding: 2px 4px;
-    }
-  }
-
-  &__tableFooter {
-    border-top: solid $tooltipBorderWidth $tooltipBorderColor;
-    font-weight: $euiFontWeightBold;
-    margin-top: 0;
-  }
-
-  &__tableRow {
-    position: relative;
-
-    &--highlighted {
-      background-color: transparentize($euiColorLightShade, 0.5);
-
-      // TODO save this for future sticky interactions
-      // .echTooltip__colorStrip {
-      //   width: $rowColorStripWidth + $rowColorStripAnimatedWidthDelta;
-      // }
-    }
-  }
-
-  &__colorCell {
-    padding: 0;
-    height: 100%;
-    position: relative;
-
-    &--empty {
-      width: 0;
-    }
-  }
-
-  &__colorStrip {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: $rowColorStripWidth;
-    min-width: $rowColorStripWidth;
-    max-width: $maxRowColorStripWidth;
-    transition: width 200ms;
-  }
-
-  &__colorStripSpacer {
-    width: $maxRowColorStripWidth;
-  }
-
-  &__label {
-    @include wrapText;
-    min-width: 1px;
-    flex: 1 1 auto;
-    text-align: left;
-  }
-
-  &__value {
-    text-align: right;
-    font-feature-settings: 'tnum';
-  }
-
-  &[dir='rtl'] {
-    .echTooltip {
-      &__colorStrip {
-        left: auto;
-        right: 0;
-      }
-    }
-  }
-}
diff --git a/packages/charts/src/components/tooltip/components/_index.scss b/packages/charts/src/components/tooltip/components/_index.scss
new file mode 100644
index 0000000000..de114c19ef
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/_index.scss
@@ -0,0 +1,6 @@
+@import 'tooltip';
+@import 'tooltip_header';
+@import 'tooltip_footer';
+@import 'tooltip_divider';
+@import 'tooltip_prompt';
+@import 'tooltip_actions';
diff --git a/packages/charts/src/components/tooltip/components/_tooltip.scss b/packages/charts/src/components/tooltip/components/_tooltip.scss
new file mode 100644
index 0000000000..4641424616
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/_tooltip.scss
@@ -0,0 +1,236 @@
+@import '../../mixins';
+
+$tooltipBorderColor: $euiColorLightShade;
+$tooltipBorderWidth: 1px;
+$rowColorStripWidth: 5px;
+/**
+ * Manually synced with `MAX_ROW_COLOR_STRIP_WIDTH` const in [`tooltip_table.tsx`](packages/charts/src/components/tooltip/components/tooltip_table.tsx)
+ */
+$maxRowColorStripWidth: 11px;
+
+$tableBorder: solid $tooltipBorderWidth $tooltipBorderColor;
+
+$tableRowHoverColor: transparentize($euiColorPrimary, 0.95);
+$tableRowSelectedColor: tintOrShade($euiFocusBackgroundColor, 0, 10%);
+$tableRowHoverSelectedColor: tintOrShade($euiFocusBackgroundColor, 0, 10%);
+
+.echTooltip {
+  @include euiToolTipStyle;
+  @include euiFontSizeXS;
+  padding: 0;
+  max-width: 100%;
+  pointer-events: none;
+  user-select: none;
+  background-color: $euiColorEmptyShade;
+  color: $euiTextColor;
+  overflow: hidden;
+  cursor: default;
+  transition: box-shadow 400ms, opacity $euiAnimSpeedNormal;
+  border: 1px solid $euiColorEmptyShade;
+
+  &__outerWrapper {
+    display: flex;
+  }
+
+  &--pinned {
+    @include euiBottomShadowSmall;
+    pointer-events: auto;
+    user-select: auto;
+
+    .echTooltip__tableRow--selectable {
+      cursor: pointer;
+    }
+
+    .echTooltipActions {
+      pointer-events: auto;
+    }
+    .echTooltip__tableWrapper {
+      pointer-events: auto;
+    }
+  }
+
+  .echTooltip__tableCell--truncate {
+    @include euiTextTruncate;
+  }
+
+  &__metricRow {
+    padding: $euiSizeXS ($euiSizeXS * 2);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__tableWrapper {
+    overflow: auto;
+    @include euiScrollBar;
+    background-color: $euiColorEmptyShade;
+  }
+
+  &__table {
+    display: grid;
+    width: 100%;
+
+    &--noGrid {
+      display: table;
+    }
+  }
+
+  &__tableHeader,
+  &__tableFooter {
+    .echTooltip__tableCell {
+      cursor: default;
+      font-weight: $euiFontWeightBold;
+      background-color: $euiColorEmptyShade;
+      position: sticky;
+      z-index: 1;
+    }
+  }
+
+  &__tableHeader,
+  &__tableBody,
+  &__tableFooter,
+  &__tableRow {
+    // This ignores all above elements for positioning
+    // effectively spreading all children in its place
+    display: contents;
+  }
+
+  &__tableHeader {
+    margin-bottom: 0;
+    top: 0;
+
+    .echTooltip__tableCell {
+      border-bottom: $tableBorder;
+      top: 0;
+    }
+  }
+
+  &__tableFooter {
+    margin-top: 0;
+    bottom: 0;
+
+    .echTooltip__tableCell {
+      border-top: $tableBorder;
+      bottom: 0;
+    }
+  }
+
+  &__tableCell:not(.echTooltip__colorCell) {
+    padding: 4px;
+  }
+
+  &__tableBody {
+    .echTooltip__tableCell:not(.echTooltip__colorCell) {
+      padding: 2px 4px;
+    }
+
+    .echTooltip__tableRow--selected {
+      .echTooltip__tableCell:not(.echTooltip__colorCell),
+      .echTooltip__colorCell .echTooltip__colorStrip--spacer {
+        background-color: $tableRowSelectedColor;
+      }
+    }
+
+    .echTooltip__tableRow--selected:hover {
+      .echTooltip__tableCell:not(.echTooltip__colorCell),
+      .echTooltip__colorCell .echTooltip__colorStrip--spacer {
+        background-color: $tableRowHoverSelectedColor;
+      }
+    }
+    .echTooltip__tableRow--selectable:hover {
+      .echTooltip__tableCell:not(.echTooltip__colorCell),
+      .echTooltip__colorCell .echTooltip__colorStrip--spacer {
+        background-color: $tableRowHoverColor;
+      }
+    }
+  }
+
+  &__tableRow {
+    position: relative;
+
+    &--highlighted {
+      .echTooltip__tableCell:not(.echTooltip__colorCell),
+      .echTooltip__colorCell .echTooltip__colorStrip--spacer {
+        background-color: transparentize($euiColorLightShade, 0.5);
+      }
+    }
+
+    &--selected {
+      :not(.echTooltip__colorCell--static) .echTooltip__colorStrip {
+        width: $maxRowColorStripWidth;
+
+        &--spacer {
+          width: 0;
+          min-width: 0;
+        }
+
+        &:not(&--bg)::before {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &__colorCell {
+    padding: 0;
+    height: 100%;
+    position: relative;
+    overflow: hidden; // to avoid extra height from color strip styles
+    width: $maxRowColorStripWidth;
+
+    &--static {
+      width: $rowColorStripWidth;
+    }
+  }
+
+  &__colorStrip,
+  &__colorStrip--bg,
+  &__colorStrip--spacer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: $rowColorStripWidth;
+    transition: width 200ms;
+  }
+
+  &__colorStrip {
+    &::before {
+      opacity: 0;
+      content: '✓';
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 95%; // to center dot better
+      font-size: 90%;
+      font-weight: bold;
+      transition: opacity 200ms;
+    }
+
+    &--spacer {
+      left: auto;
+      right: 0;
+      width: $maxRowColorStripWidth - $rowColorStripWidth;
+      min-width: $maxRowColorStripWidth - $rowColorStripWidth;
+    }
+  }
+
+  &__label {
+    min-width: 1px;
+    flex: 1 1 auto;
+    text-align: left;
+  }
+
+  &__value {
+    text-align: right;
+    font-feature-settings: 'tnum';
+  }
+
+  &[dir='rtl'] {
+    .echTooltip {
+      &__colorStrip {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
diff --git a/packages/charts/src/components/tooltip/components/_tooltip_actions.scss b/packages/charts/src/components/tooltip/components/_tooltip_actions.scss
new file mode 100644
index 0000000000..43236f623b
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/_tooltip_actions.scss
@@ -0,0 +1,53 @@
+.echTooltipActions {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  width: 100%;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 21px;
+
+  &__prompt {
+    position: relative;
+    height: 26px;
+    padding: 0 $euiSizeS;
+    line-height: 26px;
+    width: 100%;
+    color: $euiTextSubduedColor;
+    font-style: normal;
+    font-size: 12px;
+  }
+
+  &__action {
+    &:nth-child(2) {
+      padding-top: 4px;
+    }
+    &:last-child {
+      padding-bottom: 2px;
+    }
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    text-align: left;
+    width: 100%;
+    padding: 0 $euiSizeS;
+    line-height: 21px;
+    cursor: pointer;
+    color: $euiTextColor;
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+
+    &[disabled] {
+      cursor: default;
+      color: $euiButtonColorDisabledText;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+}
diff --git a/packages/charts/src/components/tooltip/components/_tooltip_divider.scss b/packages/charts/src/components/tooltip/components/_tooltip_divider.scss
new file mode 100644
index 0000000000..ec01d553a5
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/_tooltip_divider.scss
@@ -0,0 +1,4 @@
+.echTooltipDivider {
+  width: 100%;
+  border-bottom: $tableBorder;
+}
diff --git a/packages/charts/src/components/tooltip/components/_tooltip_footer.scss b/packages/charts/src/components/tooltip/components/_tooltip_footer.scss
new file mode 100644
index 0000000000..65aa161ea7
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/_tooltip_footer.scss
@@ -0,0 +1,5 @@
+.echTooltipFooter {
+  font-weight: $euiFontWeightBold;
+  margin-top: 0;
+  padding: $euiSizeXS ($euiSizeXS * 2);
+}
diff --git a/packages/charts/src/components/tooltip/components/_tooltip_header.scss b/packages/charts/src/components/tooltip/components/_tooltip_header.scss
new file mode 100644
index 0000000000..42a940d2c5
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/_tooltip_header.scss
@@ -0,0 +1,5 @@
+.echTooltipHeader {
+  font-weight: $euiFontWeightSemiBold;
+  margin-bottom: 0;
+  padding: $euiSizeXS ($euiSizeXS * 2);
+}
diff --git a/packages/charts/src/components/tooltip/components/_tooltip_prompt.scss b/packages/charts/src/components/tooltip/components/_tooltip_prompt.scss
new file mode 100644
index 0000000000..bf6a782b28
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/_tooltip_prompt.scss
@@ -0,0 +1,28 @@
+$tooltipPromptAnimDelay: 0.5s;
+
+@keyframes promptFadeInDown {
+  100% {
+    opacity: 1;
+    top: 0;
+    height: 26px;
+  }
+}
+
+.echTooltipPrompt {
+  position: relative;
+  width: 100%;
+  //opacity: 0;
+  //top: -26px;
+  //height: 0;
+  //animation: promptFadeInDown 0.5s forwards;
+  //animation-delay: $tooltipPromptAnimDelay;
+  z-index: -1;
+
+  &__content {
+    color: $euiTextSubduedColor;
+    font-style: normal;
+    font-size: 12px;
+    line-height: 26px;
+    padding: 0 $euiSizeS;
+  }
+}
diff --git a/packages/charts/src/components/tooltip/components/tooltip_actions.tsx b/packages/charts/src/components/tooltip/components/tooltip_actions.tsx
new file mode 100644
index 0000000000..3e134e3661
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/tooltip_actions.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { ComponentType, useEffect, useState } from 'react';
+
+import { SeriesIdentifier } from '../../../common/series_id';
+import { BaseDatum, TooltipAction, TooltipSpec, TooltipValue } from '../../../specs';
+import { Datum, renderWithProps } from '../../../utils/common';
+import { TooltipDivider } from './tooltip_divider';
+import { useTooltipContext } from './tooltip_provider';
+
+/** @internal */
+export const TooltipActions = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>({
+  actions,
+  selectionPrompt,
+  actionsLoading,
+  noActionsLoaded,
+}: Pick<TooltipSpec<D, SI>, 'actions' | 'selectionPrompt' | 'actionsLoading' | 'noActionsLoaded'>) => {
+  const { pinned, selected, values, pinTooltip } = useTooltipContext<D, SI>();
+  const syncActions = Array.isArray(actions);
+  const [loading, setLoading] = useState(true);
+  const [loadedActions, setLoadedActions] = useState<TooltipAction<D, SI>[]>(syncActions ? actions : []);
+
+  useEffect(() => {
+    if (pinned && !syncActions) {
+      const fetchActions = async (
+        asyncActions: (s: TooltipValue<D, SI>[]) => Promise<TooltipAction<D, SI>[]> | TooltipAction<D, SI>[],
+      ) => {
+        setLoading(true);
+        setLoadedActions(await asyncActions(selected));
+        setLoading(false);
+      };
+      void fetchActions(actions);
+      return () => {
+        setLoading(true);
+        setLoadedActions([]);
+      };
+    }
+  }, [syncActions, actions, selected, pinned]);
+
+  if (!syncActions) {
+    if (loading) return renderPromptContent(actionsLoading, selected);
+    if (loadedActions.length === 0) return renderPromptContent(noActionsLoaded, selected);
+  }
+
+  if (pinned && syncActions && loadedActions.length === 0) {
+    return null;
+  }
+
+  const visibleActions = loadedActions.filter(({ hide }) => !hide || hide(selected, values));
+
+  if (visibleActions.length === 0) {
+    return renderPromptContent(selectionPrompt, selected);
+  }
+
+  return (
+    <div className="echTooltipActions">
+      <TooltipDivider />
+      {...visibleActions.map(({ onSelect, label, disabled }, i) => {
+        const reason = disabled && disabled(selected, values);
+
+        return (
+          <button
+            className="echTooltipActions__action"
+            key={`${i}`}
+            title={typeof reason === 'string' ? reason : undefined}
+            disabled={Boolean(reason)}
+            onClick={() => {
+              pinTooltip(false, true);
+              // timeout used to close tooltip before calling action
+              setTimeout(() => {
+                onSelect(selected, values);
+              }, 0);
+            }}
+          >
+            {typeof label === 'string' ? label : label(selected, values)}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+function renderPromptContent<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>(
+  content: string | ComponentType<{ selected: TooltipValue<D, SI>[] }>,
+  selected: Array<TooltipValue<D, SI>>,
+) {
+  return (
+    <div className="echTooltipActions">
+      <TooltipDivider />
+      <div className="echTooltipActions__prompt">{renderWithProps(content, { selected })}</div>
+    </div>
+  );
+}
diff --git a/packages/charts/src/components/tooltip/components/tooltip_body.tsx b/packages/charts/src/components/tooltip/components/tooltip_body.tsx
index 6f4af436ac..e988fef5b3 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_body.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_body.tsx
@@ -6,12 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import { Placement as PopperPlacement } from '@popperjs/core';
+import React, { CSSProperties } from 'react';
 
 import { SeriesIdentifier } from '../../../common/series_id';
 import { TooltipValueFormatter, BaseDatum, TooltipSpec, TooltipProps } from '../../../specs';
 import { Datum } from '../../../utils/common';
-import { TooltipInfo } from '../types';
+import { TooltipStyle } from '../../../utils/themes/theme';
+import { SetSelectedTooltipItemsCallback, ToggleSelectedTooltipItemCallback, TooltipInfo } from '../types';
 import { TooltipFooter } from './tooltip_footer';
 import { TooltipHeader } from './tooltip_header';
 import { useTooltipContext } from './tooltip_provider';
@@ -20,12 +22,19 @@ import { TooltipWrapper } from './tooltip_wrapper';
 import { TooltipTableColumn } from './types';
 
 interface TooltipBodyProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>
-  extends Pick<TooltipSpec<D, SI>, 'headerFormatter' | 'header' | 'footer'> {
+  extends Pick<
+      TooltipSpec<D, SI>,
+      'actions' | 'actionPrompt' | 'pinningPrompt' | 'selectionPrompt' | 'actionsLoading' | 'noActionsLoaded'
+    >,
+    Pick<TooltipSpec<D, SI>, 'headerFormatter' | 'header' | 'footer' | 'actionPrompt' | 'selectionPrompt'> {
   visible: boolean;
   info?: TooltipInfo<D, SI>;
+  placement?: PopperPlacement;
   columns: TooltipTableColumn<D, SI>[];
   headerFormatter?: TooltipValueFormatter<D, SI>;
   settings?: TooltipProps<D, SI>;
+  toggleSelected: ToggleSelectedTooltipItemCallback;
+  setSelection: SetSelectedTooltipItemsCallback;
 }
 
 /** @internal */
@@ -37,30 +46,115 @@ export const TooltipBody = <D extends BaseDatum = Datum, SI extends SeriesIdenti
   columns,
   header,
   footer,
+  placement,
+  actions = [],
+  toggleSelected,
+  setSelection,
+  actionPrompt,
+  pinningPrompt,
+  selectionPrompt,
+  actionsLoading,
+  noActionsLoaded,
 }: TooltipBodyProps<D, SI>) => {
-  const { backgroundColor, dir } = useTooltipContext();
+  const { backgroundColor, dir, pinned, selected, theme, actionable } = useTooltipContext<D, SI>();
   if (!info || !visible) {
     return null;
   }
 
+  const wrapperStyles = getStylesFromPlacement(actionable, theme, placement);
+
   if (typeof settings !== 'string' && settings?.customTooltip) {
     const CustomTooltip = settings.customTooltip;
     return (
-      <TooltipWrapper>
-        <CustomTooltip {...info} headerFormatter={headerFormatter} backgroundColor={backgroundColor} dir={dir} />
-      </TooltipWrapper>
+      <div className="echTooltip__outerWrapper" style={wrapperStyles}>
+        <TooltipWrapper
+          actions={actions}
+          actionPrompt={actionPrompt}
+          pinningPrompt={pinningPrompt}
+          selectionPrompt={selectionPrompt}
+          actionsLoading={actionsLoading}
+          noActionsLoaded={noActionsLoaded}
+        >
+          <CustomTooltip
+            {...info}
+            dir={dir}
+            pinned={pinned}
+            selected={selected}
+            setSelection={setSelection}
+            toggleSelected={toggleSelected}
+            headerFormatter={headerFormatter}
+            backgroundColor={backgroundColor}
+          />
+        </TooltipWrapper>
+      </div>
     );
   }
 
   return (
-    <TooltipWrapper>
-      {header ? (
-        <TooltipHeader>{typeof header === 'string' ? header : header(info.values)}</TooltipHeader>
-      ) : (
-        <TooltipHeader header={info.header} formatter={headerFormatter} />
-      )}
-      <TooltipTable columns={columns} items={info.values} />
-      {footer && <TooltipFooter>{typeof footer === 'string' ? footer : footer(info.values)}</TooltipFooter>}
-    </TooltipWrapper>
+    <div className="echTooltip__outerWrapper" style={wrapperStyles}>
+      <TooltipWrapper
+        actions={actions}
+        actionPrompt={actionPrompt}
+        pinningPrompt={pinningPrompt}
+        selectionPrompt={selectionPrompt}
+        actionsLoading={actionsLoading}
+        noActionsLoaded={noActionsLoaded}
+      >
+        {header ? (
+          <TooltipHeader>{typeof header === 'string' ? header : header(info.values)}</TooltipHeader>
+        ) : (
+          <TooltipHeader header={info.header} formatter={headerFormatter} />
+        )}
+        <TooltipTable
+          columns={columns}
+          items={info.values}
+          pinned={pinned}
+          onSelect={toggleSelected}
+          selected={selected}
+        />
+        {footer && <TooltipFooter>{typeof footer === 'string' ? footer : footer(info.values)}</TooltipFooter>}
+      </TooltipWrapper>
+    </div>
   );
 };
+
+function getStylesFromPlacement(
+  actionable: boolean,
+  { maxWidth }: TooltipStyle,
+  placement?: PopperPlacement,
+): CSSProperties | undefined {
+  if (!actionable) return { maxWidth };
+  switch (placement) {
+    case 'left':
+    case 'left-start':
+    case 'left-end':
+    case 'top-end':
+    case 'bottom-end':
+      return {
+        width: maxWidth,
+        justifyContent: 'flex-end',
+      };
+    case 'right':
+    case 'right-start':
+    case 'right-end':
+    case 'top-start':
+    case 'bottom-start':
+      return {
+        width: maxWidth,
+        justifyContent: 'flex-start',
+      };
+    case 'top':
+    case 'bottom':
+      return {
+        width: maxWidth,
+        justifyContent: 'center',
+      };
+    case 'auto':
+    case 'auto-start':
+    case 'auto-end':
+    default:
+      return {
+        width: maxWidth,
+      };
+  }
+}
diff --git a/packages/charts/src/components/tooltip/components/tooltip_divider.tsx b/packages/charts/src/components/tooltip/components/tooltip_divider.tsx
index f08531254c..2724e3ce65 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_divider.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_divider.tsx
@@ -14,5 +14,5 @@ interface TooltipDividerProps {
 
 /** @public */
 export const TooltipDivider = ({ margin }: TooltipDividerProps) => {
-  return <div style={{ margin }} className="echTooltip__divider"></div>;
+  return <div style={{ margin }} className="echTooltipDivider"></div>;
 };
diff --git a/packages/charts/src/components/tooltip/components/tooltip_footer.tsx b/packages/charts/src/components/tooltip/components/tooltip_footer.tsx
index 6cfb635a87..eccd4dae5b 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_footer.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_footer.tsx
@@ -14,5 +14,5 @@ type TooltipFooterProps = PropsWithChildren<{}>;
 
 /** @public */
 export const TooltipFooter = ({ children }: TooltipFooterProps) => {
-  return <div className="echTooltip__footer">{renderComplexChildren(children)}</div>;
+  return <div className="echTooltipFooter">{renderComplexChildren(children)}</div>;
 };
diff --git a/packages/charts/src/components/tooltip/components/tooltip_header.tsx b/packages/charts/src/components/tooltip/components/tooltip_header.tsx
index 3f4521985c..5c51ae5079 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_header.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_header.tsx
@@ -12,6 +12,7 @@ import { SeriesIdentifier } from '../../../common/series_id';
 import { BaseDatum, TooltipValue, TooltipValueFormatter } from '../../../specs';
 import { Datum, renderComplexChildren } from '../../../utils/common';
 import { PropsOrChildrenWithProps } from '../types';
+import { TooltipDivider } from './tooltip_divider';
 
 type TooltipHeaderProps<
   D extends BaseDatum = Datum,
@@ -25,14 +26,24 @@ const TooltipHeaderInner = <D extends BaseDatum = Datum, SI extends SeriesIdenti
   props: TooltipHeaderProps<D, SI>,
 ) => {
   if ('children' in props) {
-    return <div className="echTooltip__header">{renderComplexChildren(props.children)}</div>;
+    return (
+      <>
+        <div className="echTooltipHeader">{renderComplexChildren(props.children)}</div>
+        <TooltipDivider />
+      </>
+    );
   }
   const { header, formatter } = props;
   if (!header || !header.isVisible) return null;
 
   const formattedValue = formatter ? formatter(header) : header.formattedValue;
   if (!formattedValue) return null;
-  return <div className="echTooltip__header">{formattedValue}</div>;
+  return (
+    <>
+      <div className="echTooltipHeader">{formattedValue}</div>
+      <TooltipDivider />
+    </>
+  );
 };
 
 /** @public */
diff --git a/packages/charts/src/components/tooltip/components/tooltip_prompt.tsx b/packages/charts/src/components/tooltip/components/tooltip_prompt.tsx
new file mode 100644
index 0000000000..407b50339a
--- /dev/null
+++ b/packages/charts/src/components/tooltip/components/tooltip_prompt.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { PropsWithChildren } from 'react';
+
+import { TooltipDivider } from './tooltip_divider';
+
+/** @internal */
+export function TooltipPrompt({ children }: PropsWithChildren<{}>) {
+  return (
+    <div className="echTooltipPrompt">
+      <TooltipDivider />
+      <div className="echTooltipPrompt__content">{children}</div>
+    </div>
+  );
+}
diff --git a/packages/charts/src/components/tooltip/components/tooltip_provider.tsx b/packages/charts/src/components/tooltip/components/tooltip_provider.tsx
index 6ccc8eab10..fc75279090 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_provider.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_provider.tsx
@@ -6,30 +6,78 @@
  * Side Public License, v 1.
  */
 
-import React, { PropsWithChildren, useContext } from 'react';
+import React, { PropsWithChildren, Context, useContext } from 'react';
 
-interface TooltipContext {
+import { SeriesIdentifier } from '../../../common/series_id';
+import { BaseDatum, TooltipValue } from '../../../specs';
+import { pinTooltip as pinTooltipAction } from '../../../state/actions/tooltip';
+import { Datum } from '../../../utils/common';
+import { LIGHT_THEME } from '../../../utils/themes/light_theme';
+import { TooltipStyle } from '../../../utils/themes/theme';
+import { PinTooltipCallback } from '../types';
+
+interface TooltipContext<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> {
   backgroundColor: string;
   dir: 'rtl' | 'ltr';
+  maxItems: number;
+  pinned: boolean;
+  actionable: boolean;
+  canPinTooltip: boolean;
+  selected: Array<TooltipValue<D, SI>>;
+  values: TooltipValue<D, SI>[];
+  pinTooltip: PinTooltipCallback;
+  theme: TooltipStyle;
 }
 
 const TooltipContext = React.createContext<TooltipContext>({
   backgroundColor: '#fff',
   dir: 'ltr',
+  maxItems: 5,
+  pinned: false,
+  actionable: false,
+  canPinTooltip: false,
+  selected: [],
+  values: [],
+  pinTooltip: pinTooltipAction,
+  theme: LIGHT_THEME.tooltip,
 });
 
 /** @internal */
-export const useTooltipContext = () => useContext(TooltipContext);
+export const useTooltipContext = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>() =>
+  useContext<TooltipContext<D, SI>>(TooltipContext as unknown as Context<TooltipContext<D, SI>>);
 
-type TooltipProviderProps = PropsWithChildren<TooltipContext>;
+type TooltipProviderProps<
+  D extends BaseDatum = Datum,
+  SI extends SeriesIdentifier = SeriesIdentifier,
+> = PropsWithChildren<TooltipContext<D, SI>>;
 
 /** @internal */
-export const TooltipProvider = ({ backgroundColor, dir, children }: TooltipProviderProps) => {
+export const TooltipProvider = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>({
+  backgroundColor,
+  dir,
+  maxItems,
+  pinned,
+  actionable,
+  canPinTooltip,
+  selected,
+  values,
+  pinTooltip,
+  children,
+  theme,
+}: TooltipProviderProps<D, SI>) => {
   return (
     <TooltipContext.Provider
       value={{
         backgroundColor,
         dir,
+        maxItems,
+        pinned,
+        actionable,
+        canPinTooltip,
+        selected,
+        values,
+        pinTooltip,
+        theme,
       }}
     >
       {children}
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table.tsx b/packages/charts/src/components/tooltip/components/tooltip_table.tsx
index 958c3c417b..27d3127c16 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table.tsx
@@ -12,12 +12,21 @@ import React, { CSSProperties } from 'react';
 import { SeriesIdentifier } from '../../../common/series_id';
 import { BaseDatum, TooltipValue } from '../../../specs';
 import { Datum, isNil } from '../../../utils/common';
-import { PropsOrChildrenWithProps } from '../types';
+import { PropsOrChildrenWithProps, ToggleSelectedTooltipItemCallback } from '../types';
+import { useTooltipContext } from './tooltip_provider';
 import { TooltipTableBody } from './tooltip_table_body';
 import { TooltipTableFooter } from './tooltip_table_footer';
 import { TooltipTableHeader } from './tooltip_table_header';
 import { TooltipTableColumn } from './types';
 
+const TOOLTIP_ITEM_HEIGHT = 20;
+const TOOLTIP_HEADER_HEIGHT = 25;
+const TOOLTIP_FOOTER_HEIGHT = 25;
+/**
+ * Manually synced with `$maxRowColorStripWidth` scss var in [`_tooltip.scss`](packages/charts/src/components/tooltip/_tooltip.scss)
+ */
+const MAX_ROW_COLOR_STRIP_WIDTH = 11;
+
 type TooltipTableProps<
   D extends BaseDatum = Datum,
   SI extends SeriesIdentifier = SeriesIdentifier,
@@ -25,8 +34,16 @@ type TooltipTableProps<
   {
     columns: TooltipTableColumn<D, SI>[];
     items: TooltipValue<D, SI>[];
+    pinned?: boolean;
+    onSelect?: ToggleSelectedTooltipItemCallback;
+    selected?: TooltipValue<D, SI>[];
+  },
+  {
+    /**
+     * Used to defined the column widths, otherwise auto-generated
+     */
+    gridTemplateColumns: CSSProperties['gridTemplateColumns'];
   },
-  {},
   {
     className?: string;
     maxHeight?: CSSProperties['maxHeight'];
@@ -35,19 +52,23 @@ type TooltipTableProps<
 
 /** @public */
 export const TooltipTable = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>({
-  maxHeight,
   className,
   ...props
 }: TooltipTableProps<D, SI>) => {
-  const classes = classNames('echTooltip__table', className, {
-    'echTooltip__table--scrollable': !isNil(maxHeight),
-  });
+  const { theme, maxItems, ...rest } = useTooltipContext<D, SI>();
 
   if ('children' in props) {
+    const { gridTemplateColumns } = props;
+    const classes = classNames('echTooltip__table', className, {
+      'echTooltip__table--noGrid': !gridTemplateColumns,
+    });
+    const maxHeight = props.maxHeight ?? theme.maxTableHeight;
     return (
-      <table className={classes} style={{ maxHeight }}>
-        {props.children}
-      </table>
+      <div className="echTooltip__tableWrapper" style={{ maxHeight }}>
+        <div role="table" className={classes} style={{ gridTemplateColumns }}>
+          {props.children}
+        </div>
+      </div>
     );
   }
 
@@ -55,11 +76,36 @@ export const TooltipTable = <D extends BaseDatum = Datum, SI extends SeriesIdent
     return !(typeof hidden === 'boolean' ? hidden : hidden?.(props.items) ?? false);
   });
 
+  const { items, pinned = false, onSelect, selected = [] } = { ...rest, ...props };
+  const gridTemplateColumns = columns
+    .map(({ type, width }) => width ?? (type === 'color' ? MAX_ROW_COLOR_STRIP_WIDTH : 'auto'))
+    .map((width) => (typeof width === 'number' ? `${width}px` : width))
+    .join(' ');
+
   return (
-    <table className={classes} style={{ maxHeight }}>
-      <TooltipTableHeader columns={columns} items={props.items} />
-      <TooltipTableBody columns={columns} items={props.items} />
-      <TooltipTableFooter columns={columns} items={props.items} />
-    </table>
+    <div
+      className="echTooltip__tableWrapper"
+      style={{ maxHeight: getMaxHeight(pinned, columns, theme.maxTableHeight, props.maxHeight, maxItems) }}
+    >
+      <div role="table" className={classNames('echTooltip__table', className)} style={{ gridTemplateColumns }}>
+        <TooltipTableHeader columns={columns} items={props.items} />
+        <TooltipTableBody columns={columns} items={items} pinned={pinned} onSelect={onSelect} selected={selected} />
+        <TooltipTableFooter columns={columns} items={props.items} />
+      </div>
+    </div>
   );
 };
+
+function getMaxHeight<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>(
+  pinned: boolean,
+  columns: TooltipTableColumn<D, SI>[],
+  maxHeightFallback: CSSProperties['maxHeight'],
+  maxHeight?: CSSProperties['maxHeight'],
+  maxItems?: number,
+): CSSProperties['maxHeight'] {
+  if (pinned || maxHeight || isNil(maxItems)) return maxHeight ?? maxHeightFallback;
+  const headerHeight = +columns.some((c) => c.header) * TOOLTIP_HEADER_HEIGHT;
+  const bodyHeight = (Math.max(maxItems, 1) + 0.5) * TOOLTIP_ITEM_HEIGHT;
+  const footerHeight = +columns.some((c) => c.footer) * TOOLTIP_FOOTER_HEIGHT;
+  return headerHeight + bodyHeight + footerHeight;
+}
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table_body.tsx b/packages/charts/src/components/tooltip/components/tooltip_table_body.tsx
index 307948c788..9202179133 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table_body.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table_body.tsx
@@ -7,12 +7,12 @@
  */
 
 import classNames from 'classnames';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useRef } from 'react';
 
 import { SeriesIdentifier } from '../../../common/series_id';
 import { BaseDatum, TooltipValue } from '../../../specs';
 import { Datum } from '../../../utils/common';
-import { PropsOrChildrenWithProps } from '../types';
+import { PropsOrChildrenWithProps, ToggleSelectedTooltipItemCallback } from '../types';
 import { TooltipTableCell } from './tooltip_table_cell';
 import { TooltipTableColorCell } from './tooltip_table_color_cell';
 import { TooltipTableRow } from './tooltip_table_row';
@@ -25,6 +25,9 @@ type TooltipTableBodyProps<
   {
     items: TooltipValue<D, SI>[];
     columns: TooltipTableColumn<D, SI>[];
+    pinned?: boolean;
+    onSelect?: ToggleSelectedTooltipItemCallback;
+    selected: TooltipValue<D, SI>[];
   },
   {},
   {
@@ -37,25 +40,41 @@ export const TooltipTableBody = <D extends BaseDatum = Datum, SI extends SeriesI
   className,
   ...props
 }: TooltipTableBodyProps<D, SI>) => {
-  const classes = classNames('echTooltip__tableBody', className);
+  const tableBodyRef = useRef<HTMLTableSectionElement | null>(null);
+
   if ('children' in props) {
-    return <tbody className={classes}>{props.children}</tbody>;
+    const classes = classNames('echTooltip__tableBody', className);
+    return (
+      <div role="rowgroup" className={classes}>
+        {props.children}
+      </div>
+    );
   }
 
+  const { items, pinned, selected, onSelect, columns } = props;
+  const classes = classNames('echTooltip__tableBody');
+  // TODO: find a better way determine this from the data
+  const allHighlighted = items.every((i) => i.isHighlighted);
+
   return (
-    <tbody className={classes}>
-      {props.items.map((item, i) => {
-        const { isHighlighted, isVisible } = item;
+    <div role="rowgroup" className={classes} ref={tableBodyRef}>
+      {items.map((item) => {
+        const { isHighlighted, isVisible, displayOnly } = item;
         if (!isVisible) return null;
         return (
-          <TooltipTableRow key={i} isHighlighted={isHighlighted}>
-            {props.columns.map((column, j) => {
+          <TooltipTableRow
+            key={`${item.seriesIdentifier.key}-${item.label}-${item.value}`}
+            isHighlighted={!pinned && !allHighlighted && isHighlighted}
+            isSelected={pinned && selected.includes(item)}
+            onSelect={displayOnly || !onSelect ? undefined : () => onSelect(item)}
+          >
+            {columns.map((column, j) => {
               return renderCellContent(item, column, column.id ?? `${column.type}-${j}`);
             })}
           </TooltipTableRow>
         );
       })}
-    </tbody>
+    </div>
   );
 };
 
@@ -77,11 +96,11 @@ function renderCellContent<D extends BaseDatum = Datum, SI extends SeriesIdentif
   key: string,
 ): ReactNode {
   if (column.type === 'color') {
-    return <TooltipTableColorCell color={item.color} key={key} />;
+    return <TooltipTableColorCell displayOnly={item.displayOnly} color={item.color} key={key} />;
   }
 
   return (
-    <TooltipTableCell style={getCellStyles(column)} key={key}>
+    <TooltipTableCell truncate={column.truncate} style={getCellStyles(column)} key={key}>
       {column.cell(item)}
     </TooltipTableCell>
   );
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table_cell.tsx b/packages/charts/src/components/tooltip/components/tooltip_table_cell.tsx
index 6239aeb3f1..7930ef0f14 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table_cell.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table_cell.tsx
@@ -9,28 +9,35 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 
+import { isNonNullablePrimitiveValue } from '../../../utils/common';
 import { TooltipCellStyle } from './types';
 
 /** @public */
 export type TooltipTableCellProps = PropsWithChildren<{
   tagName?: 'td' | 'th';
+  truncate?: boolean;
   className?: string;
+  title?: string;
   style?: TooltipCellStyle;
 }>;
 
 /** @public */
-export const TooltipTableCell = ({ style, tagName = 'td', className, children }: TooltipTableCellProps) => {
-  const classes = classNames('echTooltip__tableCell', className);
-  if (tagName === 'th') {
-    return (
-      <th className={classes} style={style}>
-        {children}
-      </th>
-    );
-  }
+export const TooltipTableCell = ({
+  style,
+  truncate = false,
+  tagName = 'td',
+  className,
+  children,
+  title: manualTitle,
+}: TooltipTableCellProps) => {
+  const classes = classNames('echTooltip__tableCell', className, {
+    'echTooltip__tableCell--truncate': truncate,
+  });
+
+  const title = manualTitle ?? (truncate && isNonNullablePrimitiveValue(children) ? `${children}` : undefined);
   return (
-    <td className={classes} style={style}>
+    <div role={tagName === 'th' ? 'rowheader' : 'gridcell'} className={classes} style={style} title={title}>
       {children}
-    </td>
+    </div>
   );
 };
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx b/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx
index 4a4fc5c2b5..b10ba9bfaf 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table_color_cell.tsx
@@ -9,34 +9,61 @@
 import classNames from 'classnames';
 import React from 'react';
 
+import { combineColors, highContrastColor } from '../../../common/color_calcs';
+import { colorToRgba, RGBATupleToString } from '../../../common/color_library_wrappers';
+import { Color, Colors } from '../../../common/colors';
 import { useTooltipContext } from './tooltip_provider';
 import { TooltipTableCell, TooltipTableCellProps } from './tooltip_table_cell';
 
 /** @public */
-export type ColorStripCellProps = Omit<TooltipTableCellProps, 'children'> & {
+export type ColorStripCellProps = Omit<TooltipTableCellProps, 'children' | 'width'> & {
   color?: string;
+  displayOnly?: boolean;
 };
 
 /**
  * Renders color strip column cell
  * @public
  */
-export function TooltipTableColorCell({ color, className, ...cellProps }: ColorStripCellProps): JSX.Element | null {
-  const { backgroundColor } = useTooltipContext();
+export function TooltipTableColorCell({
+  color,
+  className,
+  displayOnly,
+  ...cellProps
+}: ColorStripCellProps): JSX.Element | null {
+  const { backgroundColor, theme } = useTooltipContext();
+
+  const getDotColor = (stripColor: string): Color => {
+    if (color === Colors.Transparent.keyword) {
+      return theme.defaultDotColor;
+    }
+    const foregroundRGBA = colorToRgba(stripColor === Colors.Transparent.keyword ? backgroundColor : stripColor);
+    const backgroundRGBA = colorToRgba(backgroundColor);
+    const blendedFgBg = combineColors(foregroundRGBA, backgroundRGBA);
+    return RGBATupleToString(highContrastColor(blendedFgBg, 'WCAG3'));
+  };
+
+  const renderColorStrip = () => {
+    if (!color) return null;
+    const dotColor = getDotColor(color);
+
+    return (
+      <>
+        <div className="echTooltip__colorStrip--bg" style={{ backgroundColor }} />
+        <div className="echTooltip__colorStrip" style={{ backgroundColor: color, color: dotColor }} />
+        <div className="echTooltip__colorStrip--spacer" />
+      </>
+    );
+  };
+
   return (
     <TooltipTableCell
       {...cellProps}
       className={classNames('echTooltip__colorCell', className, {
-        'echTooltip__colorCell--empty': !color,
+        'echTooltip__colorCell--static': displayOnly,
       })}
     >
-      {color ? (
-        <>
-          <div className="echTooltip__colorStrip" style={{ backgroundColor }} />
-          <div className="echTooltip__colorStrip" style={{ backgroundColor: color }} />
-          <div className="echTooltip__colorStripSpacer" />
-        </>
-      ) : null}
+      {renderColorStrip()}
     </TooltipTableCell>
   );
 }
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table_footer.tsx b/packages/charts/src/components/tooltip/components/tooltip_table_footer.tsx
index 9918160333..abfc775559 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table_footer.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table_footer.tsx
@@ -7,7 +7,7 @@
  */
 
 import classNames from 'classnames';
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import { SeriesIdentifier } from '../../../common/series_id';
 import { BaseDatum, TooltipValue } from '../../../specs';
@@ -29,30 +29,28 @@ type TooltipTableFooterProps<
   {},
   {
     className?: string;
-    maxHeight?: CSSProperties['maxHeight'];
   }
 >;
 
 /** @public */
 export const TooltipTableFooter = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>({
-  maxHeight,
   className,
   ...props
 }: TooltipTableFooterProps<D, SI>) => {
   const classes = classNames('echTooltip__tableFooter', className);
   if ('children' in props) {
     return (
-      <tfoot className={classes} style={{ maxHeight }}>
+      <div role="rowgroup" className={classes}>
         {props.children}
-      </tfoot>
+      </div>
     );
   }
 
   if (props.columns.every((c) => !c.footer)) return null;
 
   return (
-    <tfoot className={classes}>
-      <TooltipTableRow maxHeight={maxHeight}>
+    <div role="rowgroup" className={classes}>
+      <TooltipTableRow>
         {props.columns.map(({ style, id, className: cn, type, footer }, i) => {
           const key = id ?? `${type}-${i}`;
           if (type === 'color') return <TooltipTableColorCell className={cn} style={style} key={key} />;
@@ -63,6 +61,6 @@ export const TooltipTableFooter = <D extends BaseDatum = Datum, SI extends Serie
           );
         })}
       </TooltipTableRow>
-    </tfoot>
+    </div>
   );
 };
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table_header.tsx b/packages/charts/src/components/tooltip/components/tooltip_table_header.tsx
index e2a4f5a954..6729df637d 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table_header.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table_header.tsx
@@ -7,7 +7,7 @@
  */
 
 import classNames from 'classnames';
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import { SeriesIdentifier } from '../../../common/series_id';
 import { BaseDatum, TooltipValue } from '../../../specs';
@@ -29,29 +29,27 @@ type TooltipTableHeaderProps<
   {},
   {
     className?: string;
-    maxHeight?: CSSProperties['maxHeight'];
   }
 >;
 
 /** @public */
 export const TooltipTableHeader = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>({
-  maxHeight,
   className,
   ...props
 }: TooltipTableHeaderProps<D, SI>) => {
   const classes = classNames('echTooltip__tableHeader', className);
   if ('children' in props) {
     return (
-      <thead className={classes} style={{ maxHeight }}>
+      <div role="rowgroup" className={classes}>
         {props.children}
-      </thead>
+      </div>
     );
   }
 
   if (props.columns.every((c) => !c.header)) return null;
 
   return (
-    <thead className={classes} style={{ maxHeight }}>
+    <div role="rowgroup" className={classes}>
       <TooltipTableRow>
         {props.columns.map(({ header, style, id, className: cn, type }, i) => {
           const key = id ?? `${type}-${i}`;
@@ -63,6 +61,6 @@ export const TooltipTableHeader = <D extends BaseDatum = Datum, SI extends Serie
           );
         })}
       </TooltipTableRow>
-    </thead>
+    </div>
   );
 };
diff --git a/packages/charts/src/components/tooltip/components/tooltip_table_row.tsx b/packages/charts/src/components/tooltip/components/tooltip_table_row.tsx
index c8645928c6..ee66fa7f2d 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_table_row.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_table_row.tsx
@@ -7,26 +7,48 @@
  */
 
 import classNames from 'classnames';
-import React, { CSSProperties, PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { isNil } from '../../../utils/common';
+import { useTooltipContext } from './tooltip_provider';
 
 type TooltipTableRowProps = PropsWithChildren<{
+  id?: string;
   className?: string;
   isHighlighted?: boolean;
-  maxHeight?: CSSProperties['maxHeight'];
+  isSelected?: boolean;
+  onSelect?: () => void;
 }>;
 
 /** @public */
-export const TooltipTableRow = ({ maxHeight, isHighlighted = false, children, className }: TooltipTableRowProps) => {
+export const TooltipTableRow = ({
+  id,
+  isHighlighted = false,
+  isSelected = false,
+  children,
+  onSelect,
+  className,
+}: TooltipTableRowProps) => {
+  const { actionable } = useTooltipContext();
+
+  const isSelectable = actionable && !isNil(onSelect);
   const classes = classNames('echTooltip__tableRow', className, {
-    'echTooltip__tableRow--scrollable': !isNil(maxHeight),
     'echTooltip__tableRow--highlighted': isHighlighted,
+    'echTooltip__tableRow--selected': isSelected,
+    'echTooltip__tableRow--selectable': isSelectable,
   });
 
   return (
-    <tr className={classes} style={{ maxHeight }}>
+    // cannot focus row using display: contents to structure grid
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    <div
+      role="row"
+      id={id}
+      className={classes}
+      onClick={isSelectable ? onSelect : undefined}
+      onKeyPress={isSelectable ? onSelect : undefined}
+    >
       {children}
-    </tr>
+    </div>
   );
 };
diff --git a/packages/charts/src/components/tooltip/components/tooltip_wrapper.tsx b/packages/charts/src/components/tooltip/components/tooltip_wrapper.tsx
index ef7c85bae7..18faf95b26 100644
--- a/packages/charts/src/components/tooltip/components/tooltip_wrapper.tsx
+++ b/packages/charts/src/components/tooltip/components/tooltip_wrapper.tsx
@@ -7,24 +7,82 @@
  */
 
 import classNames from 'classnames';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import { renderComplexChildren } from '../../../utils/common';
+import { SeriesIdentifier } from '../../../common/series_id';
+import { BaseDatum } from '../../../specs';
+import { TooltipSpec } from '../../../specs/tooltip';
+import { Datum, renderComplexChildren } from '../../../utils/common';
+import { TooltipActions } from './tooltip_actions';
+import { TooltipPrompt } from './tooltip_prompt';
 import { useTooltipContext } from './tooltip_provider';
 
-type TooltipWrapperProps = PropsWithChildren<{
-  className?: string;
-}>;
+type TooltipWrapperProps<
+  D extends BaseDatum = Datum,
+  SI extends SeriesIdentifier = SeriesIdentifier,
+> = PropsWithChildren<
+  {
+    className?: string;
+  } & Pick<
+    TooltipSpec<D, SI>,
+    'actions' | 'actionPrompt' | 'pinningPrompt' | 'selectionPrompt' | 'actionsLoading' | 'noActionsLoaded'
+  >
+>;
 
 /** @internal */
-export const TooltipWrapper = ({ children, className }: TooltipWrapperProps) => {
-  const { dir } = useTooltipContext();
+export const TooltipWrapper = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>({
+  children,
+  className,
+  actions,
+  actionPrompt,
+  pinningPrompt,
+  selectionPrompt,
+  actionsLoading,
+  noActionsLoaded,
+}: TooltipWrapperProps<D, SI>) => {
+  const { dir, pinned, canPinTooltip, selected, theme, actionable } = useTooltipContext<D, SI>();
+
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const [minWidth, setMinWidth] = useState(0);
+
+  useEffect(() => {
+    // Capture initial unpinned tooltip width
+    window.requestAnimationFrame(() => {
+      if (tooltipRef.current) {
+        const { width } = tooltipRef.current.getBoundingClientRect();
+        setMinWidth(width);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    // Capture pinned tooltip with on change
+    if (pinned && tooltipRef.current && minWidth < theme.maxWidth) {
+      const { width } = tooltipRef.current.getBoundingClientRect();
+      if (width > minWidth) setMinWidth(width);
+    }
+  }, [selected, pinned, minWidth, theme.maxWidth]);
 
   return (
-    <div className={classNames('echTooltip', className)} dir={dir}>
+    <div
+      className={classNames('echTooltip', className, { 'echTooltip--pinned': pinned })}
+      dir={dir}
+      ref={tooltipRef}
+      style={{ minWidth }}
+      onClick={(e) => e.stopPropagation()} // block propagation of tooltip click
+      onKeyPress={(e) => e.stopPropagation()} // block propagation of tooltip click
+    >
       {renderComplexChildren(children)}
-      {/* TODO: add when tooltip is sticky */}
-      {/* <div className="echTooltip__stickyAction">Click to stick tooltip</div> */}
+      {!canPinTooltip ? null : pinned ? (
+        <TooltipActions
+          actions={actions}
+          actionsLoading={actionsLoading}
+          noActionsLoaded={noActionsLoaded}
+          selectionPrompt={selectionPrompt}
+        />
+      ) : (
+        <TooltipPrompt>{actionable ? actionPrompt : pinningPrompt}</TooltipPrompt>
+      )}
     </div>
   );
 };
diff --git a/packages/charts/src/components/tooltip/components/types.ts b/packages/charts/src/components/tooltip/components/types.ts
index c9b93325ec..d81bf9b8d5 100644
--- a/packages/charts/src/components/tooltip/components/types.ts
+++ b/packages/charts/src/components/tooltip/components/types.ts
@@ -50,6 +50,15 @@ export type TooltipTableColumnBase<D extends BaseDatum = Datum, SI extends Serie
    * Limited styles to apply to table cells within column (i.e. `td` or `th`)
    */
   style?: TooltipCellStyle;
+  /**
+   * truncates cell content sharing the available width with other columns.
+   * Set width to control column width for truncating.
+   */
+  truncate?: boolean;
+  /**
+   * Width of column used to generate [gridTemplateColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
+   */
+  width?: CSSProperties['gridTemplateColumns'];
 };
 
 /**
diff --git a/packages/charts/src/components/tooltip/tooltip.tsx b/packages/charts/src/components/tooltip/tooltip.tsx
index 121765f377..a6a46680a7 100644
--- a/packages/charts/src/components/tooltip/tooltip.tsx
+++ b/packages/charts/src/components/tooltip/tooltip.tsx
@@ -6,15 +6,22 @@
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useMemo, memo, RefObject } from 'react';
+import { Placement as PopperPlacement } from '@popperjs/core';
+import React, { useEffect, useMemo, memo, RefObject, useState } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
 import { Colors } from '../../common/colors';
 import { SeriesIdentifier } from '../../common/series_id';
-import { BaseDatum, SettingsSpec, TooltipProps, TooltipSpec } from '../../specs';
+import { BaseDatum, DEFAULT_TOOLTIP_SPEC, SettingsSpec, TooltipProps, TooltipSpec, TooltipValue } from '../../specs';
 import { onPointerMove as onPointerMoveAction } from '../../state/actions/mouse';
+import {
+  toggleSelectedTooltipItem as toggleSelectedTooltipItemAction,
+  setSelectedTooltipItems as setSelectedTooltipItemsAction,
+  pinTooltip as pinTooltipAction,
+} from '../../state/actions/tooltip';
 import { BackwardRef, GlobalChartState } from '../../state/chart_state';
+import { isPinnableTooltip } from '../../state/selectors/can_pin_tooltip';
 import { getChartRotationSelector } from '../../state/selectors/get_chart_rotation';
 import { getChartThemeSelector } from '../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../state/selectors/get_internal_is_intialized';
@@ -22,28 +29,45 @@ import { getInternalIsTooltipVisibleSelector } from '../../state/selectors/get_i
 import { getInternalTooltipAnchorPositionSelector } from '../../state/selectors/get_internal_tooltip_anchor_position';
 import { getInternalTooltipInfoSelector } from '../../state/selectors/get_internal_tooltip_info';
 import { getSettingsSpecSelector } from '../../state/selectors/get_settings_spec';
+import { getTooltipSelectedItems } from '../../state/selectors/get_tooltip_selected_items';
 import { getTooltipSpecSelector } from '../../state/selectors/get_tooltip_spec';
 import { Datum, hasMostlyRTLItems, isDefined, Rotation } from '../../utils/common';
+import { LIGHT_THEME } from '../../utils/themes/light_theme';
+import { TooltipStyle } from '../../utils/themes/theme';
 import { AnchorPosition, Placement, TooltipPortal, TooltipPortalSettings } from '../portal';
 import { TooltipBody } from './components/tooltip_body';
 import { TooltipProvider } from './components/tooltip_provider';
 import { TooltipTableColumn } from './components/types';
-import { TooltipInfo } from './types';
+import {
+  PinTooltipCallback,
+  SetSelectedTooltipItemsCallback,
+  ToggleSelectedTooltipItemCallback,
+  TooltipInfo,
+} from './types';
 
 interface TooltipDispatchProps {
   onPointerMove: typeof onPointerMoveAction;
+  toggleSelectedTooltipItem: ToggleSelectedTooltipItemCallback;
+  setSelectedTooltipItems: SetSelectedTooltipItemsCallback;
+  pinTooltip: PinTooltipCallback;
 }
 
-interface TooltipStateProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>
-  extends Pick<TooltipSpec<D, SI>, 'headerFormatter' | 'header' | 'footer'> {
+interface TooltipStateProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> {
+  tooltip: TooltipSpec<D, SI>;
   zIndex: number;
   visible: boolean;
+  isExternal: boolean;
   position: AnchorPosition | null;
   info?: TooltipInfo<D, SI>;
   settings?: TooltipProps<D, SI>;
   rotation: Rotation;
   chartId: string;
+  canPinTooltip: boolean;
   backgroundColor: string;
+  pinned: boolean;
+  selected: TooltipValue<D, SI>[];
+  tooltipTheme: TooltipStyle;
+  isBrushing: boolean;
 }
 
 interface TooltipOwnProps {
@@ -59,24 +83,48 @@ export type TooltipComponentProps<
 
 /** @internal */
 export const TooltipComponent = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>({
+  tooltip: {
+    header,
+    footer,
+    actions,
+    headerFormatter,
+    actionPrompt,
+    pinningPrompt,
+    selectionPrompt,
+    actionsLoading,
+    noActionsLoaded,
+    maxVisibleTooltipItems,
+  },
   anchorRef,
   info,
   zIndex,
-  headerFormatter,
   position,
   getChartContainerRef,
   settings,
+  tooltipTheme,
   visible,
   rotation,
   chartId,
   onPointerMove,
   backgroundColor,
-  header,
-  footer,
+  pinned,
+  selected,
+  toggleSelectedTooltipItem,
+  setSelectedTooltipItems,
+  pinTooltip,
+  canPinTooltip,
+  isBrushing,
 }: TooltipComponentProps<D, SI>) => {
+  const [computedPlacement, setComputedPlacement] = useState<PopperPlacement | undefined>(settings?.placement);
   const chartRef = getChartContainerRef();
 
-  const handleScroll = () => {
+  const handleScroll = (e: Event) => {
+    const target = e.target as Element;
+    if (target.classList.contains('echTooltip__tableBody')) {
+      // catch scroll when scrolling on tableBody
+      e.stopImmediatePropagation();
+      return;
+    }
     // TODO: handle scroll cursor update
     onPointerMove({ x: -1, y: -1 }, Date.now());
   };
@@ -105,7 +153,7 @@ export const TooltipComponent = <D extends BaseDatum = Datum, SI extends SeriesI
     };
   }, [settings, chartRef, rotation]);
 
-  if (!visible) {
+  if (!visible || isBrushing) {
     return null;
   }
 
@@ -122,7 +170,13 @@ export const TooltipComponent = <D extends BaseDatum = Datum, SI extends SeriesI
     {
       id: 'label',
       type: 'custom',
-      cell: ({ label }) => <span className="echTooltip__label">{label}</span>,
+      truncate: true,
+      cell: ({ label }) => (
+        <span className="echTooltip__label" title={label}>
+          {label}
+        </span>
+      ),
+      hidden: (items) => items.every(({ label }) => !label),
       style: {
         textAlign: 'left',
       },
@@ -135,6 +189,10 @@ export const TooltipComponent = <D extends BaseDatum = Datum, SI extends SeriesI
           {formattedValue}
         </span>
       ),
+      // truncation is fine for values  due to the grid configuration: label-value  as auto-auto.
+      // The value will be truncated at 50% of the max tooltip width (at ~125px) only if both exceed the 50% of the available space.
+      // It got a plenty of space to render correctly any number even with no formatting
+      truncate: true,
       style: {
         textAlign: 'right',
       },
@@ -151,6 +209,8 @@ export const TooltipComponent = <D extends BaseDatum = Datum, SI extends SeriesI
     },
   ];
 
+  const hideActions = (info?.disableActions ?? false) || info?.values.every((v) => v.displayOnly);
+
   return (
     <TooltipPortal
       scope="MainTooltip"
@@ -165,8 +225,20 @@ export const TooltipComponent = <D extends BaseDatum = Datum, SI extends SeriesI
       settings={popperSettings}
       chartId={chartId}
       visible={visible}
+      onPlacementChange={setComputedPlacement}
     >
-      <TooltipProvider backgroundColor={backgroundColor} dir={isMostlyRTL ? 'rtl' : 'ltr'}>
+      <TooltipProvider
+        backgroundColor={backgroundColor}
+        dir={isMostlyRTL ? 'rtl' : 'ltr'}
+        pinned={pinned}
+        actionable={actions.length > 0 || !Array.isArray(actions)}
+        canPinTooltip={canPinTooltip}
+        selected={selected}
+        values={info?.values ?? []}
+        pinTooltip={pinTooltip}
+        theme={tooltipTheme}
+        maxItems={maxVisibleTooltipItems}
+      >
         <TooltipBody
           info={info}
           columns={columns}
@@ -175,6 +247,15 @@ export const TooltipComponent = <D extends BaseDatum = Datum, SI extends SeriesI
           visible={visible}
           header={header}
           footer={footer}
+          placement={computedPlacement}
+          toggleSelected={toggleSelectedTooltipItem}
+          setSelection={setSelectedTooltipItems}
+          actions={hideActions || !canPinTooltip ? [] : actions}
+          actionPrompt={actionPrompt}
+          pinningPrompt={pinningPrompt}
+          selectionPrompt={selectionPrompt}
+          actionsLoading={actionsLoading}
+          noActionsLoaded={noActionsLoaded}
         />
       </TooltipProvider>
     </TooltipPortal>
@@ -196,38 +277,58 @@ function getTooltipSettings(
   };
 }
 
-const HIDDEN_TOOLTIP_PROPS = {
+const HIDDEN_TOOLTIP_PROPS: TooltipStateProps = {
+  tooltip: DEFAULT_TOOLTIP_SPEC,
   zIndex: 0,
   visible: false,
+  isExternal: false,
   info: undefined,
   position: null,
-  headerFormatter: undefined,
   settings: {},
   rotation: 0 as Rotation,
   chartId: '',
+  canPinTooltip: false,
   backgroundColor: Colors.Transparent.keyword,
+  pinned: false,
+  selected: [],
+  tooltipTheme: LIGHT_THEME.tooltip,
+  isBrushing: false,
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): TooltipDispatchProps =>
-  bindActionCreators({ onPointerMove: onPointerMoveAction }, dispatch);
+  bindActionCreators(
+    {
+      onPointerMove: onPointerMoveAction,
+      toggleSelectedTooltipItem: toggleSelectedTooltipItemAction,
+      setSelectedTooltipItems: setSelectedTooltipItemsAction,
+      pinTooltip: pinTooltipAction,
+    },
+    dispatch,
+  );
 
-const mapStateToPropsBasic = (state: GlobalChartState): Omit<TooltipStateProps, 'visible' | 'position' | 'info'> => {
+type BasicTooltipProps = Omit<
+  TooltipStateProps,
+  'visible' | 'position' | 'info' | 'pinned' | 'selected' | 'canPinTooltip'
+>;
+const mapStateToPropsBasic = (state: GlobalChartState): BasicTooltipProps => {
   const tooltip = getTooltipSpecSelector(state);
+  const {
+    background: { color: backgroundColor },
+    tooltip: tooltipTheme,
+  } = getChartThemeSelector(state);
+  const { isExternal } = getInternalIsTooltipVisibleSelector(state);
   return getInternalIsInitializedSelector(state) !== InitStatus.Initialized
     ? HIDDEN_TOOLTIP_PROPS
     : {
+        tooltip,
+        isExternal,
+        isBrushing: false,
         zIndex: state.zIndex,
-        headerFormatter: tooltip.headerFormatter,
-        settings: getTooltipSettings(
-          tooltip,
-          getSettingsSpecSelector(state),
-          getInternalIsTooltipVisibleSelector(state).isExternal,
-        ),
-        header: tooltip.header,
-        footer: tooltip.footer,
+        settings: getTooltipSettings(tooltip, getSettingsSpecSelector(state), isExternal),
+        tooltipTheme,
         rotation: getChartRotationSelector(state),
         chartId: state.chartId,
-        backgroundColor: getChartThemeSelector(state).background.color,
+        backgroundColor,
       };
 };
 
@@ -239,6 +340,10 @@ const mapStateToProps = (state: GlobalChartState): TooltipStateProps =>
         visible: getInternalIsTooltipVisibleSelector(state).visible,
         position: getInternalTooltipAnchorPositionSelector(state),
         info: getInternalTooltipInfoSelector(state),
+        pinned: state.interactions.tooltip.pinned,
+        selected: getTooltipSelectedItems(state),
+        canPinTooltip: isPinnableTooltip(state),
+        isBrushing: state.interactions.pointer.dragging,
       };
 
 /** @internal */
diff --git a/packages/charts/src/components/tooltip/types.ts b/packages/charts/src/components/tooltip/types.ts
index 1dd0ef2025..3e264983fc 100644
--- a/packages/charts/src/components/tooltip/types.ts
+++ b/packages/charts/src/components/tooltip/types.ts
@@ -26,6 +26,13 @@ export interface TooltipInfo<D extends BaseDatum = Datum, SI extends SeriesIdent
    * On XYAxis chart correspond to the set of y values for each series
    */
   values: TooltipValue<D, SI>[];
+  /**
+   * Internal flag to disable tooltip actions. Needed for heatmap to hide actions.
+   *
+   * TODO: replace this flag with better internal tooltip info structures
+   * @internal
+   */
+  disableActions?: boolean;
 }
 
 /**
@@ -36,7 +43,39 @@ export interface CustomTooltipProps<D extends BaseDatum = Datum, SI extends Seri
   extends TooltipInfo<D, SI> {
   headerFormatter?: TooltipValueFormatter<D, SI>;
   dir: 'ltr' | 'rtl';
+
+  /**
+   * Background color for use with contrast ratios
+   */
   backgroundColor: string;
+
+  /**
+   * Tooltip is pinned
+   */
+  pinned: boolean;
+
+  /**
+   * Selected items - For use with actions
+   *
+   *
+   * TODO: permit other values than TooltipValue types
+   */
+  selected: TooltipValue<D, SI>[];
+
+  /**
+   * Toggles selected items - For use with actions
+   *
+   *
+   * TODO: permit other values than TooltipValue types
+   */
+  toggleSelected: (item: TooltipValue<D, SI>) => void;
+
+  /**
+   * Allows setting the selected items - For use with actions
+   *
+   * TODO: permit other values than TooltipValue types
+   */
+  setSelection: (items: TooltipValue<D, SI>[]) => void;
 }
 
 /**
@@ -92,3 +131,10 @@ export type PropsOrChildrenWithProps<
 export type Neverify<T extends Record<string, unknown>> = {
   [Key in keyof T]?: never;
 };
+
+/** @public */
+export type ToggleSelectedTooltipItemCallback = (item: TooltipValue<any, SeriesIdentifier>) => any;
+/** @public */
+export type SetSelectedTooltipItemsCallback = (items: TooltipValue<any, SeriesIdentifier>[]) => any;
+/** @public */
+export type PinTooltipCallback = (pinned: boolean, resetPointer?: boolean) => any;
diff --git a/packages/charts/src/specs/tooltip.ts b/packages/charts/src/specs/tooltip.ts
index 71089f4936..350e550425 100644
--- a/packages/charts/src/specs/tooltip.ts
+++ b/packages/charts/src/specs/tooltip.ts
@@ -6,10 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
-import { BaseDatum, SettingsSpec, Spec } from '.';
 import { ChartType } from '../chart_types';
+import { BaseDatum } from '../chart_types/specs';
 import { Color } from '../common/colors';
 import { SeriesIdentifier } from '../common/series_id';
 import { TooltipPortalSettings } from '../components/portal';
@@ -18,6 +18,8 @@ import { buildSFProps, SFProps, useSpecFactory } from '../state/spec_factory';
 import { Accessor } from '../utils/accessor';
 import { Datum, stripUndefined } from '../utils/common';
 import { SpecType, TooltipStickTo, TooltipType } from './constants';
+import { Spec } from './index';
+import { SettingsSpec } from './settings';
 
 /**
  * This interface describe the properties of single value shown in the tooltip
@@ -64,12 +66,17 @@ export interface TooltipValue<D extends BaseDatum = Datum, SI extends SeriesIden
    * The accessor linked to the current tooltip value
    */
   valueAccessor?: Accessor<D>;
-
   /**
    * The datum associated with the current tooltip value
    * Maybe not available
    */
   datum?: D;
+  /**
+   * Internal flag used to simplify interactions for heatmap tooltip
+   * TODO: replace this flag with better internal tooltip info structures
+   * @internal
+   */
+  displayOnly?: boolean;
 }
 
 /**
@@ -104,6 +111,30 @@ export function getTooltipType(tooltip: TooltipSpec, settings: SettingsSpec, ext
   return visible ? TooltipType.VerticalCursor : TooltipType.None;
 }
 
+/**
+ * Tooltip action parameters
+ * @public
+ */
+export type TooltipAction<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = {
+  /**
+   * Clickable label to display action
+   */
+  label: string | ((selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => ReactNode);
+  /**
+   * Hides action from list
+   */
+  hide?: (selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => boolean;
+  /**
+   * Disables action when true or string description is passed
+   * If a string is passed, it will be used as the title to display reason for disablement
+   */
+  disabled?: (selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => boolean | string;
+  /**
+   * Callback trigger when action is selected
+   */
+  onSelect: (selected: TooltipValue<D, SI>[], allItems: TooltipValue<D, SI>[]) => void;
+};
+
 /**
  * Spec used to configure tooltip for chart
  * @public
@@ -164,6 +195,48 @@ export interface TooltipSpec<D extends BaseDatum = Datum, SI extends SeriesIdent
    * \> Note: This is not the table footers but spans the entire tooltip.
    */
   footer?: string | ((items: TooltipValue<D, SI>[]) => ReactNode);
+
+  /**
+   * Actions to enable tooltip selection
+   */
+  actions:
+    | TooltipAction<D, SI>[]
+    | ((selected: TooltipValue<D, SI>[]) => Promise<TooltipAction<D, SI>[]> | TooltipAction<D, SI>[]);
+
+  /**
+   * Shown in place of actions UI while loading async actions
+   */
+  actionsLoading: string | ComponentType<{ selected: TooltipValue<D, SI>[] }>;
+
+  /**
+   * Shown in place of actions UI after loading async actions and finding none
+   */
+  noActionsLoaded: string | ComponentType<{ selected: TooltipValue<D, SI>[] }>;
+
+  /**
+   * Prompt displayed to indicate user can right-click for contextual menu
+   */
+  actionPrompt: string;
+
+  /**
+   * Prompt displayed to indicate user can right-click for contextual menu
+   */
+  pinningPrompt: string;
+
+  /**
+   * Prompt displayed when tooltip is pinned but all actions are hidden
+   */
+  selectionPrompt: string;
+
+  /**
+   * Max number of tooltip items before showing only highlighted values
+   */
+  maxTooltipItems: number;
+
+  /**
+   * Max number of visible tooltip items before scrolling. Does not apply to custom tooltips
+   */
+  maxVisibleTooltipItems: number;
 }
 
 /**
@@ -196,6 +269,14 @@ export const tooltipBuildProps = buildSFProps<TooltipSpec>()(
     type: TooltipType.VerticalCursor,
     snap: true,
     showNullValues: false,
+    actions: [],
+    actionPrompt: 'Right click to show actions',
+    pinningPrompt: 'Right click to pin tooltip',
+    selectionPrompt: 'Please select a series',
+    actionsLoading: 'Loading Actions...',
+    noActionsLoaded: 'No actions available',
+    maxTooltipItems: 5,
+    maxVisibleTooltipItems: 5,
   },
 );
 
@@ -219,7 +300,12 @@ export const Tooltip = function <D extends BaseDatum = Datum, SI extends SeriesI
   >,
 ) {
   const { defaults, overrides } = tooltipBuildProps;
-  useSpecFactory<TooltipSpec<D, SI>>({ ...defaults, ...stripUndefined(props), ...overrides });
+  // @ts-ignore - default generic value
+  useSpecFactory<TooltipSpec<D, SI>>({
+    ...defaults,
+    ...stripUndefined(props),
+    ...overrides,
+  });
   return null;
 };
 
diff --git a/packages/charts/src/state/actions/mouse.ts b/packages/charts/src/state/actions/mouse.ts
index bd5488091f..1b2dfa32b0 100644
--- a/packages/charts/src/state/actions/mouse.ts
+++ b/packages/charts/src/state/actions/mouse.ts
@@ -17,11 +17,21 @@ export const ON_MOUSE_DOWN = 'ON_MOUSE_DOWN';
 /** @internal */
 export const ON_MOUSE_UP = 'ON_MOUSE_UP';
 
+/** @internal */
+export const ON_MOUSE_RIGHT_CLICK = 'ON_MOUSE_RIGHT_CLICK';
+
+interface MouseRightClickAction {
+  type: typeof ON_MOUSE_RIGHT_CLICK;
+  position: Point;
+  time: number;
+}
+
 interface MouseDownAction {
   type: typeof ON_MOUSE_DOWN;
   position: Point;
   time: number;
 }
+
 interface MouseUpAction {
   type: typeof ON_MOUSE_UP;
   position: Point;
@@ -34,6 +44,16 @@ interface PointerMoveAction {
   time: number;
 }
 
+/**
+ * Action called on mouse button down event
+ * @param position the x and y position (native event offsetX, offsetY)
+ * @param time the timestamp of the event (native event timeStamp)
+ * @internal
+ */
+export function onMouseRightClick(position: Point, time: number): MouseRightClickAction {
+  return { type: ON_MOUSE_RIGHT_CLICK, position, time };
+}
+
 /**
  * Action called on mouse button down event
  * @param position the x and y position (native event offsetX, offsetY)
diff --git a/packages/charts/src/state/actions/tooltip.ts b/packages/charts/src/state/actions/tooltip.ts
new file mode 100644
index 0000000000..d1760db28f
--- /dev/null
+++ b/packages/charts/src/state/actions/tooltip.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { TooltipValue } from '../../specs';
+
+/** @internal */
+export const PIN_TOOLTIP = 'PIN_TOOLTIP';
+
+/** @internal */
+export const TOGGLE_SELECTED_TOOLTIP_ITEM = 'TOGGLE_SELECTED_TOOLTIP_ITEM';
+
+/** @internal */
+export const SET_SELECTED_TOOLTIP_ITEMS = 'SET_SELECTED_TOOLTIP_ITEMS';
+
+/** @internal */
+export interface PinTooltipAction {
+  type: typeof PIN_TOOLTIP;
+  pinned: boolean;
+  resetPointer: boolean;
+}
+
+/** @internal */
+export interface ToggleSelectedTooltipItemAction {
+  type: typeof TOGGLE_SELECTED_TOOLTIP_ITEM;
+  item: TooltipValue;
+}
+
+/** @internal */
+export interface SetSelectedTooltipItemsAction {
+  type: typeof SET_SELECTED_TOOLTIP_ITEMS;
+  items: TooltipValue[];
+}
+
+/** @internal */
+export function pinTooltip(pinned: boolean, resetPointer: boolean = false): PinTooltipAction {
+  return { type: PIN_TOOLTIP, pinned, resetPointer };
+}
+
+/** @internal */
+export function toggleSelectedTooltipItem(item: TooltipValue): ToggleSelectedTooltipItemAction {
+  return { type: TOGGLE_SELECTED_TOOLTIP_ITEM, item };
+}
+
+/** @internal */
+export function setSelectedTooltipItems(items: TooltipValue[]): SetSelectedTooltipItemsAction {
+  return { type: SET_SELECTED_TOOLTIP_ITEMS, items };
+}
+
+/** @internal */
+export type TooltipActions = PinTooltipAction | ToggleSelectedTooltipItemAction | SetSelectedTooltipItemsAction;
diff --git a/packages/charts/src/state/chart_state.ts b/packages/charts/src/state/chart_state.ts
index d03549293d..4ca095e566 100644
--- a/packages/charts/src/state/chart_state.ts
+++ b/packages/charts/src/state/chart_state.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { RefObject } from 'react';
+import React, { CSSProperties, RefObject } from 'react';
 
 import { ChartType } from '../chart_types';
 import { FlameState } from '../chart_types/flame_chart/internal_chart_state';
@@ -23,7 +23,7 @@ import { LegendItem, LegendItemExtraValues } from '../common/legend';
 import { SeriesIdentifier, SeriesKey } from '../common/series_id';
 import { AnchorPosition } from '../components/portal/types';
 import { TooltipInfo } from '../components/tooltip/types';
-import { DEFAULT_SETTINGS_SPEC, PointerEvent, Spec } from '../specs';
+import { DEFAULT_SETTINGS_SPEC, PointerEvent, Spec, TooltipValue } from '../specs';
 import { keepDistinct } from '../utils/common';
 import { Dimensions } from '../utils/dimensions';
 import { Logger } from '../utils/logger';
@@ -42,11 +42,19 @@ import { getInternalIsInitializedSelector, InitStatus } from './selectors/get_in
 import { getLegendItemsSelector } from './selectors/get_legend_items';
 import { LegendItemLabel } from './selectors/get_legend_items_labels';
 import { DebugState } from './types';
-import { getInitialPointerState } from './utils';
+import { getInitialPointerState, getInitialTooltipState } from './utils';
 
 /** @internal */
 export type BackwardRef = () => React.RefObject<HTMLDivElement>;
 
+/** @internal */
+export interface TooltipVisibility {
+  visible: boolean;
+  isExternal: boolean;
+  isPinnable: boolean;
+  displayOnly: boolean;
+}
+
 /**
  * A set of chart-type-dependant functions that required by all chart type
  * @internal
@@ -100,12 +108,12 @@ export interface InternalChartState {
    * Returns the CSS pointer cursor depending on the internal chart state
    * @param globalState
    */
-  getPointerCursor(globalState: GlobalChartState): string;
+  getPointerCursor(globalState: GlobalChartState): CSSProperties['cursor'];
   /**
    * Describe if the tooltip is visible and comes from an external source
    * @param globalState
    */
-  isTooltipVisible(globalState: GlobalChartState): { visible: boolean; isExternal: boolean };
+  isTooltipVisible(globalState: GlobalChartState): TooltipVisibility;
   /**
    * Get the tooltip information to display
    * @param globalState the GlobalChartState
@@ -176,6 +184,7 @@ export interface PointerStates {
   dragging: boolean;
   current: PointerState;
   down: PointerState | null;
+  pinned: PointerState | null;
   up: PointerState | null;
   lastDrag: DragState | null;
   lastClick: PointerState | null;
@@ -189,6 +198,13 @@ export interface InteractionsState {
   hoveredDOMElement: DOMElement | null;
   drilldown: CategoryKey[];
   prevDrilldown: CategoryKey[];
+  tooltip: TooltipInteractionState;
+}
+
+/** @internal */
+export interface TooltipInteractionState {
+  pinned: boolean;
+  selected: TooltipValue[];
 }
 
 /** @internal */
@@ -282,6 +298,7 @@ export const getInitialState = (chartId: string): GlobalChartState => ({
     hoveredDOMElement: null,
     drilldown: [],
     prevDrilldown: [],
+    tooltip: getInitialTooltipState(),
   },
   externalEvents: {
     pointer: null,
@@ -351,7 +368,15 @@ export const chartStoreReducer = (chartId: string) => {
       case UPDATE_PARENT_DIMENSION:
         return {
           ...state,
-          interactions: { ...state.interactions, prevDrilldown: state.interactions.drilldown },
+          interactions: {
+            ...state.interactions,
+            prevDrilldown: state.interactions.drilldown,
+            tooltip: getInitialTooltipState(),
+            pointer: {
+              ...state.interactions.pointer,
+              pinned: null,
+            },
+          },
           parentDimensions: {
             ...action.dimensions,
           },
@@ -364,6 +389,14 @@ export const chartStoreReducer = (chartId: string) => {
             ...state.externalEvents,
             pointer: action.event.chartId === chartId ? null : action.event,
           },
+          // clear pinned states when syncing external cursors
+          ...(action.event.chartId !== chartId && {
+            interactions: {
+              ...state.interactions,
+              pointer: getInitialPointerState(),
+              tooltip: getInitialTooltipState(),
+            },
+          }),
         };
       case CLEAR_TEMPORARY_COLORS:
         return {
diff --git a/packages/charts/src/state/reducers/interactions.ts b/packages/charts/src/state/reducers/interactions.ts
index 784b85b496..63356f32e1 100644
--- a/packages/charts/src/state/reducers/interactions.ts
+++ b/packages/charts/src/state/reducers/interactions.ts
@@ -22,8 +22,17 @@ import {
   ToggleDeselectSeriesAction,
 } from '../actions/legend';
 import { MouseActions, ON_MOUSE_DOWN, ON_MOUSE_UP, ON_POINTER_MOVE } from '../actions/mouse';
+import {
+  TOGGLE_SELECTED_TOOLTIP_ITEM,
+  PIN_TOOLTIP,
+  TooltipActions,
+  SET_SELECTED_TOOLTIP_ITEMS,
+} from '../actions/tooltip';
 import { GlobalChartState, InteractionsState } from '../chart_state';
-import { getInitialPointerState } from '../utils';
+import { getInternalIsTooltipVisibleSelector } from '../selectors/get_internal_is_tooltip_visible';
+import { getInternalTooltipInfoSelector } from '../selectors/get_internal_tooltip_info';
+import { getInitialPointerState, getInitialTooltipState } from '../utils';
+import { getTooltipSpecSelector } from './../selectors/get_tooltip_spec';
 
 /**
  * The minimum number of pixel between two pointer positions to consider for dragging purposes
@@ -33,13 +42,21 @@ const DRAG_DETECTION_PIXEL_DELTA = 4;
 /** @internal */
 export function interactionsReducer(
   globalState: GlobalChartState,
-  action: LegendActions | MouseActions | KeyActions | DOMElementActions,
+  action: LegendActions | MouseActions | KeyActions | DOMElementActions | TooltipActions,
   legendItems: LegendItem[],
 ): InteractionsState {
   const { interactions: state } = globalState;
   switch (action.type) {
     case ON_KEY_UP:
       if (action.key === 'Escape') {
+        if (state.tooltip.pinned) {
+          return {
+            ...state,
+            pointer: getInitialPointerState(),
+            tooltip: getInitialTooltipState(),
+          };
+        }
+
         return {
           ...state,
           pointer: getInitialPointerState(),
@@ -65,6 +82,7 @@ export function interactionsReducer(
           },
         },
       };
+
     case ON_MOUSE_DOWN:
       return {
         ...state,
@@ -82,6 +100,7 @@ export function interactionsReducer(
           },
         },
       };
+
     case ON_MOUSE_UP: {
       return {
         ...state,
@@ -124,17 +143,20 @@ export function interactionsReducer(
         },
       };
     }
+
     case ON_LEGEND_ITEM_OUT:
       return {
         ...state,
         highlightedLegendPath: [],
       };
+
     case ON_LEGEND_ITEM_OVER:
       const { legendPath: highlightedLegendPath } = action;
       return {
         ...state,
         highlightedLegendPath,
       };
+
     case ON_TOGGLE_DESELECT_SERIES:
       return {
         ...state,
@@ -146,11 +168,90 @@ export function interactionsReducer(
         ...state,
         hoveredDOMElement: action.element,
       };
+
     case ON_DOM_ELEMENT_LEAVE:
       return {
         ...state,
         hoveredDOMElement: null,
       };
+
+    case PIN_TOOLTIP: {
+      if (!action.pinned) {
+        return {
+          ...state,
+          pointer: action.resetPointer
+            ? getInitialPointerState()
+            : {
+                ...state.pointer,
+                pinned: null,
+              },
+          tooltip: getInitialTooltipState(),
+        };
+      }
+
+      const { isPinnable, displayOnly } = getInternalIsTooltipVisibleSelector(globalState);
+
+      if (!isPinnable || displayOnly) {
+        return state;
+      }
+
+      const tooltipSpec = getTooltipSpecSelector(globalState);
+      const getSelectedValues = () => {
+        const values = getInternalTooltipInfoSelector(globalState)?.values ?? [];
+        if (globalState.chartType === ChartType.Heatmap) return values.slice(0, 1); // just use the x value
+        return values.filter((v) =>
+          // TODO find a better way to distinguish these two
+          globalState.chartType === ChartType.XYAxis ? v.isHighlighted : !v.displayOnly,
+        );
+      };
+      const selected =
+        // don't pre-populate selection when values are not actionable
+        Array.isArray(tooltipSpec.actions) && tooltipSpec.actions.length === 0 ? [] : getSelectedValues();
+
+      return {
+        ...state,
+        tooltip: {
+          ...state.tooltip,
+          pinned: true,
+          selected,
+        },
+        pointer: {
+          ...state.pointer,
+          pinned: state.pointer.current,
+        },
+      };
+    }
+
+    case TOGGLE_SELECTED_TOOLTIP_ITEM: {
+      if (!state.tooltip.pinned) return state;
+      let updatedItems = [...state.tooltip.selected];
+      if (updatedItems.includes(action.item)) {
+        updatedItems = updatedItems.filter((item) => item !== action.item);
+      } else {
+        updatedItems.push(action.item);
+      }
+
+      return {
+        ...state,
+        tooltip: {
+          ...state.tooltip,
+          selected: updatedItems,
+        },
+      };
+    }
+
+    case SET_SELECTED_TOOLTIP_ITEMS: {
+      if (!state.tooltip.pinned) return state;
+
+      return {
+        ...state,
+        tooltip: {
+          ...state.tooltip,
+          selected: action.items,
+        },
+      };
+    }
+
     default:
       return state;
   }
diff --git a/packages/charts/src/state/selectors/can_pin_tooltip.ts b/packages/charts/src/state/selectors/can_pin_tooltip.ts
new file mode 100644
index 0000000000..8c8e30f287
--- /dev/null
+++ b/packages/charts/src/state/selectors/can_pin_tooltip.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ChartType } from '../../chart_types';
+import { getTooltipInfoAndGeomsSelector } from '../../chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms';
+import { GlobalChartState } from '../chart_state';
+import { createCustomCachedSelector } from '../create_selector';
+import { getTooltipSpecSelector } from './get_tooltip_spec';
+import { isExternalTooltipVisibleSelector } from './is_external_tooltip_visible';
+
+/**
+ * Enables tooltip pinning only for certain chart types
+ */
+const pinnableTooltipCharts = new Set<ChartType>([ChartType.XYAxis, ChartType.Heatmap, ChartType.Partition]);
+
+const getChartType = ({ chartType }: GlobalChartState) => chartType;
+
+/**
+ * @internal
+ */
+export const isPinnableTooltip = createCustomCachedSelector(
+  [getChartType, isExternalTooltipVisibleSelector, getTooltipSpecSelector, getTooltipInfoAndGeomsSelector],
+  (
+    chartType,
+    isExternal,
+    { maxVisibleTooltipItems, maxTooltipItems, actions },
+    { tooltip, highlightedGeometries },
+  ): boolean => {
+    const isPinnableChartType = Boolean(chartType && pinnableTooltipCharts.has(chartType));
+    const actionable = actions.length > 0 || !Array.isArray(actions);
+    let hasHiddenSeries = false;
+
+    if (chartType === ChartType.XYAxis) {
+      const infoCount = tooltip.values.length;
+      const highlightCount = highlightedGeometries.length;
+      hasHiddenSeries =
+        (infoCount > highlightCount && infoCount > maxTooltipItems) || infoCount > maxVisibleTooltipItems;
+    }
+
+    return isPinnableChartType && !isExternal && (hasHiddenSeries || actionable);
+  },
+);
diff --git a/packages/charts/src/state/selectors/get_active_pointer_position.ts b/packages/charts/src/state/selectors/get_active_pointer_position.ts
new file mode 100644
index 0000000000..c062aa74e2
--- /dev/null
+++ b/packages/charts/src/state/selectors/get_active_pointer_position.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { GlobalChartState } from '../chart_state';
+
+/** @internal */
+export const getActivePointerPosition = ({ interactions }: GlobalChartState) => {
+  return interactions.pointer.pinned?.position ?? interactions.pointer.current.position;
+};
diff --git a/packages/charts/src/state/selectors/get_internal_cursor_pointer.ts b/packages/charts/src/state/selectors/get_internal_cursor_pointer.ts
index 4eb0591c13..9150e4bb2e 100644
--- a/packages/charts/src/state/selectors/get_internal_cursor_pointer.ts
+++ b/packages/charts/src/state/selectors/get_internal_cursor_pointer.ts
@@ -6,10 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { CSSProperties } from 'react';
+
 import { DEFAULT_CSS_CURSOR } from '../../common/constants';
 import { GlobalChartState } from '../chart_state';
 
 /** @internal */
-export const getInternalPointerCursor = (state: GlobalChartState): string => {
+export const getInternalPointerCursor = (state: GlobalChartState): CSSProperties['cursor'] => {
   return state.internalChartState?.getPointerCursor(state) ?? DEFAULT_CSS_CURSOR;
 };
diff --git a/packages/charts/src/state/selectors/get_internal_is_tooltip_visible.ts b/packages/charts/src/state/selectors/get_internal_is_tooltip_visible.ts
index 080742f145..4881029e39 100644
--- a/packages/charts/src/state/selectors/get_internal_is_tooltip_visible.ts
+++ b/packages/charts/src/state/selectors/get_internal_is_tooltip_visible.ts
@@ -6,14 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { GlobalChartState } from '../chart_state';
+import { GlobalChartState, TooltipVisibility } from '../chart_state';
 
 /** @internal */
-export const getInternalIsTooltipVisibleSelector = (
-  state: GlobalChartState,
-): { visible: boolean; isExternal: boolean } => {
+export const getInternalIsTooltipVisibleSelector = (state: GlobalChartState): TooltipVisibility => {
   if (state.internalChartState) {
     return state.internalChartState.isTooltipVisible(state);
   }
-  return { visible: false, isExternal: false };
+  return { visible: false, isExternal: false, displayOnly: false, isPinnable: false };
 };
diff --git a/packages/charts/src/state/selectors/get_tooltip_interaction_state.ts b/packages/charts/src/state/selectors/get_tooltip_interaction_state.ts
new file mode 100644
index 0000000000..c187b226b1
--- /dev/null
+++ b/packages/charts/src/state/selectors/get_tooltip_interaction_state.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { GlobalChartState } from '../chart_state';
+
+/** @internal */
+export const getTooltipInteractionState = ({ interactions }: GlobalChartState) => interactions.tooltip;
diff --git a/packages/charts/src/state/selectors/get_tooltip_selected_items.ts b/packages/charts/src/state/selectors/get_tooltip_selected_items.ts
new file mode 100644
index 0000000000..70696c2477
--- /dev/null
+++ b/packages/charts/src/state/selectors/get_tooltip_selected_items.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { TooltipValue } from '../../specs';
+import { GlobalChartState } from '../chart_state';
+import { createCustomCachedSelector } from '../create_selector';
+
+/** @internal */
+export const getTooltipToggledItems = (state: GlobalChartState) => state.interactions.tooltip.selected;
+
+/** @internal */
+export const getTooltipPinned = (state: GlobalChartState) => state.interactions.tooltip.pinned;
+
+/** @internal */
+export const getTooltipSelectedItems = createCustomCachedSelector(
+  [getTooltipToggledItems, getTooltipPinned],
+  (toggledItems, tooltipStick): TooltipValue[] => {
+    if (!tooltipStick) {
+      return [];
+    }
+    return toggledItems;
+  },
+);
diff --git a/packages/charts/src/state/utils.ts b/packages/charts/src/state/utils.ts
index e47af4eba7..ad39d875dd 100644
--- a/packages/charts/src/state/utils.ts
+++ b/packages/charts/src/state/utils.ts
@@ -8,7 +8,7 @@
 
 import { ChartType } from '../chart_types';
 import { Spec } from '../specs';
-import { PointerState, PointerStates, SpecList } from './chart_state';
+import { PointerState, PointerStates, SpecList, TooltipInteractionState } from './chart_state';
 
 /** @internal */
 export function getSpecsFromStore<U extends Spec>(specs: SpecList, chartType: ChartType, specType: string): U[] {
@@ -24,8 +24,15 @@ export function isClicking(prevClick: PointerState | null, lastClick: PointerSta
 export const getInitialPointerState = (): PointerStates => ({
   dragging: false,
   current: { position: { x: -1, y: -1 }, time: 0 },
+  pinned: null,
   down: null,
   up: null,
   lastDrag: null,
   lastClick: null,
 });
+
+/** @internal */
+export const getInitialTooltipState = (): TooltipInteractionState => ({
+  pinned: false,
+  selected: [],
+});
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
index c7041cb020..d5e41941b8 100644
--- a/packages/charts/src/utils/themes/dark_theme.ts
+++ b/packages/charts/src/utils/themes/dark_theme.ts
@@ -406,6 +406,11 @@ export const DARK_THEME: Theme = {
     nonFiniteText: 'N/A',
     minHeight: 64,
   },
+  tooltip: {
+    maxWidth: 260,
+    maxTableHeight: 120,
+    defaultDotColor: Colors.White.keyword,
+  },
   flamegraph: {
     navigation: {
       textColor: 'rgb(223, 229, 239)',
diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
index de31924cae..bcd70c7f44 100644
--- a/packages/charts/src/utils/themes/light_theme.ts
+++ b/packages/charts/src/utils/themes/light_theme.ts
@@ -405,6 +405,11 @@ export const LIGHT_THEME: Theme = {
     nonFiniteText: 'N/A',
     minHeight: 64,
   },
+  tooltip: {
+    maxWidth: 260,
+    maxTableHeight: 120,
+    defaultDotColor: Colors.Black.keyword,
+  },
   flamegraph: {
     navigation: {
       textColor: 'rgb(52, 55, 65)',
diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
index 62cb0da05f..3f0b4a33b3 100644
--- a/packages/charts/src/utils/themes/theme.ts
+++ b/packages/charts/src/utils/themes/theme.ts
@@ -62,6 +62,25 @@ export interface TextAlignment {
   vertical: VerticalAlignment;
 }
 
+/**
+ * Tooltip styles
+ * @public
+ */
+export interface TooltipStyle {
+  /**
+   * Sets max width of tooltip
+   */
+  maxWidth: NonNullable<CSSProperties['maxWidth']>;
+  /**
+   * Sets max height of scrolling tooltip table body
+   */
+  maxTableHeight: CSSProperties['maxHeight'];
+  /**
+   * Color used as fallback when contrast logic fails
+   */
+  defaultDotColor: Color;
+}
+
 /**
  * Shared style properties for varies geometries
  * @public
@@ -474,8 +493,14 @@ export interface Theme {
    * Theme styles for heatmap chart types
    */
   heatmap: HeatmapStyle;
-
+  /**
+   * Theme styles for metric chart types
+   */
   metric: MetricStyle;
+  /**
+   * Theme styles for tooltip
+   */
+  tooltip: TooltipStyle;
 
   /** @alpha */
   flamegraph: FlamegraphStyle;
diff --git a/storybook/stories/components/tooltip/10_cartesian_chart.story.tsx b/storybook/stories/components/tooltip/10_cartesian_chart.story.tsx
new file mode 100644
index 0000000000..41a1864708
--- /dev/null
+++ b/storybook/stories/components/tooltip/10_cartesian_chart.story.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { select, boolean, number } from '@storybook/addon-knobs';
+import React from 'react';
+
+import {
+  Axis,
+  Chart,
+  HistogramBarSeries,
+  LineSeries,
+  Position,
+  ScaleType,
+  Settings,
+  Tooltip,
+  TooltipAction,
+} from '@elastic/charts';
+
+import { useBaseTheme } from '../../../use_base_theme';
+import { getTooltipTypeKnob } from '../../utils/knobs';
+import { SB_SOURCE_PANEL } from '../../utils/storybook';
+import { wait } from '../../utils/utils';
+import { DATA_SERIES } from './data/series';
+
+const formatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+});
+const tooltipDateFormatter = (d: number) => formatter.format(d);
+const stringPluralize = (d: unknown[]) => (d.length > 1 ? 's' : '');
+
+export const Example = () => {
+  const chartType = select('chart type', { bar: 'bar', line: 'line' }, 'line');
+  const reduceData = boolean('reduce data', false);
+  const asyncDelay = number('async actions delay', 0, { step: 100, min: 0 });
+  const disableActions = boolean('disable actions', false);
+
+  const actions: TooltipAction[] = [
+    {
+      disabled: (d) => d.length !== 1,
+      label: (d) => (d.length !== 1 ? 'Select to drilldown' : `Drilldown to ${d[0].label}`),
+      onSelect: (s) => action('drilldown to')(s[0].label),
+    },
+    {
+      label: () => `Filter this 30s time bucket`,
+      onSelect: (s) => action('filter time bucket')(s[0].datum.timestamp),
+    },
+    {
+      disabled: (d) => d.length < 1,
+      label: (d) => (d.length < 1 ? 'Select to filter host IDs' : `Filter by ${d.length} host ID${stringPluralize(d)}`),
+      onSelect: (s) => action('filter')(s.map((d) => d.label)),
+    },
+    {
+      disabled: (d) => d.length < 1,
+      label: (d) => (d.length < 1 ? 'Select to copy host IDs' : `Copy ${d.length} host ID${stringPluralize(d)}`),
+      onSelect: (s) => action('copy')(s.map((d) => d.label)),
+    },
+  ];
+
+  return (
+    <Chart>
+      <Settings
+        baseTheme={useBaseTheme()}
+        theme={{
+          axes: { tickLine: { visible: true } },
+          barSeriesStyle: {
+            rect: {
+              opacity: 0.9,
+            },
+          },
+          lineSeriesStyle: {
+            point: { visible: false },
+          },
+        }}
+      />
+      <Tooltip
+        type={getTooltipTypeKnob()}
+        maxVisibleTooltipItems={4}
+        actions={disableActions ? [] : asyncDelay > 0 ? () => wait(asyncDelay, () => actions) : actions}
+      />
+      <Axis
+        id="x"
+        position={Position.Bottom}
+        showGridLines={true}
+        style={{
+          tickLine: { size: 0.0001, padding: 4 },
+          tickLabel: {
+            alignment: { horizontal: Position.Left, vertical: Position.Bottom },
+            padding: 0,
+            offset: { x: 0, y: 0 },
+          },
+        }}
+        tickFormat={tooltipDateFormatter}
+        timeAxisLayerCount={2}
+      />
+      <Axis
+        id="left"
+        position={Position.Right}
+        showGridLines
+        ticks={4}
+        tickFormat={(d) => `${Number(d * 100).toFixed(0)}`}
+      />
+      {DATA_SERIES.map((d) => {
+        const data = d.timeseries.rows.slice(0, reduceData ? 20 : undefined);
+        return chartType === 'bar' ? (
+          <HistogramBarSeries
+            id={d.name}
+            xScaleType={ScaleType.Time}
+            yScaleType={ScaleType.Linear}
+            xAccessor="timestamp"
+            yAccessors={['metric_0']}
+            yNice
+            data={data}
+          />
+        ) : (
+          <LineSeries
+            id={d.name}
+            xScaleType={ScaleType.Time}
+            yScaleType={ScaleType.Linear}
+            xAccessor="timestamp"
+            yAccessors={['metric_0']}
+            yNice
+            data={data}
+          />
+        );
+      })}
+    </Chart>
+  );
+};
+
+// storybook configuration
+Example.parameters = {
+  options: { selectedPanel: SB_SOURCE_PANEL },
+};
diff --git a/storybook/stories/components/tooltip/11_partition_chart.story.tsx b/storybook/stories/components/tooltip/11_partition_chart.story.tsx
new file mode 100644
index 0000000000..f33bb385a6
--- /dev/null
+++ b/storybook/stories/components/tooltip/11_partition_chart.story.tsx
@@ -0,0 +1,171 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import {
+  Chart,
+  Datum,
+  MODEL_KEY,
+  Partition,
+  PartitionLayout,
+  Settings,
+  PartialTheme,
+  defaultPartitionValueFormatter,
+  Color,
+  Tooltip,
+  TooltipAction,
+  TooltipValue,
+} from '@elastic/charts';
+import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
+import { combineColors } from '@elastic/charts/src/common/color_calcs';
+import { colorToRgba, RGBATupleToString } from '@elastic/charts/src/common/color_library_wrappers';
+import { mocks } from '@elastic/charts/src/mocks/hierarchical';
+
+import { useBaseTheme } from '../../../use_base_theme';
+import {
+  discreteColor,
+  colorBrewerCategoricalStark9,
+  countryLookup,
+  productLookup,
+  regionLookup,
+} from '../../utils/utils';
+
+const theme: PartialTheme = {
+  chartMargins: { top: 0, left: 0, bottom: 0, right: 0 },
+  partition: {
+    linkLabel: {
+      maxCount: 0,
+      fontSize: 14,
+    },
+    fontFamily: 'Arial',
+    fillLabel: {
+      fontStyle: 'italic',
+      fontWeight: 900,
+      valueFont: {
+        fontFamily: 'Menlo',
+        fontStyle: 'normal',
+        fontWeight: 100,
+      },
+    },
+    minFontSize: 1,
+    maxFontSize: 18,
+    idealFontSizeJump: 1.1,
+    outerSizeRatio: 1,
+    emptySizeRatio: 0,
+    circlePadding: 4,
+  },
+};
+
+function plainColor(foreground: Color, bg: Color): Color {
+  return RGBATupleToString(combineColors(colorToRgba(foreground), colorToRgba(bg)));
+}
+const stringPluralize = (d: unknown[], one: string, many: string) => (d.length > 1 ? many : one);
+
+const actionByDepth = (depth: number): TooltipAction => {
+  const name = depth === 1 ? 'categor' : depth === 2 ? 'continent' : 'countr';
+  const pluralize = depth === 1 ? ['y', 'ies'] : depth === 2 ? ['', 's'] : ['y', 'ies'];
+  const filter = (d: TooltipValue) => d.valueAccessor === depth;
+  const actionName = (d: unknown[]) => `${name}${stringPluralize(d, pluralize[0], pluralize[1])}`;
+  return {
+    hide: (d) => d.some(filter), //  TODO we should double check this as it seems to work the opposite way
+    disabled: (d) => d.filter(filter).length < 1,
+    label: (d) => {
+      const currentDepthValues = d.filter(filter);
+      return currentDepthValues.length < 1
+        ? `Select to filter ${actionName(currentDepthValues)}`
+        : `Filter by ${currentDepthValues.length} ${actionName(currentDepthValues)}`;
+    },
+
+    onSelect: (s) => action(`filter ${actionName(s.filter(filter))}`)(s.filter(filter).map((d) => d.label)),
+  };
+};
+
+export const Example = () => {
+  const layout = select<PartitionLayout>(
+    'layout',
+    {
+      [PartitionLayout.sunburst]: PartitionLayout.sunburst,
+      [PartitionLayout.treemap]: PartitionLayout.treemap,
+      [PartitionLayout.mosaic]: PartitionLayout.mosaic,
+      [PartitionLayout.waffle]: PartitionLayout.waffle,
+    },
+    PartitionLayout.sunburst,
+  );
+  const background = 'white';
+  return (
+    <Chart>
+      <Settings theme={theme} baseTheme={useBaseTheme()} />
+      <Tooltip
+        maxVisibleTooltipItems={4}
+        actions={() => {
+          return [
+            {
+              disabled: (d) => d.length !== 1,
+              label: (d) => {
+                return d.length !== 1 ? 'Select one to drilldown' : `Drilldown to ${d[0].label}`;
+              },
+              onSelect: (s) => action('drilldown to')(s[0].label),
+            },
+            actionByDepth(1),
+            actionByDepth(2),
+            actionByDepth(3),
+            {
+              disabled: (d) => d.length < 1,
+              label: (d) =>
+                d.length < 1 ? 'Select to copy labels' : `Copy ${d.length} label${stringPluralize(d, '', 's')}`,
+              onSelect: (s) => action('copy')(s.map((d) => d.label)),
+            },
+          ];
+        }}
+      />
+      <Partition
+        id="spec_1"
+        data={mocks.miniSunburst}
+        layout={layout}
+        valueAccessor={(d: Datum) => d.exportVal as number}
+        valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
+        layers={[
+          {
+            groupByRollup: (d: Datum) => d.sitc1,
+            nodeLabel: (d: any) => productLookup[d].name,
+            fillLabel: { maximizeFontSize: false },
+            shape: {
+              fillColor: (d: ShapeTreeNode) =>
+                plainColor(discreteColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex), background),
+            },
+          },
+          {
+            groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2),
+            nodeLabel: (d: any) => regionLookup[d].regionName,
+            fillLabel: { maximizeFontSize: false },
+            shape: {
+              fillColor: (d: ShapeTreeNode) =>
+                plainColor(discreteColor(colorBrewerCategoricalStark9, 0.5)(d[MODEL_KEY].sortIndex), background),
+            },
+          },
+          {
+            groupByRollup: (d: Datum) => d.dest,
+            nodeLabel: (d: any) => countryLookup[d].name,
+            fillLabel: { maximizeFontSize: false },
+            shape: {
+              fillColor: (d: ShapeTreeNode) =>
+                plainColor(discreteColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex), background),
+            },
+          },
+        ].filter((d, i) => (layout === 'waffle' ? i === 0 : true))}
+      />
+    </Chart>
+  );
+};
+
+Example.parameters = {
+  background: { default: 'white' },
+};
diff --git a/storybook/stories/components/tooltip/12_heatmap.story.tsx b/storybook/stories/components/tooltip/12_heatmap.story.tsx
new file mode 100644
index 0000000000..6f543a7d01
--- /dev/null
+++ b/storybook/stories/components/tooltip/12_heatmap.story.tsx
@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import React, { ReactNode } from 'react';
+
+import { Chart, Heatmap, Settings, Tooltip, TooltipValue } from '@elastic/charts';
+import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames';
+
+import { useBaseTheme } from '../../../use_base_theme';
+
+function boldMap(d: TooltipValue[]) {
+  return d.reduce<ReactNode[]>(
+    (acc, curr, i, array) => {
+      acc.push(
+        <b>
+          {curr.label}:{curr.value}
+        </b>,
+      );
+      if (array.length - 1 > i) {
+        acc.push(' and ');
+      }
+      return acc;
+    },
+    ['Filter '],
+  );
+}
+
+export const Example = () => {
+  const data = BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960);
+
+  return (
+    <Chart>
+      <Settings
+        onElementClick={action('onElementClick')}
+        brushAxis="both"
+        baseTheme={useBaseTheme()}
+        theme={{
+          heatmap: {
+            grid: {
+              stroke: {
+                width: 0,
+              },
+            },
+            cell: {
+              maxWidth: 'fill',
+              border: {
+                stroke: 'transparent',
+                strokeWidth: 1,
+              },
+            },
+            yAxisLabel: {
+              visible: true,
+            },
+          },
+        }}
+        onBrushEnd={action('onBrushEnd')}
+      />
+      <Tooltip
+        maxVisibleTooltipItems={4}
+        actions={[
+          {
+            disabled: (d) => d.length !== 1,
+            label: (d) =>
+              d.length !== 1 ? (
+                'Select one to drilldown'
+              ) : (
+                <span>
+                  Drilldown to{' '}
+                  <b>
+                    {d[0].label}:{d[0].value}
+                  </b>
+                </span>
+              ),
+            onSelect: (s) => action('drilldown to')(s[0].label),
+          },
+          {
+            label: (d) => (d.length < 1 ? 'Select to filter' : boldMap(d)),
+            onSelect: (s) => action('filter categories')(s.map((d) => d.label)),
+          },
+        ]}
+      />
+      <Heatmap
+        id="Number of births"
+        colorScale={{
+          type: 'bands',
+          bands: [
+            { start: -Infinity, end: 1000, color: '#AADC32' },
+            { start: 1000, end: 5000, color: '#35B779' },
+            { start: 5000, end: 10000, color: '#24868E' },
+            { start: 10000, end: 50000, color: '#3B528B' },
+            { start: 50000, end: Infinity, color: '#471164' },
+          ],
+        }}
+        data={data}
+        xAccessor={(d) => d[2]}
+        yAccessor={(d) => d[0]}
+        valueAccessor={(d) => d[3]}
+        valueFormatter={(value) => value.toFixed(0.2)}
+        xSortPredicate="alphaAsc"
+        yAxisLabelName="Year"
+        xAxisLabelName="Name"
+      />
+    </Chart>
+  );
+};
diff --git a/storybook/stories/components/tooltip/13_flamegraph.story.tsx b/storybook/stories/components/tooltip/13_flamegraph.story.tsx
new file mode 100644
index 0000000000..d4d01953bb
--- /dev/null
+++ b/storybook/stories/components/tooltip/13_flamegraph.story.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { boolean, button } from '@storybook/addon-knobs';
+import React from 'react';
+
+import {
+  Chart,
+  Datum,
+  Tooltip,
+  Flame,
+  Settings,
+  PartialTheme,
+  FlameGlobalControl,
+  FlameNodeControl,
+} from '@elastic/charts';
+import columnarMock from '@elastic/charts/src/mocks/hierarchical/cpu_profile_tree_mock_columnar.json';
+import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
+
+import { useBaseTheme } from '../../../use_base_theme';
+
+const position = new Float32Array(columnarMock.position);
+const size = new Float32Array(columnarMock.size);
+
+const pseudoRandom = getRandomNumberGenerator('a_seed');
+
+const paletteColorBrewerCat12 = [
+  [141, 211, 199],
+  [255, 255, 179],
+  [190, 186, 218],
+  [251, 128, 114],
+  [128, 177, 211],
+  [253, 180, 98],
+  [179, 222, 105],
+  [252, 205, 229],
+  [217, 217, 217],
+  [188, 128, 189],
+  [204, 235, 197],
+  [255, 237, 111],
+];
+
+const columnarData = {
+  label: columnarMock.label.map((index: number) => columnarMock.dictionary[index]), // reversing the dictionary encoding
+  value: new Float64Array(columnarMock.value),
+  // color: new Float32Array((columnarMock.color.match(/.{2}/g) ?? []).map((hex: string) => Number.parseInt(hex, 16) / 255)),
+  color: new Float32Array(
+    columnarMock.label.flatMap(() => [...paletteColorBrewerCat12[pseudoRandom(0, 11)].map((c) => c / 255), 1]),
+  ),
+  position0: position, // new Float32Array([...position].slice(1)), // try with the wrong array length
+  position1: position,
+  size0: size,
+  size1: size,
+};
+
+const noop = () => {};
+
+export const Example = () => {
+  let resetFocusControl: FlameGlobalControl = noop; // initial value
+  let focusOnNodeControl: FlameNodeControl = noop; // initial value
+
+  const onElementListeners = {
+    onElementClick: action('onElementClick'),
+    onElementOver: action('onElementOver'),
+    onElementOut: action('onElementOut'),
+  };
+  const theme: PartialTheme = {
+    chartMargins: { top: 0, left: 0, bottom: 0, right: 0 },
+    chartPaddings: { left: 0, right: 0, top: 0, bottom: 0 },
+  };
+  button('Reset focus', () => {
+    resetFocusControl();
+  });
+  button('Set focus on random node', () => {
+    focusOnNodeControl(Math.floor(20 * Math.random()));
+  });
+  const debug = boolean('Debug history', false);
+  return (
+    <Chart>
+      <Settings theme={theme} baseTheme={useBaseTheme()} {...onElementListeners} debug={debug} />
+      <Tooltip
+        maxVisibleTooltipItems={4}
+        actions={[
+          {
+            label: () => 'Open detail view',
+            onSelect: (s) => action('open detail view')(s[0].datum),
+          },
+          {
+            label: () => 'Zoom to',
+            onSelect: (s) => {
+              focusOnNodeControl(s[0]?.valueAccessor as number);
+            },
+          },
+        ]}
+      />
+      <Flame
+        id="spec_1"
+        columnarData={columnarData}
+        valueAccessor={(d: Datum) => d.value as number}
+        valueFormatter={(value) => `${value}`}
+        animation={{ duration: 500 }}
+        controlProviderCallback={{
+          resetFocus: (control) => (resetFocusControl = control),
+          focusOnNode: (control) => (focusOnNodeControl = control),
+        }}
+      />
+    </Chart>
+  );
+};
diff --git a/storybook/stories/components/tooltip/1_composed_list.story.tsx b/storybook/stories/components/tooltip/1_composed_list.story.tsx
index aed12042be..694b458b1b 100644
--- a/storybook/stories/components/tooltip/1_composed_list.story.tsx
+++ b/storybook/stories/components/tooltip/1_composed_list.story.tsx
@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { boolean, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { boolean, number, select } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { CustomTooltip, TooltipHeader, TooltipTable, TooltipTableColumn } from '@elastic/charts';
@@ -16,6 +17,7 @@ import { tableSimple, simple, long } from './data';
 import { TooltipShowcase } from './tooltip_showcase';
 
 export const Example = () => {
+  const maxVisibleTooltipItems = number('max visible tooltip items', 5);
   const dataSet = select(
     'dataSet',
     {
@@ -34,6 +36,7 @@ export const Example = () => {
     {
       id: 'label',
       type: 'custom',
+      truncate: true,
       cell: ({ label }) => <span className="echTooltip__label">{label}</span>,
       style: {
         textAlign: 'left',
@@ -60,6 +63,7 @@ export const Example = () => {
     },
   ];
   const showColor = boolean('show color', true);
+  const pinned = boolean('pinned', false);
 
   if (showColor) {
     columns.unshift({
@@ -72,12 +76,28 @@ export const Example = () => {
     return (
       <>
         <TooltipHeader header={header} />
-        <TooltipTable columns={columns} items={values} />
+        <TooltipTable columns={columns} items={values} onSelect={(s) => action('onTooltipAction')(s)} />
       </>
     );
   };
 
-  return <TooltipShowcase info={dataSets[dataSet]} customTooltip={MyTooltip} />;
+  return (
+    <TooltipShowcase
+      info={dataSets[dataSet]}
+      customTooltip={MyTooltip}
+      pinned={pinned}
+      canPinTooltip
+      tooltip={{
+        maxVisibleTooltipItems,
+        actions: [
+          {
+            label: () => 'Log storybook action',
+            onSelect: (s) => action('onTooltipAction')(s),
+          },
+        ],
+      }}
+    />
+  );
 };
 
 Example.parameters = {
diff --git a/storybook/stories/components/tooltip/2_composed_table.story.tsx b/storybook/stories/components/tooltip/2_composed_table.story.tsx
index c98a87aeaa..17ddb61beb 100644
--- a/storybook/stories/components/tooltip/2_composed_table.story.tsx
+++ b/storybook/stories/components/tooltip/2_composed_table.story.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
 import {
@@ -25,12 +25,15 @@ import { tableSimple } from './data';
 import { TooltipShowcase } from './tooltip_showcase';
 
 export const Example = () => {
+  const pinned = boolean('pinned', false);
+
   const MyTooltip: CustomTooltip = ({ values, header }) => {
     const showColor = boolean('show color', true);
+    const maxHeight = number('max table height', 120);
     return (
       <>
         <TooltipHeader header={header} />
-        <TooltipTable>
+        <TooltipTable gridTemplateColumns={`repeat(${showColor ? 4 : 3}, auto)`} maxHeight={maxHeight}>
           <TooltipTableHeader>
             <TooltipTableRow>
               {showColor && <TooltipTableColorCell />}
@@ -61,7 +64,7 @@ export const Example = () => {
       </>
     );
   };
-  return <TooltipShowcase info={tableSimple} customTooltip={MyTooltip} />;
+  return <TooltipShowcase info={tableSimple} customTooltip={MyTooltip} pinned={pinned} />;
 };
 
 Example.parameters = {
diff --git a/storybook/stories/components/tooltip/3_tabular_data.story.tsx b/storybook/stories/components/tooltip/3_tabular_data.story.tsx
index 68e354d447..8980cb6d63 100644
--- a/storybook/stories/components/tooltip/3_tabular_data.story.tsx
+++ b/storybook/stories/components/tooltip/3_tabular_data.story.tsx
@@ -15,6 +15,8 @@ import { tableMultipleX } from './data';
 import { TooltipShowcase } from './tooltip_showcase';
 
 export const Example = () => {
+  const pinned = boolean('pinned', false);
+
   const MyTooltip: CustomTooltip<any, XYChartSeriesIdentifier> = ({ values }) => {
     const showColor = boolean('show color', true);
     const columns: TooltipTableColumn<any, XYChartSeriesIdentifier>[] = [
@@ -29,7 +31,7 @@ export const Example = () => {
 
     return <TooltipTable items={values} columns={columns} />;
   };
-  return <TooltipShowcase info={tableMultipleX} customTooltip={MyTooltip} />;
+  return <TooltipShowcase info={tableMultipleX} customTooltip={MyTooltip} pinned={pinned} />;
 };
 
 Example.parameters = {
diff --git a/storybook/stories/components/tooltip/4_actions_with_custom_tooltip.story.tsx b/storybook/stories/components/tooltip/4_actions_with_custom_tooltip.story.tsx
new file mode 100644
index 0000000000..7d74182b40
--- /dev/null
+++ b/storybook/stories/components/tooltip/4_actions_with_custom_tooltip.story.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+
+import {
+  CustomTooltip,
+  TooltipTable,
+  TooltipTableBody,
+  TooltipTableHeader,
+  TooltipTableRow,
+  TooltipTableCell,
+  TooltipTableColorCell,
+  TooltipAction,
+  XYChartSeriesIdentifier,
+} from '@elastic/charts';
+
+import { long } from './data';
+import { TooltipShowcase } from './tooltip_showcase';
+
+export const Example = () => {
+  const actions: TooltipAction<any, XYChartSeriesIdentifier>[] = [
+    {
+      label: () => 'Log storybook action',
+      onSelect: (s) => action('onTooltipAction')(s),
+    },
+    {
+      label: ({ length }) => (
+        <span>
+          Alert keys of all <b>{length}</b> selected series
+        </span>
+      ),
+      disabled: ({ length }) => (length < 1 ? 'Select at least one series' : false),
+      onSelect: (series) =>
+        alert(`Selected the following: \n - ${series.map((s) => s.seriesIdentifier.key).join('\n - ')}`),
+    },
+  ];
+
+  const MyTooltip: CustomTooltip<any, XYChartSeriesIdentifier> = ({ values, selected, pinned, toggleSelected }) => {
+    return (
+      <TooltipTable maxHeight={300} gridTemplateColumns="11px auto auto">
+        <TooltipTableHeader>
+          <TooltipTableRow>
+            <TooltipTableColorCell />
+            <TooltipTableCell>Series</TooltipTableCell>
+            <TooltipTableCell>Y Value</TooltipTableCell>
+          </TooltipTableRow>
+        </TooltipTableHeader>
+        <TooltipTableBody>
+          {values.map((value) => {
+            const {
+              datum,
+              seriesIdentifier: { key },
+              color,
+            } = value;
+            const onSelect = () => {
+              toggleSelected(value);
+            };
+
+            return (
+              <TooltipTableRow
+                isSelected={pinned && selected.includes(value)}
+                onSelect={onSelect}
+                key={`${key}-${datum.x}`}
+              >
+                <TooltipTableColorCell color={color} />
+                <TooltipTableCell>{value.label}</TooltipTableCell>
+                <TooltipTableCell>{value.formattedValue}</TooltipTableCell>
+              </TooltipTableRow>
+            );
+          })}
+        </TooltipTableBody>
+      </TooltipTable>
+    );
+  };
+  return (
+    <TooltipShowcase
+      info={long}
+      customTooltip={MyTooltip}
+      pinned={boolean('pinned', false)}
+      tooltip={{ actions }}
+      canPinTooltip
+    />
+  );
+};
+
+Example.parameters = {
+  markdown: `Tooltips may be composed with internal components to build out completely custom tooltips while maintaining a consistent style.\
+  This example shows how you can build a tabular tooltip by structuring the table components explicitly within \`TooltipTable\` instead of using the \`columns\` option.`,
+};
diff --git a/storybook/stories/components/tooltip/5_chart_tooltip.story.tsx b/storybook/stories/components/tooltip/5_chart_tooltip.story.tsx
new file mode 100644
index 0000000000..bc9ce47834
--- /dev/null
+++ b/storybook/stories/components/tooltip/5_chart_tooltip.story.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { boolean, number, select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { tableSimple, simple, long, partition } from './data';
+import { TooltipShowcase } from './tooltip_showcase';
+
+export const Example = () => {
+  const maxVisibleTooltipItems = number('max visible tooltip items', 3);
+  const dataSet = select(
+    'dataSet',
+    {
+      '4 elements': 'simple',
+      '8 elements': 'long',
+      'Simple - table': 'tableSimple',
+      partition: 'partition',
+    },
+    'simple',
+  );
+  const dataSets = {
+    tableSimple,
+    simple,
+    long,
+    partition,
+  };
+
+  const pinned = boolean('pinned', false);
+
+  return (
+    <TooltipShowcase
+      info={dataSets[dataSet]}
+      pinned={pinned}
+      canPinTooltip
+      tooltip={{
+        maxVisibleTooltipItems,
+        actions: [
+          {
+            label: () => 'Drilldown to dashboard X',
+            onSelect: (s) => action('onTooltipAction')(s),
+          },
+          {
+            disabled: (d) => d.length < 1,
+            label: (d) =>
+              d.length < 1 ? 'Select to filter categories' : `Filter categor${d.length > 1 ? 'ies' : 'y'}`,
+            onSelect: (s) => action('onTooltipAction')(s),
+          },
+          {
+            disabled: (d) => d.length < 1,
+            label: (d) => (d.length < 1 ? 'Select to copy values' : `Copy value${d.length > 1 ? 's' : ''}`),
+            onSelect: (s) => action('onTooltipAction')(s),
+          },
+          {
+            label: () => 'A long action label is truncated at max tooltip width',
+            onSelect: (s) => action('onTooltipAction')(s),
+          },
+        ],
+      }}
+    />
+  );
+};
+
+Example.parameters = {
+  markdown: `Tooltips may be composed with internal components to build out completely custom tooltips while maintaining a consistent style.\
+  This example shows how you can build the default list tooltip by defining the \`columns\` on the \`TooltipTable\` component inside a \`CustomTooltip\`.`,
+  background: { disable: true },
+};
diff --git a/storybook/stories/components/tooltip/6_async_actions.story.tsx b/storybook/stories/components/tooltip/6_async_actions.story.tsx
new file mode 100644
index 0000000000..fe5ce44a32
--- /dev/null
+++ b/storybook/stories/components/tooltip/6_async_actions.story.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { simple } from './data';
+import { TooltipShowcase } from './tooltip_showcase';
+
+export const Example = () => {
+  const pinned = boolean('pinned', true);
+
+  return (
+    <TooltipShowcase
+      info={simple}
+      pinned={pinned}
+      canPinTooltip
+      tooltip={{
+        actionsLoading: "I'm loading some actions...",
+        maxVisibleTooltipItems: 3,
+        actions: (selected) => {
+          return selected.length > 0
+            ? new Promise((resolve) => {
+                setTimeout(() => {
+                  resolve([
+                    {
+                      label: () => `Async action on ${selected.length} selected`,
+                      onSelect: (s) => action('onTooltipAction')(s),
+                    },
+                    {
+                      label: () => `Sync action`,
+                      onSelect: (s) => action('onTooltipAction')(s),
+                    },
+                  ]);
+                }, 1000);
+              })
+            : [
+                {
+                  label: () => `Sync action`,
+                  onSelect: (s) => action('onTooltipAction')(s),
+                },
+              ];
+        },
+      }}
+    />
+  );
+};
+
+Example.parameters = {
+  background: { disable: true },
+  markdown: 'Select a series to load async actions',
+};
diff --git a/storybook/stories/components/tooltip/data/list.ts b/storybook/stories/components/tooltip/data/list.ts
index 152841169a..8a6af9c8d8 100644
--- a/storybook/stories/components/tooltip/data/list.ts
+++ b/storybook/stories/components/tooltip/data/list.ts
@@ -21,7 +21,7 @@ export const simple: TooltipInfo<any, XYChartSeriesIdentifier> = {
     valueAccessor: 'y1',
     label: 'a - y1',
     value: 0,
-    formattedValue: '0',
+    formattedValue: '2022-10-31 00:00:00.666',
     markValue: null,
     color: '#54B399',
     isHighlighted: false,
@@ -121,7 +121,7 @@ export const long: TooltipInfo<any, XYChartSeriesIdentifier> = {
     valueAccessor: 'y1',
     label: 'a - y1',
     value: 0,
-    formattedValue: '0',
+    formattedValue: '2022-10-31 00:00:00.666',
     markValue: null,
     color: '#54B399',
     isHighlighted: false,
@@ -283,3 +283,66 @@ export const long: TooltipInfo<any, XYChartSeriesIdentifier> = {
     },
   ],
 };
+
+export const partition: TooltipInfo<any, XYChartSeriesIdentifier> = {
+  header: null,
+  values: [
+    {
+      seriesIdentifier: {
+        key: 'groupId{__global__}spec{bars1}yAccessor{y1}splitAccessors{g-a}',
+        specId: 'bars1',
+        xAccessor: 'x',
+        yAccessor: 'y1',
+        splitAccessors: new Map(),
+        seriesKeys: ['a', 'y1'],
+      },
+      valueAccessor: 'y1',
+      label: 'EMEA',
+      value: 1,
+      formattedValue: '5.23M (50%)',
+      markValue: null,
+      color: '#72A4CD',
+      isHighlighted: false,
+      isVisible: true,
+      datum: { x: 0, g: 'a', y1: 1, y2: 4 },
+    },
+    {
+      seriesIdentifier: {
+        key: 'groupId{__global__}spec{bars1}yAccessor{y2}splitAccessors{g-a}',
+        specId: 'bars1',
+        xAccessor: 'x',
+        yAccessor: 'y2',
+        splitAccessors: new Map(),
+        seriesKeys: ['a', 'y2'],
+      },
+      valueAccessor: 'y1',
+      label: 'Italy',
+      value: 4,
+      formattedValue: '2.51M (25%)',
+      markValue: null,
+      color: '#99BFDB',
+      isHighlighted: false,
+      isVisible: true,
+      datum: { x: 0, g: 'a', y1: 1, y2: 4 },
+    },
+    {
+      seriesIdentifier: {
+        key: 'groupId{__global__}spec{bars1}yAccessor{y1}splitAccessors{g-b}',
+        specId: 'bars1',
+        xAccessor: 'x',
+        yAccessor: 'y1',
+        splitAccessors: new Map(),
+        seriesKeys: ['b', 'y1'],
+      },
+      valueAccessor: 'y1',
+      label: 'Tuscany',
+      value: 3,
+      formattedValue: '5.76k (0.5%)',
+      markValue: null,
+      color: '#CEE0EC',
+      isHighlighted: false,
+      isVisible: true,
+      datum: { x: 0, g: 'b', y1: 3, y2: 6 },
+    },
+  ],
+};
diff --git a/storybook/stories/components/tooltip/data/series.ts b/storybook/stories/components/tooltip/data/series.ts
new file mode 100644
index 0000000000..a3213edf98
--- /dev/null
+++ b/storybook/stories/components/tooltip/data/series.ts
@@ -0,0 +1,3286 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const DATA_SERIES = [
+  {
+    name: 'host-6942',
+    max: 0.4045874873797099,
+    value: 0.2962680558363597,
+    avg: 0.3063191495628821,
+    timeseries: {
+      id: 'user',
+      columns: [
+        { name: 'timestamp', type: 'date' },
+        { name: 'metric_0', type: 'number' },
+      ],
+      rows: [
+        { timestamp: 1667332800000, metric_0: 0.34874142706394196 },
+        { timestamp: 1667332830000, metric_0: 0.35777633388837177 },
+        { timestamp: 1667332860000, metric_0: 0.3244831711053848 },
+        { timestamp: 1667332890000, metric_0: 0.2811833620071411 },
+        { timestamp: 1667332920000, metric_0: 0.15896100302537283 },
+        { timestamp: 1667332950000, metric_0: 0.2559752066930135 },
+        { timestamp: 1667332980000, metric_0: 0.3839319944381714 },
+        { timestamp: 1667333010000, metric_0: 0.33599595725536346 },
+        { timestamp: 1667333040000, metric_0: 0.334477037191391 },
+        { timestamp: 1667333070000, metric_0: 0.31254007418950397 },
+        { timestamp: 1667333100000, metric_0: 0.2939229408899943 },
+        { timestamp: 1667333130000, metric_0: 0.2863461921612422 },
+        { timestamp: 1667333160000, metric_0: 0.367951621611913 },
+        { timestamp: 1667333190000, metric_0: 0.3177519639333089 },
+        { timestamp: 1667333220000, metric_0: 0.4045874873797099 },
+        { timestamp: 1667333250000, metric_0: 0.34589988986651105 },
+        { timestamp: 1667333280000, metric_0: 0.3585460086663564 },
+        { timestamp: 1667333310000, metric_0: 0.2979138692220052 },
+        { timestamp: 1667333340000, metric_0: 0.16280274093151093 },
+        { timestamp: 1667333370000, metric_0: 0.32333482801914215 },
+        { timestamp: 1667333400000, metric_0: 0.29096199075380963 },
+        { timestamp: 1667333430000, metric_0: 0.25330813725789386 },
+        { timestamp: 1667333460000, metric_0: 0.38834187388420105 },
+        { timestamp: 1667333490000, metric_0: 0.3326689153909683 },
+        { timestamp: 1667333520000, metric_0: 0.32251523931821185 },
+        { timestamp: 1667333550000, metric_0: 0.3552623987197876 },
+        { timestamp: 1667333580000, metric_0: 0.28945807615915936 },
+        { timestamp: 1667333610000, metric_0: 0.3198018620411555 },
+        { timestamp: 1667333640000, metric_0: 0.28636954228083294 },
+        { timestamp: 1667333670000, metric_0: 0.3299245585997899 },
+        { timestamp: 1667333700000, metric_0: 0.3147045473257701 },
+        { timestamp: 1667333730000, metric_0: 0.3403649826844533 },
+        { timestamp: 1667333760000, metric_0: 0.3060835003852844 },
+        { timestamp: 1667333790000, metric_0: 0.30727096895376843 },
+        { timestamp: 1667333820000, metric_0: 0.2983386317888896 },
+        { timestamp: 1667333850000, metric_0: 0.26111698647340137 },
+        { timestamp: 1667333880000, metric_0: 0.2863030731678009 },
+        { timestamp: 1667333910000, metric_0: 0.35175105929374695 },
+        { timestamp: 1667333940000, metric_0: 0.30486862858136493 },
+        { timestamp: 1667333970000, metric_0: 0.2920278211434682 },
+        { timestamp: 1667334000000, metric_0: 0.3553886612256368 },
+        { timestamp: 1667334030000, metric_0: 0.33247488737106323 },
+        { timestamp: 1667334060000, metric_0: 0.3503577907880147 },
+        { timestamp: 1667334090000, metric_0: 0.32119495670000714 },
+        { timestamp: 1667334120000, metric_0: 0.2809036473433177 },
+        { timestamp: 1667334150000, metric_0: 0.3616585930188497 },
+        { timestamp: 1667334180000, metric_0: 0.35740313430627185 },
+        { timestamp: 1667334210000, metric_0: 0.3608712653319041 },
+        { timestamp: 1667334240000, metric_0: 0.2637135585149129 },
+        { timestamp: 1667334270000, metric_0: 0.2613096684217453 },
+        { timestamp: 1667334300000, metric_0: 0.3533228536446889 },
+        { timestamp: 1667334330000, metric_0: 0.2453788916269938 },
+        { timestamp: 1667334360000, metric_0: 0.3233574728171031 },
+        { timestamp: 1667334390000, metric_0: 0.35204625129699707 },
+        { timestamp: 1667334420000, metric_0: 0.28329822421073914 },
+        { timestamp: 1667334450000, metric_0: 0.27605955799420673 },
+        { timestamp: 1667334480000, metric_0: 0.3174302776654561 },
+        { timestamp: 1667334510000, metric_0: 0.3174441357453664 },
+        { timestamp: 1667334540000, metric_0: 0.3032358189423879 },
+        { timestamp: 1667334570000, metric_0: 0.37016361951828003 },
+        { timestamp: 1667334600000, metric_0: 0.2845376158754031 },
+        { timestamp: 1667334630000, metric_0: 0.28091730177402496 },
+        { timestamp: 1667334660000, metric_0: 0.298275093237559 },
+        { timestamp: 1667334690000, metric_0: 0.28138890862464905 },
+        { timestamp: 1667334720000, metric_0: 0.23357486724853516 },
+        { timestamp: 1667334750000, metric_0: 0.40123457709948224 },
+        { timestamp: 1667334780000, metric_0: 0.2939300686120987 },
+        { timestamp: 1667334810000, metric_0: 0.3072533706823985 },
+        { timestamp: 1667334840000, metric_0: 0.34876759847005206 },
+        { timestamp: 1667334870000, metric_0: 0.2714219739039739 },
+        { timestamp: 1667334900000, metric_0: 0.3688941200574239 },
+        { timestamp: 1667334930000, metric_0: 0.26487817863623303 },
+        { timestamp: 1667334960000, metric_0: 0.31206977367401123 },
+        { timestamp: 1667334990000, metric_0: 0.2907249927520752 },
+        { timestamp: 1667335020000, metric_0: 0.3487333655357361 },
+        { timestamp: 1667335050000, metric_0: 0.30691683292388916 },
+        { timestamp: 1667335080000, metric_0: 0.2549840062856674 },
+        { timestamp: 1667335110000, metric_0: 0.3625897367795308 },
+        { timestamp: 1667335140000, metric_0: 0.2855423291524251 },
+        { timestamp: 1667335170000, metric_0: 0.2462362994750341 },
+        { timestamp: 1667335200000, metric_0: 0.2915644546349843 },
+        { timestamp: 1667335230000, metric_0: 0.3488748570283254 },
+        { timestamp: 1667335260000, metric_0: 0.3100440204143524 },
+        { timestamp: 1667335290000, metric_0: 0.2573837737242381 },
+        { timestamp: 1667335320000, metric_0: 0.3266606132189433 },
+        { timestamp: 1667335350000, metric_0: 0.26736895740032196 },
+        { timestamp: 1667335380000, metric_0: 0.380219042301178 },
+        { timestamp: 1667335410000, metric_0: 0.22705280780792236 },
+        { timestamp: 1667335440000, metric_0: 0.352107306321462 },
+        { timestamp: 1667335470000, metric_0: 0.25591664512952167 },
+        { timestamp: 1667335500000, metric_0: 0.25495874385039013 },
+        { timestamp: 1667335530000, metric_0: 0.2860405544439952 },
+        { timestamp: 1667335560000, metric_0: 0.19073789566755295 },
+        { timestamp: 1667335590000, metric_0: 0.34192585945129395 },
+        { timestamp: 1667335620000, metric_0: 0.29069269200166065 },
+        { timestamp: 1667335650000, metric_0: 0.3985736568768819 },
+        { timestamp: 1667335680000, metric_0: 0.3556165198485057 },
+        { timestamp: 1667335710000, metric_0: 0.30276427666346234 },
+        { timestamp: 1667335740000, metric_0: 0.3264604906241099 },
+        { timestamp: 1667335770000, metric_0: 0.2258296882112821 },
+        { timestamp: 1667335800000, metric_0: 0.3347952465216319 },
+        { timestamp: 1667335830000, metric_0: 0.2713114619255066 },
+        { timestamp: 1667335860000, metric_0: 0.35919984181722003 },
+        { timestamp: 1667335890000, metric_0: 0.31145066022872925 },
+        { timestamp: 1667335920000, metric_0: 0.3422968288262685 },
+        { timestamp: 1667335950000, metric_0: 0.32901568214098614 },
+        { timestamp: 1667335980000, metric_0: 0.30424686272939044 },
+        { timestamp: 1667336010000, metric_0: 0.32844143112500507 },
+        { timestamp: 1667336040000, metric_0: 0.28995340565840405 },
+        { timestamp: 1667336070000, metric_0: 0.3078547269105911 },
+        { timestamp: 1667336100000, metric_0: 0.2830798228581746 },
+        { timestamp: 1667336130000, metric_0: 0.2377857267856598 },
+        { timestamp: 1667336160000, metric_0: 0.21685329576333365 },
+        { timestamp: 1667336190000, metric_0: 0.3035924782355626 },
+        { timestamp: 1667336220000, metric_0: 0.22407410542170206 },
+        { timestamp: 1667336250000, metric_0: 0.3591982622941335 },
+        { timestamp: 1667336280000, metric_0: 0.26838067173957825 },
+        { timestamp: 1667336310000, metric_0: 0.23181848227977753 },
+        { timestamp: 1667336340000, metric_0: 0.2534378618001938 },
+        { timestamp: 1667336370000, metric_0: 0.2962680558363597 },
+      ],
+    },
+  },
+  {
+    name: 'host-3116',
+    max: 0.10114687184492747,
+    value: 0.07406701395908992,
+    avg: 0.07657978739072052,
+    timeseries: {
+      id: 'system',
+      columns: [
+        { name: 'timestamp', type: 'date' },
+        { name: 'metric_0', type: 'number' },
+      ],
+      rows: [
+        { timestamp: 1667332800000, metric_0: 0.08718535676598549 },
+        { timestamp: 1667332830000, metric_0: 0.08944408347209294 },
+        { timestamp: 1667332860000, metric_0: 0.0811207927763462 },
+        { timestamp: 1667332890000, metric_0: 0.07029584050178528 },
+        { timestamp: 1667332920000, metric_0: 0.03974025075634321 },
+        { timestamp: 1667332950000, metric_0: 0.06399380167325337 },
+        { timestamp: 1667332980000, metric_0: 0.09598299860954285 },
+        { timestamp: 1667333010000, metric_0: 0.08399898931384087 },
+        { timestamp: 1667333040000, metric_0: 0.08361925929784775 },
+        { timestamp: 1667333070000, metric_0: 0.07813501854737599 },
+        { timestamp: 1667333100000, metric_0: 0.07348073522249858 },
+        { timestamp: 1667333130000, metric_0: 0.07158654804031055 },
+        { timestamp: 1667333160000, metric_0: 0.09198790540297826 },
+        { timestamp: 1667333190000, metric_0: 0.07943799098332723 },
+        { timestamp: 1667333220000, metric_0: 0.10114687184492747 },
+        { timestamp: 1667333250000, metric_0: 0.08647497246662776 },
+        { timestamp: 1667333280000, metric_0: 0.0896365021665891 },
+        { timestamp: 1667333310000, metric_0: 0.0744784673055013 },
+        { timestamp: 1667333340000, metric_0: 0.04070068523287773 },
+        { timestamp: 1667333370000, metric_0: 0.08083370700478554 },
+        { timestamp: 1667333400000, metric_0: 0.07274049768845241 },
+        { timestamp: 1667333430000, metric_0: 0.06332703431447347 },
+        { timestamp: 1667333460000, metric_0: 0.09708546847105026 },
+        { timestamp: 1667333490000, metric_0: 0.08316722884774208 },
+        { timestamp: 1667333520000, metric_0: 0.08062880982955296 },
+        { timestamp: 1667333550000, metric_0: 0.0888155996799469 },
+        { timestamp: 1667333580000, metric_0: 0.07236451903978984 },
+        { timestamp: 1667333610000, metric_0: 0.07995046551028888 },
+        { timestamp: 1667333640000, metric_0: 0.07159238557020824 },
+        { timestamp: 1667333670000, metric_0: 0.08248113964994748 },
+        { timestamp: 1667333700000, metric_0: 0.07867613683144252 },
+        { timestamp: 1667333730000, metric_0: 0.08509124567111333 },
+        { timestamp: 1667333760000, metric_0: 0.0765208750963211 },
+        { timestamp: 1667333790000, metric_0: 0.07681774223844211 },
+        { timestamp: 1667333820000, metric_0: 0.0745846579472224 },
+        { timestamp: 1667333850000, metric_0: 0.06527924661835034 },
+        { timestamp: 1667333880000, metric_0: 0.07157576829195023 },
+        { timestamp: 1667333910000, metric_0: 0.08793776482343674 },
+        { timestamp: 1667333940000, metric_0: 0.07621715714534123 },
+        { timestamp: 1667333970000, metric_0: 0.07300695528586705 },
+        { timestamp: 1667334000000, metric_0: 0.0888471653064092 },
+        { timestamp: 1667334030000, metric_0: 0.08311872184276581 },
+        { timestamp: 1667334060000, metric_0: 0.08758944769700368 },
+        { timestamp: 1667334090000, metric_0: 0.08029873917500178 },
+        { timestamp: 1667334120000, metric_0: 0.07022591183582942 },
+        { timestamp: 1667334150000, metric_0: 0.09041464825471242 },
+        { timestamp: 1667334180000, metric_0: 0.08935078357656796 },
+        { timestamp: 1667334210000, metric_0: 0.09021781633297603 },
+        { timestamp: 1667334240000, metric_0: 0.06592838962872823 },
+        { timestamp: 1667334270000, metric_0: 0.06532741710543633 },
+        { timestamp: 1667334300000, metric_0: 0.08833071341117223 },
+        { timestamp: 1667334330000, metric_0: 0.06134472290674845 },
+        { timestamp: 1667334360000, metric_0: 0.08083936820427577 },
+        { timestamp: 1667334390000, metric_0: 0.08801156282424927 },
+        { timestamp: 1667334420000, metric_0: 0.07082455605268478 },
+        { timestamp: 1667334450000, metric_0: 0.06901488949855168 },
+        { timestamp: 1667334480000, metric_0: 0.07935756941636403 },
+        { timestamp: 1667334510000, metric_0: 0.0793610339363416 },
+        { timestamp: 1667334540000, metric_0: 0.07580895473559697 },
+        { timestamp: 1667334570000, metric_0: 0.09254090487957001 },
+        { timestamp: 1667334600000, metric_0: 0.07113440396885078 },
+        { timestamp: 1667334630000, metric_0: 0.07022932544350624 },
+        { timestamp: 1667334660000, metric_0: 0.07456877330938975 },
+        { timestamp: 1667334690000, metric_0: 0.07034722715616226 },
+        { timestamp: 1667334720000, metric_0: 0.05839371681213379 },
+        { timestamp: 1667334750000, metric_0: 0.10030864427487056 },
+        { timestamp: 1667334780000, metric_0: 0.07348251715302467 },
+        { timestamp: 1667334810000, metric_0: 0.07681334267059962 },
+        { timestamp: 1667334840000, metric_0: 0.08719189961751302 },
+        { timestamp: 1667334870000, metric_0: 0.06785549347599347 },
+        { timestamp: 1667334900000, metric_0: 0.09222353001435597 },
+        { timestamp: 1667334930000, metric_0: 0.06621954465905826 },
+        { timestamp: 1667334960000, metric_0: 0.07801744341850281 },
+        { timestamp: 1667334990000, metric_0: 0.0726812481880188 },
+        { timestamp: 1667335020000, metric_0: 0.08718334138393402 },
+        { timestamp: 1667335050000, metric_0: 0.07672920823097229 },
+        { timestamp: 1667335080000, metric_0: 0.06374600157141685 },
+        { timestamp: 1667335110000, metric_0: 0.0906474341948827 },
+        { timestamp: 1667335140000, metric_0: 0.07138558228810628 },
+        { timestamp: 1667335170000, metric_0: 0.06155907486875852 },
+        { timestamp: 1667335200000, metric_0: 0.07289111365874608 },
+        { timestamp: 1667335230000, metric_0: 0.08721871425708135 },
+        { timestamp: 1667335260000, metric_0: 0.0775110051035881 },
+        { timestamp: 1667335290000, metric_0: 0.06434594343105952 },
+        { timestamp: 1667335320000, metric_0: 0.08166515330473582 },
+        { timestamp: 1667335350000, metric_0: 0.06684223935008049 },
+        { timestamp: 1667335380000, metric_0: 0.0950547605752945 },
+        { timestamp: 1667335410000, metric_0: 0.05676320195198059 },
+        { timestamp: 1667335440000, metric_0: 0.0880268265803655 },
+        { timestamp: 1667335470000, metric_0: 0.06397916128238042 },
+        { timestamp: 1667335500000, metric_0: 0.06373968596259753 },
+        { timestamp: 1667335530000, metric_0: 0.0715101386109988 },
+        { timestamp: 1667335560000, metric_0: 0.04768447391688824 },
+        { timestamp: 1667335590000, metric_0: 0.08548146486282349 },
+        { timestamp: 1667335620000, metric_0: 0.07267317300041516 },
+        { timestamp: 1667335650000, metric_0: 0.09964341421922047 },
+        { timestamp: 1667335680000, metric_0: 0.08890412996212642 },
+        { timestamp: 1667335710000, metric_0: 0.07569106916586558 },
+        { timestamp: 1667335740000, metric_0: 0.08161512265602748 },
+        { timestamp: 1667335770000, metric_0: 0.056457422052820526 },
+        { timestamp: 1667335800000, metric_0: 0.08369881163040797 },
+        { timestamp: 1667335830000, metric_0: 0.06782786548137665 },
+        { timestamp: 1667335860000, metric_0: 0.08979996045430501 },
+        { timestamp: 1667335890000, metric_0: 0.07786266505718231 },
+        { timestamp: 1667335920000, metric_0: 0.08557420720656712 },
+        { timestamp: 1667335950000, metric_0: 0.08225392053524654 },
+        { timestamp: 1667335980000, metric_0: 0.07606171568234761 },
+        { timestamp: 1667336010000, metric_0: 0.08211035778125127 },
+        { timestamp: 1667336040000, metric_0: 0.07248835141460101 },
+        { timestamp: 1667336070000, metric_0: 0.07696368172764778 },
+        { timestamp: 1667336100000, metric_0: 0.07076995571454366 },
+        { timestamp: 1667336130000, metric_0: 0.05944643169641495 },
+        { timestamp: 1667336160000, metric_0: 0.05421332394083341 },
+        { timestamp: 1667336190000, metric_0: 0.07589811955889066 },
+        { timestamp: 1667336220000, metric_0: 0.056018526355425514 },
+        { timestamp: 1667336250000, metric_0: 0.08979956557353337 },
+        { timestamp: 1667336280000, metric_0: 0.06709516793489456 },
+        { timestamp: 1667336310000, metric_0: 0.05795462056994438 },
+        { timestamp: 1667336340000, metric_0: 0.06335946545004845 },
+        { timestamp: 1667336370000, metric_0: 0.07406701395908992 },
+      ],
+    },
+  },
+  {
+    name: 'host-7182',
+    max: 0.46753058830897015,
+    value: 0.3638165493806203,
+    avg: 0.3188937294400401,
+    timeseries: {
+      id: 'user',
+      columns: [
+        {
+          name: 'timestamp',
+          type: 'date',
+        },
+        {
+          name: 'metric_0',
+          type: 'number',
+        },
+      ],
+      rows: [
+        {
+          timestamp: 1667332800000,
+          metric_0: 0.23674675077199936,
+        },
+        {
+          timestamp: 1667332830000,
+          metric_0: 0.2762629787127177,
+        },
+        {
+          timestamp: 1667332860000,
+          metric_0: 0.24578686555226645,
+        },
+        {
+          timestamp: 1667332890000,
+          metric_0: 0.3769354472557704,
+        },
+        {
+          timestamp: 1667332920000,
+          metric_0: 0.3355911175409953,
+        },
+        {
+          timestamp: 1667332950000,
+          metric_0: 0.4029686550299327,
+        },
+        {
+          timestamp: 1667332980000,
+          metric_0: 0.30126269658406574,
+        },
+        {
+          timestamp: 1667333010000,
+          metric_0: 0.2926919957002004,
+        },
+        {
+          timestamp: 1667333040000,
+          metric_0: 0.356646329164505,
+        },
+        {
+          timestamp: 1667333070000,
+          metric_0: 0.3406519790490468,
+        },
+        {
+          timestamp: 1667333100000,
+          metric_0: 0.3723626732826233,
+        },
+        {
+          timestamp: 1667333130000,
+          metric_0: 0.33759743471940357,
+        },
+        {
+          timestamp: 1667333160000,
+          metric_0: 0.41703038414319354,
+        },
+        {
+          timestamp: 1667333190000,
+          metric_0: 0.3275140921274821,
+        },
+        {
+          timestamp: 1667333220000,
+          metric_0: 0.45101575056711835,
+        },
+        {
+          timestamp: 1667333250000,
+          metric_0: 0.29873551925023395,
+        },
+        {
+          timestamp: 1667333280000,
+          metric_0: 0.32891859610875446,
+        },
+        {
+          timestamp: 1667333310000,
+          metric_0: 0.22551120817661285,
+        },
+        {
+          timestamp: 1667333340000,
+          metric_0: 0.4007841795682907,
+        },
+        {
+          timestamp: 1667333370000,
+          metric_0: 0.3660312493642171,
+        },
+        {
+          timestamp: 1667333400000,
+          metric_0: 0.30206019182999927,
+        },
+        {
+          timestamp: 1667333430000,
+          metric_0: 0.3689626157283783,
+        },
+        {
+          timestamp: 1667333460000,
+          metric_0: 0.4176250994205475,
+        },
+        {
+          timestamp: 1667333490000,
+          metric_0: 0.2645139942566554,
+        },
+        {
+          timestamp: 1667333520000,
+          metric_0: 0.323407843708992,
+        },
+        {
+          timestamp: 1667333550000,
+          metric_0: 0.21821119884649912,
+        },
+        {
+          timestamp: 1667333580000,
+          metric_0: 0.3501889109611511,
+        },
+        {
+          timestamp: 1667333610000,
+          metric_0: 0.2743571599324544,
+        },
+        {
+          timestamp: 1667333640000,
+          metric_0: 0.27700241903464,
+        },
+        {
+          timestamp: 1667333670000,
+          metric_0: 0.335186243057251,
+        },
+        {
+          timestamp: 1667333700000,
+          metric_0: 0.270063837369283,
+        },
+        {
+          timestamp: 1667333730000,
+          metric_0: 0.335629681746165,
+        },
+        {
+          timestamp: 1667333760000,
+          metric_0: 0.31076965232690174,
+        },
+        {
+          timestamp: 1667333790000,
+          metric_0: 0.35983813802401227,
+        },
+        {
+          timestamp: 1667333820000,
+          metric_0: 0.2921534677346547,
+        },
+        {
+          timestamp: 1667333850000,
+          metric_0: 0.22411971787611643,
+        },
+        {
+          timestamp: 1667333880000,
+          metric_0: 0.24860079089800516,
+        },
+        {
+          timestamp: 1667333910000,
+          metric_0: 0.2793974429368973,
+        },
+        {
+          timestamp: 1667333940000,
+          metric_0: 0.3124958674112956,
+        },
+        {
+          timestamp: 1667333970000,
+          metric_0: 0.34034912784894306,
+        },
+        {
+          timestamp: 1667334000000,
+          metric_0: 0.3348245819409688,
+        },
+        {
+          timestamp: 1667334030000,
+          metric_0: 0.2546294033527374,
+        },
+        {
+          timestamp: 1667334060000,
+          metric_0: 0.42620877424875897,
+        },
+        {
+          timestamp: 1667334090000,
+          metric_0: 0.46753058830897015,
+        },
+        {
+          timestamp: 1667334120000,
+          metric_0: 0.39495396614074707,
+        },
+        {
+          timestamp: 1667334150000,
+          metric_0: 0.3399921655654907,
+        },
+        {
+          timestamp: 1667334180000,
+          metric_0: 0.2703582098086675,
+        },
+        {
+          timestamp: 1667334210000,
+          metric_0: 0.3471289873123169,
+        },
+        {
+          timestamp: 1667334240000,
+          metric_0: 0.3251100182533264,
+        },
+        {
+          timestamp: 1667334270000,
+          metric_0: 0.3618142207463582,
+        },
+        {
+          timestamp: 1667334300000,
+          metric_0: 0.33241911232471466,
+        },
+        {
+          timestamp: 1667334330000,
+          metric_0: 0.31730825702349347,
+        },
+        {
+          timestamp: 1667334360000,
+          metric_0: 0.2720119704802831,
+        },
+        {
+          timestamp: 1667334390000,
+          metric_0: 0.3457658290863037,
+        },
+        {
+          timestamp: 1667334420000,
+          metric_0: 0.2804016371568044,
+        },
+        {
+          timestamp: 1667334450000,
+          metric_0: 0.3279033799966176,
+        },
+        {
+          timestamp: 1667334480000,
+          metric_0: 0.32536494731903076,
+        },
+        {
+          timestamp: 1667334510000,
+          metric_0: 0.2926763991514842,
+        },
+        {
+          timestamp: 1667334540000,
+          metric_0: 0.3490923047065735,
+        },
+        {
+          timestamp: 1667334570000,
+          metric_0: 0.3012569695711136,
+        },
+        {
+          timestamp: 1667334600000,
+          metric_0: 0.3905048767725627,
+        },
+        {
+          timestamp: 1667334630000,
+          metric_0: 0.3501772383848826,
+        },
+        {
+          timestamp: 1667334660000,
+          metric_0: 0.23744273434082666,
+        },
+        {
+          timestamp: 1667334690000,
+          metric_0: 0.24697035551071167,
+        },
+        {
+          timestamp: 1667334720000,
+          metric_0: 0.2929566403230031,
+        },
+        {
+          timestamp: 1667334750000,
+          metric_0: 0.3091825842857361,
+        },
+        {
+          timestamp: 1667334780000,
+          metric_0: 0.3344510942697525,
+        },
+        {
+          timestamp: 1667334810000,
+          metric_0: 0.31740406652291614,
+        },
+        {
+          timestamp: 1667334840000,
+          metric_0: 0.4040726224581401,
+        },
+        {
+          timestamp: 1667334870000,
+          metric_0: 0.3170100251833598,
+        },
+        {
+          timestamp: 1667334900000,
+          metric_0: 0.2928963502248128,
+        },
+        {
+          timestamp: 1667334930000,
+          metric_0: 0.3328752964735031,
+        },
+        {
+          timestamp: 1667334960000,
+          metric_0: 0.357511430978775,
+        },
+        {
+          timestamp: 1667334990000,
+          metric_0: 0.2539384166399638,
+        },
+        {
+          timestamp: 1667335020000,
+          metric_0: 0.3754552702109019,
+        },
+        {
+          timestamp: 1667335050000,
+          metric_0: 0.3772915005683899,
+        },
+        {
+          timestamp: 1667335080000,
+          metric_0: 0.3096510072549184,
+        },
+        {
+          timestamp: 1667335110000,
+          metric_0: 0.28532365957895917,
+        },
+        {
+          timestamp: 1667335140000,
+          metric_0: 0.28591565291086835,
+        },
+        {
+          timestamp: 1667335170000,
+          metric_0: 0.25959018369515735,
+        },
+        {
+          timestamp: 1667335200000,
+          metric_0: 0.28709276020526886,
+        },
+        {
+          timestamp: 1667335230000,
+          metric_0: 0.24581093589464822,
+        },
+        {
+          timestamp: 1667335260000,
+          metric_0: 0.2588135947783788,
+        },
+        {
+          timestamp: 1667335290000,
+          metric_0: 0.2751153310139974,
+        },
+        {
+          timestamp: 1667335320000,
+          metric_0: 0.37329648931821185,
+        },
+        {
+          timestamp: 1667335350000,
+          metric_0: 0.26915471255779266,
+        },
+        {
+          timestamp: 1667335380000,
+          metric_0: 0.3694015343983968,
+        },
+        {
+          timestamp: 1667335410000,
+          metric_0: 0.24267461399237314,
+        },
+        {
+          timestamp: 1667335440000,
+          metric_0: 0.3097536265850067,
+        },
+        {
+          timestamp: 1667335470000,
+          metric_0: 0.3270740807056427,
+        },
+        {
+          timestamp: 1667335500000,
+          metric_0: 0.3864440421263377,
+        },
+        {
+          timestamp: 1667335530000,
+          metric_0: 0.3704795042673747,
+        },
+        {
+          timestamp: 1667335560000,
+          metric_0: 0.3289842406908671,
+        },
+        {
+          timestamp: 1667335590000,
+          metric_0: 0.29559480647246045,
+        },
+        {
+          timestamp: 1667335620000,
+          metric_0: 0.3793505032857259,
+        },
+        {
+          timestamp: 1667335650000,
+          metric_0: 0.3361785610516866,
+        },
+        {
+          timestamp: 1667335680000,
+          metric_0: 0.187428280711174,
+        },
+        {
+          timestamp: 1667335710000,
+          metric_0: 0.34851351380348206,
+        },
+        {
+          timestamp: 1667335740000,
+          metric_0: 0.2889653543631236,
+        },
+        {
+          timestamp: 1667335770000,
+          metric_0: 0.2868878245353699,
+        },
+        {
+          timestamp: 1667335800000,
+          metric_0: 0.3499130805333455,
+        },
+        {
+          timestamp: 1667335830000,
+          metric_0: 0.34690917531649273,
+        },
+        {
+          timestamp: 1667335860000,
+          metric_0: 0.2519531498352687,
+        },
+        {
+          timestamp: 1667335890000,
+          metric_0: 0.3057488799095154,
+        },
+        {
+          timestamp: 1667335920000,
+          metric_0: 0.2320807675520579,
+        },
+        {
+          timestamp: 1667335950000,
+          metric_0: 0.3403207063674927,
+        },
+        {
+          timestamp: 1667335980000,
+          metric_0: 0.2969990720351537,
+        },
+        {
+          timestamp: 1667336010000,
+          metric_0: 0.21300195157527924,
+        },
+        {
+          timestamp: 1667336040000,
+          metric_0: 0.3088476558526357,
+        },
+        {
+          timestamp: 1667336070000,
+          metric_0: 0.3366421163082123,
+        },
+        {
+          timestamp: 1667336100000,
+          metric_0: 0.43140821655591327,
+        },
+        {
+          timestamp: 1667336130000,
+          metric_0: 0.41408825914065045,
+        },
+        {
+          timestamp: 1667336160000,
+          metric_0: 0.29404223958651227,
+        },
+        {
+          timestamp: 1667336190000,
+          metric_0: 0.3118886748949687,
+        },
+        {
+          timestamp: 1667336220000,
+          metric_0: 0.29093530774116516,
+        },
+        {
+          timestamp: 1667336250000,
+          metric_0: 0.2999846190214157,
+        },
+        {
+          timestamp: 1667336280000,
+          metric_0: 0.2877273013194402,
+        },
+        {
+          timestamp: 1667336310000,
+          metric_0: 0.3342668016751607,
+        },
+        {
+          timestamp: 1667336340000,
+          metric_0: 0.29630666474501294,
+        },
+        {
+          timestamp: 1667336370000,
+          metric_0: 0.3638165493806203,
+        },
+      ],
+    },
+  },
+  {
+    name: 'host-9982',
+    max: 0.11688264707724254,
+    value: 0.09095413734515508,
+    avg: 0.07972343236001002,
+    timeseries: {
+      id: 'system',
+      columns: [
+        {
+          name: 'timestamp',
+          type: 'date',
+        },
+        {
+          name: 'metric_0',
+          type: 'number',
+        },
+      ],
+      rows: [
+        {
+          timestamp: 1667332800000,
+          metric_0: 0.05918668769299984,
+        },
+        {
+          timestamp: 1667332830000,
+          metric_0: 0.06906574467817943,
+        },
+        {
+          timestamp: 1667332860000,
+          metric_0: 0.06144671638806661,
+        },
+        {
+          timestamp: 1667332890000,
+          metric_0: 0.0942338618139426,
+        },
+        {
+          timestamp: 1667332920000,
+          metric_0: 0.08389777938524882,
+        },
+        {
+          timestamp: 1667332950000,
+          metric_0: 0.10074216375748317,
+        },
+        {
+          timestamp: 1667332980000,
+          metric_0: 0.07531567414601643,
+        },
+        {
+          timestamp: 1667333010000,
+          metric_0: 0.0731729989250501,
+        },
+        {
+          timestamp: 1667333040000,
+          metric_0: 0.08916158229112625,
+        },
+        {
+          timestamp: 1667333070000,
+          metric_0: 0.0851629947622617,
+        },
+        {
+          timestamp: 1667333100000,
+          metric_0: 0.09309066832065582,
+        },
+        {
+          timestamp: 1667333130000,
+          metric_0: 0.08439935867985089,
+        },
+        {
+          timestamp: 1667333160000,
+          metric_0: 0.10425759603579839,
+        },
+        {
+          timestamp: 1667333190000,
+          metric_0: 0.08187852303187053,
+        },
+        {
+          timestamp: 1667333220000,
+          metric_0: 0.11275393764177959,
+        },
+        {
+          timestamp: 1667333250000,
+          metric_0: 0.07468387981255849,
+        },
+        {
+          timestamp: 1667333280000,
+          metric_0: 0.08222964902718861,
+        },
+        {
+          timestamp: 1667333310000,
+          metric_0: 0.056377802044153214,
+        },
+        {
+          timestamp: 1667333340000,
+          metric_0: 0.10019604489207268,
+        },
+        {
+          timestamp: 1667333370000,
+          metric_0: 0.09150781234105428,
+        },
+        {
+          timestamp: 1667333400000,
+          metric_0: 0.07551504795749982,
+        },
+        {
+          timestamp: 1667333430000,
+          metric_0: 0.09224065393209457,
+        },
+        {
+          timestamp: 1667333460000,
+          metric_0: 0.10440627485513687,
+        },
+        {
+          timestamp: 1667333490000,
+          metric_0: 0.06612849856416385,
+        },
+        {
+          timestamp: 1667333520000,
+          metric_0: 0.080851960927248,
+        },
+        {
+          timestamp: 1667333550000,
+          metric_0: 0.05455279971162478,
+        },
+        {
+          timestamp: 1667333580000,
+          metric_0: 0.08754722774028778,
+        },
+        {
+          timestamp: 1667333610000,
+          metric_0: 0.0685892899831136,
+        },
+        {
+          timestamp: 1667333640000,
+          metric_0: 0.06925060475866,
+        },
+        {
+          timestamp: 1667333670000,
+          metric_0: 0.08379656076431274,
+        },
+        {
+          timestamp: 1667333700000,
+          metric_0: 0.06751595934232076,
+        },
+        {
+          timestamp: 1667333730000,
+          metric_0: 0.08390742043654124,
+        },
+        {
+          timestamp: 1667333760000,
+          metric_0: 0.07769241308172543,
+        },
+        {
+          timestamp: 1667333790000,
+          metric_0: 0.08995953450600307,
+        },
+        {
+          timestamp: 1667333820000,
+          metric_0: 0.07303836693366368,
+        },
+        {
+          timestamp: 1667333850000,
+          metric_0: 0.056029929469029106,
+        },
+        {
+          timestamp: 1667333880000,
+          metric_0: 0.06215019772450129,
+        },
+        {
+          timestamp: 1667333910000,
+          metric_0: 0.06984936073422432,
+        },
+        {
+          timestamp: 1667333940000,
+          metric_0: 0.0781239668528239,
+        },
+        {
+          timestamp: 1667333970000,
+          metric_0: 0.08508728196223576,
+        },
+        {
+          timestamp: 1667334000000,
+          metric_0: 0.0837061454852422,
+        },
+        {
+          timestamp: 1667334030000,
+          metric_0: 0.06365735083818436,
+        },
+        {
+          timestamp: 1667334060000,
+          metric_0: 0.10655219356218974,
+        },
+        {
+          timestamp: 1667334090000,
+          metric_0: 0.11688264707724254,
+        },
+        {
+          timestamp: 1667334120000,
+          metric_0: 0.09873849153518677,
+        },
+        {
+          timestamp: 1667334150000,
+          metric_0: 0.08499804139137268,
+        },
+        {
+          timestamp: 1667334180000,
+          metric_0: 0.06758955245216687,
+        },
+        {
+          timestamp: 1667334210000,
+          metric_0: 0.08678224682807922,
+        },
+        {
+          timestamp: 1667334240000,
+          metric_0: 0.0812775045633316,
+        },
+        {
+          timestamp: 1667334270000,
+          metric_0: 0.09045355518658955,
+        },
+        {
+          timestamp: 1667334300000,
+          metric_0: 0.08310477808117867,
+        },
+        {
+          timestamp: 1667334330000,
+          metric_0: 0.07932706425587337,
+        },
+        {
+          timestamp: 1667334360000,
+          metric_0: 0.06800299262007077,
+        },
+        {
+          timestamp: 1667334390000,
+          metric_0: 0.08644145727157593,
+        },
+        {
+          timestamp: 1667334420000,
+          metric_0: 0.0701004092892011,
+        },
+        {
+          timestamp: 1667334450000,
+          metric_0: 0.0819758449991544,
+        },
+        {
+          timestamp: 1667334480000,
+          metric_0: 0.08134123682975769,
+        },
+        {
+          timestamp: 1667334510000,
+          metric_0: 0.07316909978787105,
+        },
+        {
+          timestamp: 1667334540000,
+          metric_0: 0.08727307617664337,
+        },
+        {
+          timestamp: 1667334570000,
+          metric_0: 0.0753142423927784,
+        },
+        {
+          timestamp: 1667334600000,
+          metric_0: 0.09762621919314067,
+        },
+        {
+          timestamp: 1667334630000,
+          metric_0: 0.08754430959622066,
+        },
+        {
+          timestamp: 1667334660000,
+          metric_0: 0.059360683585206665,
+        },
+        {
+          timestamp: 1667334690000,
+          metric_0: 0.06174258887767792,
+        },
+        {
+          timestamp: 1667334720000,
+          metric_0: 0.07323916008075078,
+        },
+        {
+          timestamp: 1667334750000,
+          metric_0: 0.07729564607143402,
+        },
+        {
+          timestamp: 1667334780000,
+          metric_0: 0.08361277356743813,
+        },
+        {
+          timestamp: 1667334810000,
+          metric_0: 0.07935101663072903,
+        },
+        {
+          timestamp: 1667334840000,
+          metric_0: 0.10101815561453502,
+        },
+        {
+          timestamp: 1667334870000,
+          metric_0: 0.07925250629583995,
+        },
+        {
+          timestamp: 1667334900000,
+          metric_0: 0.0732240875562032,
+        },
+        {
+          timestamp: 1667334930000,
+          metric_0: 0.08321882411837578,
+        },
+        {
+          timestamp: 1667334960000,
+          metric_0: 0.08937785774469376,
+        },
+        {
+          timestamp: 1667334990000,
+          metric_0: 0.06348460415999095,
+        },
+        {
+          timestamp: 1667335020000,
+          metric_0: 0.09386381755272548,
+        },
+        {
+          timestamp: 1667335050000,
+          metric_0: 0.09432287514209747,
+        },
+        {
+          timestamp: 1667335080000,
+          metric_0: 0.0774127518137296,
+        },
+        {
+          timestamp: 1667335110000,
+          metric_0: 0.07133091489473979,
+        },
+        {
+          timestamp: 1667335140000,
+          metric_0: 0.07147891322771709,
+        },
+        {
+          timestamp: 1667335170000,
+          metric_0: 0.06489754592378934,
+        },
+        {
+          timestamp: 1667335200000,
+          metric_0: 0.07177319005131721,
+        },
+        {
+          timestamp: 1667335230000,
+          metric_0: 0.061452733973662056,
+        },
+        {
+          timestamp: 1667335260000,
+          metric_0: 0.0647033986945947,
+        },
+        {
+          timestamp: 1667335290000,
+          metric_0: 0.06877883275349934,
+        },
+        {
+          timestamp: 1667335320000,
+          metric_0: 0.09332412232955296,
+        },
+        {
+          timestamp: 1667335350000,
+          metric_0: 0.06728867813944817,
+        },
+        {
+          timestamp: 1667335380000,
+          metric_0: 0.0923503835995992,
+        },
+        {
+          timestamp: 1667335410000,
+          metric_0: 0.060668653498093285,
+        },
+        {
+          timestamp: 1667335440000,
+          metric_0: 0.07743840664625168,
+        },
+        {
+          timestamp: 1667335470000,
+          metric_0: 0.08176852017641068,
+        },
+        {
+          timestamp: 1667335500000,
+          metric_0: 0.09661101053158443,
+        },
+        {
+          timestamp: 1667335530000,
+          metric_0: 0.09261987606684367,
+        },
+        {
+          timestamp: 1667335560000,
+          metric_0: 0.08224606017271678,
+        },
+        {
+          timestamp: 1667335590000,
+          metric_0: 0.07389870161811511,
+        },
+        {
+          timestamp: 1667335620000,
+          metric_0: 0.09483762582143147,
+        },
+        {
+          timestamp: 1667335650000,
+          metric_0: 0.08404464026292165,
+        },
+        {
+          timestamp: 1667335680000,
+          metric_0: 0.0468570701777935,
+        },
+        {
+          timestamp: 1667335710000,
+          metric_0: 0.08712837845087051,
+        },
+        {
+          timestamp: 1667335740000,
+          metric_0: 0.0722413385907809,
+        },
+        {
+          timestamp: 1667335770000,
+          metric_0: 0.07172195613384247,
+        },
+        {
+          timestamp: 1667335800000,
+          metric_0: 0.08747827013333638,
+        },
+        {
+          timestamp: 1667335830000,
+          metric_0: 0.08672729382912318,
+        },
+        {
+          timestamp: 1667335860000,
+          metric_0: 0.06298828745881717,
+        },
+        {
+          timestamp: 1667335890000,
+          metric_0: 0.07643721997737885,
+        },
+        {
+          timestamp: 1667335920000,
+          metric_0: 0.05802019188801447,
+        },
+        {
+          timestamp: 1667335950000,
+          metric_0: 0.08508017659187317,
+        },
+        {
+          timestamp: 1667335980000,
+          metric_0: 0.07424976800878842,
+        },
+        {
+          timestamp: 1667336010000,
+          metric_0: 0.05325048789381981,
+        },
+        {
+          timestamp: 1667336040000,
+          metric_0: 0.07721191396315892,
+        },
+        {
+          timestamp: 1667336070000,
+          metric_0: 0.08416052907705307,
+        },
+        {
+          timestamp: 1667336100000,
+          metric_0: 0.10785205413897832,
+        },
+        {
+          timestamp: 1667336130000,
+          metric_0: 0.10352206478516261,
+        },
+        {
+          timestamp: 1667336160000,
+          metric_0: 0.07351055989662807,
+        },
+        {
+          timestamp: 1667336190000,
+          metric_0: 0.07797216872374217,
+        },
+        {
+          timestamp: 1667336220000,
+          metric_0: 0.07273382693529129,
+        },
+        {
+          timestamp: 1667336250000,
+          metric_0: 0.07499615475535393,
+        },
+        {
+          timestamp: 1667336280000,
+          metric_0: 0.07193182532986005,
+        },
+        {
+          timestamp: 1667336310000,
+          metric_0: 0.08356670041879018,
+        },
+        {
+          timestamp: 1667336340000,
+          metric_0: 0.07407666618625323,
+        },
+        {
+          timestamp: 1667336370000,
+          metric_0: 0.09095413734515508,
+        },
+      ],
+    },
+  },
+  {
+    name: 'host-45729',
+    max: 0.4839908679326375,
+    value: 0.3916400372982025,
+    avg: 0.31918529298984344,
+    timeseries: {
+      id: 'user',
+      columns: [
+        {
+          name: 'timestamp',
+          type: 'date',
+        },
+        {
+          name: 'metric_0',
+          type: 'number',
+        },
+      ],
+      rows: [
+        {
+          timestamp: 1667332800000,
+          metric_0: 0.29977621883153915,
+        },
+        {
+          timestamp: 1667332830000,
+          metric_0: 0.27408987283706665,
+        },
+        {
+          timestamp: 1667332860000,
+          metric_0: 0.28990548849105835,
+        },
+        {
+          timestamp: 1667332890000,
+          metric_0: 0.36929385860761005,
+        },
+        {
+          timestamp: 1667332920000,
+          metric_0: 0.31124788522720337,
+        },
+        {
+          timestamp: 1667332950000,
+          metric_0: 0.287537083029747,
+        },
+        {
+          timestamp: 1667332980000,
+          metric_0: 0.2967568635940552,
+        },
+        {
+          timestamp: 1667333010000,
+          metric_0: 0.20442836980024973,
+        },
+        {
+          timestamp: 1667333040000,
+          metric_0: 0.31931211551030475,
+        },
+        {
+          timestamp: 1667333070000,
+          metric_0: 0.36897707482179004,
+        },
+        {
+          timestamp: 1667333100000,
+          metric_0: 0.30757897595564526,
+        },
+        {
+          timestamp: 1667333130000,
+          metric_0: 0.2731511394182841,
+        },
+        {
+          timestamp: 1667333160000,
+          metric_0: 0.4021446208159129,
+        },
+        {
+          timestamp: 1667333190000,
+          metric_0: 0.29344835380713147,
+        },
+        {
+          timestamp: 1667333220000,
+          metric_0: 0.3425005276997884,
+        },
+        {
+          timestamp: 1667333250000,
+          metric_0: 0.25978292028109234,
+        },
+        {
+          timestamp: 1667333280000,
+          metric_0: 0.3617887695630391,
+        },
+        {
+          timestamp: 1667333310000,
+          metric_0: 0.29862308502197266,
+        },
+        {
+          timestamp: 1667333340000,
+          metric_0: 0.3178466558456421,
+        },
+        {
+          timestamp: 1667333370000,
+          metric_0: 0.3444976607958476,
+        },
+        {
+          timestamp: 1667333400000,
+          metric_0: 0.2940770337978999,
+        },
+        {
+          timestamp: 1667333430000,
+          metric_0: 0.2905193418264389,
+        },
+        {
+          timestamp: 1667333460000,
+          metric_0: 0.3637872139612834,
+        },
+        {
+          timestamp: 1667333490000,
+          metric_0: 0.23695586621761322,
+        },
+        {
+          timestamp: 1667333520000,
+          metric_0: 0.3217656562725703,
+        },
+        {
+          timestamp: 1667333550000,
+          metric_0: 0.2890215516090393,
+        },
+        {
+          timestamp: 1667333580000,
+          metric_0: 0.26715636750062305,
+        },
+        {
+          timestamp: 1667333610000,
+          metric_0: 0.37604572375615436,
+        },
+        {
+          timestamp: 1667333640000,
+          metric_0: 0.3323912521203359,
+        },
+        {
+          timestamp: 1667333670000,
+          metric_0: 0.38384440541267395,
+        },
+        {
+          timestamp: 1667333700000,
+          metric_0: 0.27270786464214325,
+        },
+        {
+          timestamp: 1667333730000,
+          metric_0: 0.2864599774281184,
+        },
+        {
+          timestamp: 1667333760000,
+          metric_0: 0.27886507908503216,
+        },
+        {
+          timestamp: 1667333790000,
+          metric_0: 0.3325890898704529,
+        },
+        {
+          timestamp: 1667333820000,
+          metric_0: 0.29754966497421265,
+        },
+        {
+          timestamp: 1667333850000,
+          metric_0: 0.32693185408910114,
+        },
+        {
+          timestamp: 1667333880000,
+          metric_0: 0.35126861929893494,
+        },
+        {
+          timestamp: 1667333910000,
+          metric_0: 0.3417484561602275,
+        },
+        {
+          timestamp: 1667333940000,
+          metric_0: 0.34694018959999084,
+        },
+        {
+          timestamp: 1667333970000,
+          metric_0: 0.28032204508781433,
+        },
+        {
+          timestamp: 1667334000000,
+          metric_0: 0.30857476592063904,
+        },
+        {
+          timestamp: 1667334030000,
+          metric_0: 0.32672243813673657,
+        },
+        {
+          timestamp: 1667334060000,
+          metric_0: 0.16484210391839346,
+        },
+        {
+          timestamp: 1667334090000,
+          metric_0: 0.24393236140410104,
+        },
+        {
+          timestamp: 1667334120000,
+          metric_0: 0.413083756963412,
+        },
+        {
+          timestamp: 1667334150000,
+          metric_0: 0.4839908679326375,
+        },
+        {
+          timestamp: 1667334180000,
+          metric_0: 0.2674439549446106,
+        },
+        {
+          timestamp: 1667334210000,
+          metric_0: 0.37867457667986554,
+        },
+        {
+          timestamp: 1667334240000,
+          metric_0: 0.33084602157274884,
+        },
+        {
+          timestamp: 1667334270000,
+          metric_0: 0.34167664249738056,
+        },
+        {
+          timestamp: 1667334300000,
+          metric_0: 0.3647904296716054,
+        },
+        {
+          timestamp: 1667334330000,
+          metric_0: 0.29186991850535077,
+        },
+        {
+          timestamp: 1667334360000,
+          metric_0: 0.3487752079963684,
+        },
+        {
+          timestamp: 1667334390000,
+          metric_0: 0.29593873023986816,
+        },
+        {
+          timestamp: 1667334420000,
+          metric_0: 0.3503992557525635,
+        },
+        {
+          timestamp: 1667334450000,
+          metric_0: 0.3810393313566844,
+        },
+        {
+          timestamp: 1667334480000,
+          metric_0: 0.3757585386435191,
+        },
+        {
+          timestamp: 1667334510000,
+          metric_0: 0.33935465415318805,
+        },
+        {
+          timestamp: 1667334540000,
+          metric_0: 0.2924812237421672,
+        },
+        {
+          timestamp: 1667334570000,
+          metric_0: 0.40377851327260333,
+        },
+        {
+          timestamp: 1667334600000,
+          metric_0: 0.4146209806203842,
+        },
+        {
+          timestamp: 1667334630000,
+          metric_0: 0.35354527831077576,
+        },
+        {
+          timestamp: 1667334660000,
+          metric_0: 0.3889002203941345,
+        },
+        {
+          timestamp: 1667334690000,
+          metric_0: 0.34190143644809723,
+        },
+        {
+          timestamp: 1667334720000,
+          metric_0: 0.3362271984418233,
+        },
+        {
+          timestamp: 1667334750000,
+          metric_0: 0.2866896986961365,
+        },
+        {
+          timestamp: 1667334780000,
+          metric_0: 0.3073747257391612,
+        },
+        {
+          timestamp: 1667334810000,
+          metric_0: 0.28786834081013996,
+        },
+        {
+          timestamp: 1667334840000,
+          metric_0: 0.35283652941385907,
+        },
+        {
+          timestamp: 1667334870000,
+          metric_0: 0.3152204602956772,
+        },
+        {
+          timestamp: 1667334900000,
+          metric_0: 0.25821750859419507,
+        },
+        {
+          timestamp: 1667334930000,
+          metric_0: 0.38528749346733093,
+        },
+        {
+          timestamp: 1667334960000,
+          metric_0: 0.31602028012275696,
+        },
+        {
+          timestamp: 1667334990000,
+          metric_0: 0.2641951193412145,
+        },
+        {
+          timestamp: 1667335020000,
+          metric_0: 0.2657024363676707,
+        },
+        {
+          timestamp: 1667335050000,
+          metric_0: 0.2444081554810206,
+        },
+        {
+          timestamp: 1667335080000,
+          metric_0: 0.2947406868139903,
+        },
+        {
+          timestamp: 1667335110000,
+          metric_0: 0.27855149904886883,
+        },
+        {
+          timestamp: 1667335140000,
+          metric_0: 0.29675881067911786,
+        },
+        {
+          timestamp: 1667335170000,
+          metric_0: 0.2986188431580861,
+        },
+        {
+          timestamp: 1667335200000,
+          metric_0: 0.20048560202121735,
+        },
+        {
+          timestamp: 1667335230000,
+          metric_0: 0.33882563809553784,
+        },
+        {
+          timestamp: 1667335260000,
+          metric_0: 0.3105841477711995,
+        },
+        {
+          timestamp: 1667335290000,
+          metric_0: 0.4018009503682454,
+        },
+        {
+          timestamp: 1667335320000,
+          metric_0: 0.2732260078191757,
+        },
+        {
+          timestamp: 1667335350000,
+          metric_0: 0.4052060842514038,
+        },
+        {
+          timestamp: 1667335380000,
+          metric_0: 0.3772941331068675,
+        },
+        {
+          timestamp: 1667335410000,
+          metric_0: 0.30714963376522064,
+        },
+        {
+          timestamp: 1667335440000,
+          metric_0: 0.2264118790626526,
+        },
+        {
+          timestamp: 1667335470000,
+          metric_0: 0.2921489228804906,
+        },
+        {
+          timestamp: 1667335500000,
+          metric_0: 0.2651912445823352,
+        },
+        {
+          timestamp: 1667335530000,
+          metric_0: 0.3499677578608195,
+        },
+        {
+          timestamp: 1667335560000,
+          metric_0: 0.3379055857658386,
+        },
+        {
+          timestamp: 1667335590000,
+          metric_0: 0.33196746309598285,
+        },
+        {
+          timestamp: 1667335620000,
+          metric_0: 0.29919471343358356,
+        },
+        {
+          timestamp: 1667335650000,
+          metric_0: 0.2668144330382347,
+        },
+        {
+          timestamp: 1667335680000,
+          metric_0: 0.3223360975583394,
+        },
+        {
+          timestamp: 1667335710000,
+          metric_0: 0.3942509392897288,
+        },
+        {
+          timestamp: 1667335740000,
+          metric_0: 0.2585953275362651,
+        },
+        {
+          timestamp: 1667335770000,
+          metric_0: 0.33873148759206134,
+        },
+        {
+          timestamp: 1667335800000,
+          metric_0: 0.31809767087300617,
+        },
+        {
+          timestamp: 1667335830000,
+          metric_0: 0.23975698153177896,
+        },
+        {
+          timestamp: 1667335860000,
+          metric_0: 0.36557382345199585,
+        },
+        {
+          timestamp: 1667335890000,
+          metric_0: 0.33297867079575855,
+        },
+        {
+          timestamp: 1667335920000,
+          metric_0: 0.26561444997787476,
+        },
+        {
+          timestamp: 1667335950000,
+          metric_0: 0.3063862770795822,
+        },
+        {
+          timestamp: 1667335980000,
+          metric_0: 0.38469745715459186,
+        },
+        {
+          timestamp: 1667336010000,
+          metric_0: 0.39382874965667725,
+        },
+        {
+          timestamp: 1667336040000,
+          metric_0: 0.3812083899974823,
+        },
+        {
+          timestamp: 1667336070000,
+          metric_0: 0.2574072331190109,
+        },
+        {
+          timestamp: 1667336100000,
+          metric_0: 0.33985555668671924,
+        },
+        {
+          timestamp: 1667336130000,
+          metric_0: 0.324711615840594,
+        },
+        {
+          timestamp: 1667336160000,
+          metric_0: 0.3706111361583074,
+        },
+        {
+          timestamp: 1667336190000,
+          metric_0: 0.27903997898101807,
+        },
+        {
+          timestamp: 1667336220000,
+          metric_0: 0.3267780542373657,
+        },
+        {
+          timestamp: 1667336250000,
+          metric_0: 0.33966315786043805,
+        },
+        {
+          timestamp: 1667336280000,
+          metric_0: 0.31545838216940564,
+        },
+        {
+          timestamp: 1667336310000,
+          metric_0: 0.27901268005371094,
+        },
+        {
+          timestamp: 1667336340000,
+          metric_0: 0.3065330187479655,
+        },
+        {
+          timestamp: 1667336370000,
+          metric_0: 0.3916400372982025,
+        },
+      ],
+    },
+  },
+  {
+    name: 'host-1337',
+    max: 0.12099771698315938,
+    value: 0.09791000932455063,
+    avg: 0.07979632324746086,
+    timeseries: {
+      id: 'system',
+      columns: [
+        {
+          name: 'timestamp',
+          type: 'date',
+        },
+        {
+          name: 'metric_0',
+          type: 'number',
+        },
+      ],
+      rows: [
+        {
+          timestamp: 1667332800000,
+          metric_0: 0.07494405470788479,
+        },
+        {
+          timestamp: 1667332830000,
+          metric_0: 0.06852246820926666,
+        },
+        {
+          timestamp: 1667332860000,
+          metric_0: 0.07247637212276459,
+        },
+        {
+          timestamp: 1667332890000,
+          metric_0: 0.09232346465190251,
+        },
+        {
+          timestamp: 1667332920000,
+          metric_0: 0.07781197130680084,
+        },
+        {
+          timestamp: 1667332950000,
+          metric_0: 0.07188427075743675,
+        },
+        {
+          timestamp: 1667332980000,
+          metric_0: 0.0741892158985138,
+        },
+        {
+          timestamp: 1667333010000,
+          metric_0: 0.05110709245006243,
+        },
+        {
+          timestamp: 1667333040000,
+          metric_0: 0.07982802887757619,
+        },
+        {
+          timestamp: 1667333070000,
+          metric_0: 0.09224426870544751,
+        },
+        {
+          timestamp: 1667333100000,
+          metric_0: 0.07689474398891132,
+        },
+        {
+          timestamp: 1667333130000,
+          metric_0: 0.06828778485457103,
+        },
+        {
+          timestamp: 1667333160000,
+          metric_0: 0.10053615520397823,
+        },
+        {
+          timestamp: 1667333190000,
+          metric_0: 0.07336208845178287,
+        },
+        {
+          timestamp: 1667333220000,
+          metric_0: 0.0856251319249471,
+        },
+        {
+          timestamp: 1667333250000,
+          metric_0: 0.06494573007027309,
+        },
+        {
+          timestamp: 1667333280000,
+          metric_0: 0.09044719239075978,
+        },
+        {
+          timestamp: 1667333310000,
+          metric_0: 0.07465577125549316,
+        },
+        {
+          timestamp: 1667333340000,
+          metric_0: 0.07946166396141052,
+        },
+        {
+          timestamp: 1667333370000,
+          metric_0: 0.0861244151989619,
+        },
+        {
+          timestamp: 1667333400000,
+          metric_0: 0.07351925844947498,
+        },
+        {
+          timestamp: 1667333430000,
+          metric_0: 0.07262983545660973,
+        },
+        {
+          timestamp: 1667333460000,
+          metric_0: 0.09094680349032085,
+        },
+        {
+          timestamp: 1667333490000,
+          metric_0: 0.059238966554403305,
+        },
+        {
+          timestamp: 1667333520000,
+          metric_0: 0.08044141406814258,
+        },
+        {
+          timestamp: 1667333550000,
+          metric_0: 0.07225538790225983,
+        },
+        {
+          timestamp: 1667333580000,
+          metric_0: 0.06678909187515576,
+        },
+        {
+          timestamp: 1667333610000,
+          metric_0: 0.09401143093903859,
+        },
+        {
+          timestamp: 1667333640000,
+          metric_0: 0.08309781303008397,
+        },
+        {
+          timestamp: 1667333670000,
+          metric_0: 0.09596110135316849,
+        },
+        {
+          timestamp: 1667333700000,
+          metric_0: 0.06817696616053581,
+        },
+        {
+          timestamp: 1667333730000,
+          metric_0: 0.0716149943570296,
+        },
+        {
+          timestamp: 1667333760000,
+          metric_0: 0.06971626977125804,
+        },
+        {
+          timestamp: 1667333790000,
+          metric_0: 0.08314727246761322,
+        },
+        {
+          timestamp: 1667333820000,
+          metric_0: 0.07438741624355316,
+        },
+        {
+          timestamp: 1667333850000,
+          metric_0: 0.08173296352227528,
+        },
+        {
+          timestamp: 1667333880000,
+          metric_0: 0.08781715482473373,
+        },
+        {
+          timestamp: 1667333910000,
+          metric_0: 0.08543711404005687,
+        },
+        {
+          timestamp: 1667333940000,
+          metric_0: 0.08673504739999771,
+        },
+        {
+          timestamp: 1667333970000,
+          metric_0: 0.07008051127195358,
+        },
+        {
+          timestamp: 1667334000000,
+          metric_0: 0.07714369148015976,
+        },
+        {
+          timestamp: 1667334030000,
+          metric_0: 0.08168060953418414,
+        },
+        {
+          timestamp: 1667334060000,
+          metric_0: 0.041210525979598366,
+        },
+        {
+          timestamp: 1667334090000,
+          metric_0: 0.06098309035102526,
+        },
+        {
+          timestamp: 1667334120000,
+          metric_0: 0.103270939240853,
+        },
+        {
+          timestamp: 1667334150000,
+          metric_0: 0.12099771698315938,
+        },
+        {
+          timestamp: 1667334180000,
+          metric_0: 0.06686098873615265,
+        },
+        {
+          timestamp: 1667334210000,
+          metric_0: 0.09466864416996638,
+        },
+        {
+          timestamp: 1667334240000,
+          metric_0: 0.08271150539318721,
+        },
+        {
+          timestamp: 1667334270000,
+          metric_0: 0.08541916062434514,
+        },
+        {
+          timestamp: 1667334300000,
+          metric_0: 0.09119760741790135,
+        },
+        {
+          timestamp: 1667334330000,
+          metric_0: 0.07296747962633769,
+        },
+        {
+          timestamp: 1667334360000,
+          metric_0: 0.0871938019990921,
+        },
+        {
+          timestamp: 1667334390000,
+          metric_0: 0.07398468255996704,
+        },
+        {
+          timestamp: 1667334420000,
+          metric_0: 0.08759981393814087,
+        },
+        {
+          timestamp: 1667334450000,
+          metric_0: 0.0952598328391711,
+        },
+        {
+          timestamp: 1667334480000,
+          metric_0: 0.09393963466087978,
+        },
+        {
+          timestamp: 1667334510000,
+          metric_0: 0.08483866353829701,
+        },
+        {
+          timestamp: 1667334540000,
+          metric_0: 0.0731203059355418,
+        },
+        {
+          timestamp: 1667334570000,
+          metric_0: 0.10094462831815083,
+        },
+        {
+          timestamp: 1667334600000,
+          metric_0: 0.10365524515509605,
+        },
+        {
+          timestamp: 1667334630000,
+          metric_0: 0.08838631957769394,
+        },
+        {
+          timestamp: 1667334660000,
+          metric_0: 0.09722505509853363,
+        },
+        {
+          timestamp: 1667334690000,
+          metric_0: 0.08547535911202431,
+        },
+        {
+          timestamp: 1667334720000,
+          metric_0: 0.08405679961045583,
+        },
+        {
+          timestamp: 1667334750000,
+          metric_0: 0.07167242467403412,
+        },
+        {
+          timestamp: 1667334780000,
+          metric_0: 0.0768436814347903,
+        },
+        {
+          timestamp: 1667334810000,
+          metric_0: 0.07196708520253499,
+        },
+        {
+          timestamp: 1667334840000,
+          metric_0: 0.08820913235346477,
+        },
+        {
+          timestamp: 1667334870000,
+          metric_0: 0.0788051150739193,
+        },
+        {
+          timestamp: 1667334900000,
+          metric_0: 0.06455437714854877,
+        },
+        {
+          timestamp: 1667334930000,
+          metric_0: 0.09632187336683273,
+        },
+        {
+          timestamp: 1667334960000,
+          metric_0: 0.07900507003068924,
+        },
+        {
+          timestamp: 1667334990000,
+          metric_0: 0.06604877983530362,
+        },
+        {
+          timestamp: 1667335020000,
+          metric_0: 0.06642560909191768,
+        },
+        {
+          timestamp: 1667335050000,
+          metric_0: 0.06110203887025515,
+        },
+        {
+          timestamp: 1667335080000,
+          metric_0: 0.07368517170349757,
+        },
+        {
+          timestamp: 1667335110000,
+          metric_0: 0.06963787476221721,
+        },
+        {
+          timestamp: 1667335140000,
+          metric_0: 0.07418970266977946,
+        },
+        {
+          timestamp: 1667335170000,
+          metric_0: 0.07465471078952153,
+        },
+        {
+          timestamp: 1667335200000,
+          metric_0: 0.05012140050530434,
+        },
+        {
+          timestamp: 1667335230000,
+          metric_0: 0.08470640952388446,
+        },
+        {
+          timestamp: 1667335260000,
+          metric_0: 0.07764603694279988,
+        },
+        {
+          timestamp: 1667335290000,
+          metric_0: 0.10045023759206136,
+        },
+        {
+          timestamp: 1667335320000,
+          metric_0: 0.06830650195479393,
+        },
+        {
+          timestamp: 1667335350000,
+          metric_0: 0.10130152106285095,
+        },
+        {
+          timestamp: 1667335380000,
+          metric_0: 0.09432353327671687,
+        },
+        {
+          timestamp: 1667335410000,
+          metric_0: 0.07678740844130516,
+        },
+        {
+          timestamp: 1667335440000,
+          metric_0: 0.05660296976566315,
+        },
+        {
+          timestamp: 1667335470000,
+          metric_0: 0.07303723072012265,
+        },
+        {
+          timestamp: 1667335500000,
+          metric_0: 0.0662978111455838,
+        },
+        {
+          timestamp: 1667335530000,
+          metric_0: 0.08749193946520488,
+        },
+        {
+          timestamp: 1667335560000,
+          metric_0: 0.08447639644145966,
+        },
+        {
+          timestamp: 1667335590000,
+          metric_0: 0.08299186577399571,
+        },
+        {
+          timestamp: 1667335620000,
+          metric_0: 0.07479867835839589,
+        },
+        {
+          timestamp: 1667335650000,
+          metric_0: 0.06670360825955868,
+        },
+        {
+          timestamp: 1667335680000,
+          metric_0: 0.08058402438958485,
+        },
+        {
+          timestamp: 1667335710000,
+          metric_0: 0.0985627348224322,
+        },
+        {
+          timestamp: 1667335740000,
+          metric_0: 0.06464883188406627,
+        },
+        {
+          timestamp: 1667335770000,
+          metric_0: 0.08468287189801534,
+        },
+        {
+          timestamp: 1667335800000,
+          metric_0: 0.07952441771825154,
+        },
+        {
+          timestamp: 1667335830000,
+          metric_0: 0.05993924538294474,
+        },
+        {
+          timestamp: 1667335860000,
+          metric_0: 0.09139345586299896,
+        },
+        {
+          timestamp: 1667335890000,
+          metric_0: 0.08324466769893964,
+        },
+        {
+          timestamp: 1667335920000,
+          metric_0: 0.06640361249446869,
+        },
+        {
+          timestamp: 1667335950000,
+          metric_0: 0.07659656926989555,
+        },
+        {
+          timestamp: 1667335980000,
+          metric_0: 0.09617436428864796,
+        },
+        {
+          timestamp: 1667336010000,
+          metric_0: 0.09845718741416931,
+        },
+        {
+          timestamp: 1667336040000,
+          metric_0: 0.09530209749937057,
+        },
+        {
+          timestamp: 1667336070000,
+          metric_0: 0.06435180827975273,
+        },
+        {
+          timestamp: 1667336100000,
+          metric_0: 0.08496388917167981,
+        },
+        {
+          timestamp: 1667336130000,
+          metric_0: 0.0811779039601485,
+        },
+        {
+          timestamp: 1667336160000,
+          metric_0: 0.09265278403957684,
+        },
+        {
+          timestamp: 1667336190000,
+          metric_0: 0.06975999474525452,
+        },
+        {
+          timestamp: 1667336220000,
+          metric_0: 0.08169451355934143,
+        },
+        {
+          timestamp: 1667336250000,
+          metric_0: 0.08491578946510951,
+        },
+        {
+          timestamp: 1667336280000,
+          metric_0: 0.07886459554235141,
+        },
+        {
+          timestamp: 1667336310000,
+          metric_0: 0.06975317001342773,
+        },
+        {
+          timestamp: 1667336340000,
+          metric_0: 0.07663325468699138,
+        },
+        {
+          timestamp: 1667336370000,
+          metric_0: 0.09791000932455063,
+        },
+      ],
+    },
+  },
+  {
+    name: 'host-993752',
+    max: 0.42341842254002887,
+    value: 0.3657372196515401,
+    avg: 0.3109148617833853,
+    timeseries: {
+      id: 'user',
+      columns: [
+        {
+          name: 'timestamp',
+          type: 'date',
+        },
+        {
+          name: 'metric_0',
+          type: 'number',
+        },
+      ],
+      rows: [
+        {
+          timestamp: 1667332800000,
+          metric_0: 0.26554837822914124,
+        },
+        {
+          timestamp: 1667332830000,
+          metric_0: 0.3245313912630081,
+        },
+        {
+          timestamp: 1667332860000,
+          metric_0: 0.292506605386734,
+        },
+        {
+          timestamp: 1667332890000,
+          metric_0: 0.33190569778283435,
+        },
+        {
+          timestamp: 1667332920000,
+          metric_0: 0.3270445068677266,
+        },
+        {
+          timestamp: 1667332950000,
+          metric_0: 0.219671959678332,
+        },
+        {
+          timestamp: 1667332980000,
+          metric_0: 0.4092471996943156,
+        },
+        {
+          timestamp: 1667333010000,
+          metric_0: 0.42341842254002887,
+        },
+        {
+          timestamp: 1667333040000,
+          metric_0: 0.33125580847263336,
+        },
+        {
+          timestamp: 1667333070000,
+          metric_0: 0.2941380689541499,
+        },
+        {
+          timestamp: 1667333100000,
+          metric_0: 0.3351229429244995,
+        },
+        {
+          timestamp: 1667333130000,
+          metric_0: 0.38405293226242065,
+        },
+        {
+          timestamp: 1667333160000,
+          metric_0: 0.27865228056907654,
+        },
+        {
+          timestamp: 1667333190000,
+          metric_0: 0.2733519325653712,
+        },
+        {
+          timestamp: 1667333220000,
+          metric_0: 0.209918146332105,
+        },
+        {
+          timestamp: 1667333250000,
+          metric_0: 0.28147180875142414,
+        },
+        {
+          timestamp: 1667333280000,
+          metric_0: 0.3216685752073924,
+        },
+        {
+          timestamp: 1667333310000,
+          metric_0: 0.30877769986788434,
+        },
+        {
+          timestamp: 1667333340000,
+          metric_0: 0.3536653021971385,
+        },
+        {
+          timestamp: 1667333370000,
+          metric_0: 0.27556002140045166,
+        },
+        {
+          timestamp: 1667333400000,
+          metric_0: 0.28134016195933026,
+        },
+        {
+          timestamp: 1667333430000,
+          metric_0: 0.3073340505361557,
+        },
+        {
+          timestamp: 1667333460000,
+          metric_0: 0.308109109600385,
+        },
+        {
+          timestamp: 1667333490000,
+          metric_0: 0.3141087492307027,
+        },
+        {
+          timestamp: 1667333520000,
+          metric_0: 0.3253626674413681,
+        },
+        {
+          timestamp: 1667333550000,
+          metric_0: 0.31740400195121765,
+        },
+        {
+          timestamp: 1667333580000,
+          metric_0: 0.29565206666787464,
+        },
+        {
+          timestamp: 1667333610000,
+          metric_0: 0.3159216245015462,
+        },
+        {
+          timestamp: 1667333640000,
+          metric_0: 0.32625357309977215,
+        },
+        {
+          timestamp: 1667333670000,
+          metric_0: 0.3004571795463562,
+        },
+        {
+          timestamp: 1667333700000,
+          metric_0: 0.3162183811267217,
+        },
+        {
+          timestamp: 1667333730000,
+          metric_0: 0.28908344109853107,
+        },
+        {
+          timestamp: 1667333760000,
+          metric_0: 0.2806500792503357,
+        },
+        {
+          timestamp: 1667333790000,
+          metric_0: 0.2616770068804423,
+        },
+        {
+          timestamp: 1667333820000,
+          metric_0: 0.3122442563374837,
+        },
+        {
+          timestamp: 1667333850000,
+          metric_0: 0.3697422544161479,
+        },
+        {
+          timestamp: 1667333880000,
+          metric_0: 0.38436148564020794,
+        },
+        {
+          timestamp: 1667333910000,
+          metric_0: 0.28180519739786786,
+        },
+        {
+          timestamp: 1667333940000,
+          metric_0: 0.3253449946641922,
+        },
+        {
+          timestamp: 1667333970000,
+          metric_0: 0.23849976559480032,
+        },
+        {
+          timestamp: 1667334000000,
+          metric_0: 0.32709699869155884,
+        },
+        {
+          timestamp: 1667334030000,
+          metric_0: 0.28809836010138196,
+        },
+        {
+          timestamp: 1667334060000,
+          metric_0: 0.334033062060674,
+        },
+        {
+          timestamp: 1667334090000,
+          metric_0: 0.33405157923698425,
+        },
+        {
+          timestamp: 1667334120000,
+          metric_0: 0.2736254731814067,
+        },
+        {
+          timestamp: 1667334150000,
+          metric_0: 0.36191598574320477,
+        },
+        {
+          timestamp: 1667334180000,
+          metric_0: 0.3138476659854253,
+        },
+        {
+          timestamp: 1667334210000,
+          metric_0: 0.3658759693304698,
+        },
+        {
+          timestamp: 1667334240000,
+          metric_0: 0.31635376811027527,
+        },
+        {
+          timestamp: 1667334270000,
+          metric_0: 0.2981712222099304,
+        },
+        {
+          timestamp: 1667334300000,
+          metric_0: 0.22057300309340158,
+        },
+        {
+          timestamp: 1667334330000,
+          metric_0: 0.30108100672562915,
+        },
+        {
+          timestamp: 1667334360000,
+          metric_0: 0.25260060528914136,
+        },
+        {
+          timestamp: 1667334390000,
+          metric_0: 0.3323913911978404,
+        },
+        {
+          timestamp: 1667334420000,
+          metric_0: 0.2530389130115509,
+        },
+        {
+          timestamp: 1667334450000,
+          metric_0: 0.24724195897579193,
+        },
+        {
+          timestamp: 1667334480000,
+          metric_0: 0.3694608410199483,
+        },
+        {
+          timestamp: 1667334510000,
+          metric_0: 0.1464558889468511,
+        },
+        {
+          timestamp: 1667334540000,
+          metric_0: 0.3568643530209859,
+        },
+        {
+          timestamp: 1667334570000,
+          metric_0: 0.2906121661265691,
+        },
+        {
+          timestamp: 1667334600000,
+          metric_0: 0.29147279262542725,
+        },
+        {
+          timestamp: 1667334630000,
+          metric_0: 0.29598700006802875,
+        },
+        {
+          timestamp: 1667334660000,
+          metric_0: 0.3178882400194804,
+        },
+        {
+          timestamp: 1667334690000,
+          metric_0: 0.28718478977680206,
+        },
+        {
+          timestamp: 1667334720000,
+          metric_0: 0.3305741051832835,
+        },
+        {
+          timestamp: 1667334750000,
+          metric_0: 0.28062058985233307,
+        },
+        {
+          timestamp: 1667334780000,
+          metric_0: 0.2839128027359645,
+        },
+        {
+          timestamp: 1667334810000,
+          metric_0: 0.31596046686172485,
+        },
+        {
+          timestamp: 1667334840000,
+          metric_0: 0.3435437083244324,
+        },
+        {
+          timestamp: 1667334870000,
+          metric_0: 0.36869652569293976,
+        },
+        {
+          timestamp: 1667334900000,
+          metric_0: 0.2834072808424632,
+        },
+        {
+          timestamp: 1667334930000,
+          metric_0: 0.3127775589625041,
+        },
+        {
+          timestamp: 1667334960000,
+          metric_0: 0.2580890854199727,
+        },
+        {
+          timestamp: 1667334990000,
+          metric_0: 0.29344111680984497,
+        },
+        {
+          timestamp: 1667335020000,
+          metric_0: 0.3512902855873108,
+        },
+        {
+          timestamp: 1667335050000,
+          metric_0: 0.26867932081222534,
+        },
+        {
+          timestamp: 1667335080000,
+          metric_0: 0.30300448338190716,
+        },
+        {
+          timestamp: 1667335110000,
+          metric_0: 0.2824061264594396,
+        },
+        {
+          timestamp: 1667335140000,
+          metric_0: 0.27666042248408,
+        },
+        {
+          timestamp: 1667335170000,
+          metric_0: 0.3714834849039714,
+        },
+        {
+          timestamp: 1667335200000,
+          metric_0: 0.2873914490143458,
+        },
+        {
+          timestamp: 1667335230000,
+          metric_0: 0.32019497950871784,
+        },
+        {
+          timestamp: 1667335260000,
+          metric_0: 0.3025929580132167,
+        },
+        {
+          timestamp: 1667335290000,
+          metric_0: 0.33769770463307697,
+        },
+        {
+          timestamp: 1667335320000,
+          metric_0: 0.38783719142278034,
+        },
+        {
+          timestamp: 1667335350000,
+          metric_0: 0.27688901623090106,
+        },
+        {
+          timestamp: 1667335380000,
+          metric_0: 0.2831520438194275,
+        },
+        {
+          timestamp: 1667335410000,
+          metric_0: 0.30719699958960217,
+        },
+        {
+          timestamp: 1667335440000,
+          metric_0: 0.41629768411318463,
+        },
+        {
+          timestamp: 1667335470000,
+          metric_0: 0.34883591532707214,
+        },
+        {
+          timestamp: 1667335500000,
+          metric_0: 0.3437271366516749,
+        },
+        {
+          timestamp: 1667335530000,
+          metric_0: 0.3343379447857539,
+        },
+        {
+          timestamp: 1667335560000,
+          metric_0: 0.3483527700106303,
+        },
+        {
+          timestamp: 1667335590000,
+          metric_0: 0.31128636995951336,
+        },
+        {
+          timestamp: 1667335620000,
+          metric_0: 0.3416846493879954,
+        },
+        {
+          timestamp: 1667335650000,
+          metric_0: 0.32481649518013,
+        },
+        {
+          timestamp: 1667335680000,
+          metric_0: 0.3340492645899455,
+        },
+        {
+          timestamp: 1667335710000,
+          metric_0: 0.22142045696576437,
+        },
+        {
+          timestamp: 1667335740000,
+          metric_0: 0.31097331643104553,
+        },
+        {
+          timestamp: 1667335770000,
+          metric_0: 0.3083871304988861,
+        },
+        {
+          timestamp: 1667335800000,
+          metric_0: 0.2768298387527466,
+        },
+        {
+          timestamp: 1667335830000,
+          metric_0: 0.331269105275472,
+        },
+        {
+          timestamp: 1667335860000,
+          metric_0: 0.30281810959180194,
+        },
+        {
+          timestamp: 1667335890000,
+          metric_0: 0.39446720480918884,
+        },
+        {
+          timestamp: 1667335920000,
+          metric_0: 0.37544288237889606,
+        },
+        {
+          timestamp: 1667335950000,
+          metric_0: 0.33352212111155194,
+        },
+        {
+          timestamp: 1667335980000,
+          metric_0: 0.2855232059955597,
+        },
+        {
+          timestamp: 1667336010000,
+          metric_0: 0.35418395201365155,
+        },
+        {
+          timestamp: 1667336040000,
+          metric_0: 0.271432821949323,
+        },
+        {
+          timestamp: 1667336070000,
+          metric_0: 0.23321674267450967,
+        },
+        {
+          timestamp: 1667336100000,
+          metric_0: 0.3288340965906779,
+        },
+        {
+          timestamp: 1667336130000,
+          metric_0: 0.29713847239812213,
+        },
+        {
+          timestamp: 1667336160000,
+          metric_0: 0.3367747962474823,
+        },
+        {
+          timestamp: 1667336190000,
+          metric_0: 0.2738778442144394,
+        },
+        {
+          timestamp: 1667336220000,
+          metric_0: 0.4041471878687541,
+        },
+        {
+          timestamp: 1667336250000,
+          metric_0: 0.33507869640986127,
+        },
+        {
+          timestamp: 1667336280000,
+          metric_0: 0.3047125041484833,
+        },
+        {
+          timestamp: 1667336310000,
+          metric_0: 0.3355152557293574,
+        },
+        {
+          timestamp: 1667336340000,
+          metric_0: 0.22858975330988565,
+        },
+        {
+          timestamp: 1667336370000,
+          metric_0: 0.3657372196515401,
+        },
+      ],
+    },
+  },
+  {
+    name: 'host-1182831',
+    max: 0.10585460563500722,
+    value: 0.09143430491288503,
+    avg: 0.07772871544584632,
+    timeseries: {
+      id: 'system',
+      columns: [
+        {
+          name: 'timestamp',
+          type: 'date',
+        },
+        {
+          name: 'metric_0',
+          type: 'number',
+        },
+      ],
+      rows: [
+        {
+          timestamp: 1667332800000,
+          metric_0: 0.06638709455728531,
+        },
+        {
+          timestamp: 1667332830000,
+          metric_0: 0.08113284781575203,
+        },
+        {
+          timestamp: 1667332860000,
+          metric_0: 0.0731266513466835,
+        },
+        {
+          timestamp: 1667332890000,
+          metric_0: 0.08297642444570859,
+        },
+        {
+          timestamp: 1667332920000,
+          metric_0: 0.08176112671693166,
+        },
+        {
+          timestamp: 1667332950000,
+          metric_0: 0.054917989919583,
+        },
+        {
+          timestamp: 1667332980000,
+          metric_0: 0.1023117999235789,
+        },
+        {
+          timestamp: 1667333010000,
+          metric_0: 0.10585460563500722,
+        },
+        {
+          timestamp: 1667333040000,
+          metric_0: 0.08281395211815834,
+        },
+        {
+          timestamp: 1667333070000,
+          metric_0: 0.07353451723853748,
+        },
+        {
+          timestamp: 1667333100000,
+          metric_0: 0.08378073573112488,
+        },
+        {
+          timestamp: 1667333130000,
+          metric_0: 0.09601323306560516,
+        },
+        {
+          timestamp: 1667333160000,
+          metric_0: 0.06966307014226913,
+        },
+        {
+          timestamp: 1667333190000,
+          metric_0: 0.0683379831413428,
+        },
+        {
+          timestamp: 1667333220000,
+          metric_0: 0.05247953658302625,
+        },
+        {
+          timestamp: 1667333250000,
+          metric_0: 0.07036795218785603,
+        },
+        {
+          timestamp: 1667333280000,
+          metric_0: 0.0804171438018481,
+        },
+        {
+          timestamp: 1667333310000,
+          metric_0: 0.07719442496697108,
+        },
+        {
+          timestamp: 1667333340000,
+          metric_0: 0.08841632554928462,
+        },
+        {
+          timestamp: 1667333370000,
+          metric_0: 0.06889000535011292,
+        },
+        {
+          timestamp: 1667333400000,
+          metric_0: 0.07033504048983256,
+        },
+        {
+          timestamp: 1667333430000,
+          metric_0: 0.07683351263403893,
+        },
+        {
+          timestamp: 1667333460000,
+          metric_0: 0.07702727740009625,
+        },
+        {
+          timestamp: 1667333490000,
+          metric_0: 0.07852718730767567,
+        },
+        {
+          timestamp: 1667333520000,
+          metric_0: 0.08134066686034203,
+        },
+        {
+          timestamp: 1667333550000,
+          metric_0: 0.07935100048780441,
+        },
+        {
+          timestamp: 1667333580000,
+          metric_0: 0.07391301666696866,
+        },
+        {
+          timestamp: 1667333610000,
+          metric_0: 0.07898040612538655,
+        },
+        {
+          timestamp: 1667333640000,
+          metric_0: 0.08156339327494304,
+        },
+        {
+          timestamp: 1667333670000,
+          metric_0: 0.07511429488658905,
+        },
+        {
+          timestamp: 1667333700000,
+          metric_0: 0.07905459528168042,
+        },
+        {
+          timestamp: 1667333730000,
+          metric_0: 0.07227086027463277,
+        },
+        {
+          timestamp: 1667333760000,
+          metric_0: 0.07016251981258392,
+        },
+        {
+          timestamp: 1667333790000,
+          metric_0: 0.06541925172011058,
+        },
+        {
+          timestamp: 1667333820000,
+          metric_0: 0.07806106408437093,
+        },
+        {
+          timestamp: 1667333850000,
+          metric_0: 0.09243556360403697,
+        },
+        {
+          timestamp: 1667333880000,
+          metric_0: 0.09609037141005199,
+        },
+        {
+          timestamp: 1667333910000,
+          metric_0: 0.07045129934946696,
+        },
+        {
+          timestamp: 1667333940000,
+          metric_0: 0.08133624866604805,
+        },
+        {
+          timestamp: 1667333970000,
+          metric_0: 0.05962494139870008,
+        },
+        {
+          timestamp: 1667334000000,
+          metric_0: 0.08177424967288971,
+        },
+        {
+          timestamp: 1667334030000,
+          metric_0: 0.07202459002534549,
+        },
+        {
+          timestamp: 1667334060000,
+          metric_0: 0.0835082655151685,
+        },
+        {
+          timestamp: 1667334090000,
+          metric_0: 0.08351289480924606,
+        },
+        {
+          timestamp: 1667334120000,
+          metric_0: 0.06840636829535167,
+        },
+        {
+          timestamp: 1667334150000,
+          metric_0: 0.09047899643580119,
+        },
+        {
+          timestamp: 1667334180000,
+          metric_0: 0.07846191649635632,
+        },
+        {
+          timestamp: 1667334210000,
+          metric_0: 0.09146899233261745,
+        },
+        {
+          timestamp: 1667334240000,
+          metric_0: 0.07908844202756882,
+        },
+        {
+          timestamp: 1667334270000,
+          metric_0: 0.0745428055524826,
+        },
+        {
+          timestamp: 1667334300000,
+          metric_0: 0.055143250773350395,
+        },
+        {
+          timestamp: 1667334330000,
+          metric_0: 0.07527025168140729,
+        },
+        {
+          timestamp: 1667334360000,
+          metric_0: 0.06315015132228534,
+        },
+        {
+          timestamp: 1667334390000,
+          metric_0: 0.0830978477994601,
+        },
+        {
+          timestamp: 1667334420000,
+          metric_0: 0.06325972825288773,
+        },
+        {
+          timestamp: 1667334450000,
+          metric_0: 0.06181048974394798,
+        },
+        {
+          timestamp: 1667334480000,
+          metric_0: 0.09236521025498708,
+        },
+        {
+          timestamp: 1667334510000,
+          metric_0: 0.036613972236712776,
+        },
+        {
+          timestamp: 1667334540000,
+          metric_0: 0.08921608825524648,
+        },
+        {
+          timestamp: 1667334570000,
+          metric_0: 0.07265304153164227,
+        },
+        {
+          timestamp: 1667334600000,
+          metric_0: 0.07286819815635681,
+        },
+        {
+          timestamp: 1667334630000,
+          metric_0: 0.07399675001700719,
+        },
+        {
+          timestamp: 1667334660000,
+          metric_0: 0.0794720600048701,
+        },
+        {
+          timestamp: 1667334690000,
+          metric_0: 0.07179619744420052,
+        },
+        {
+          timestamp: 1667334720000,
+          metric_0: 0.08264352629582088,
+        },
+        {
+          timestamp: 1667334750000,
+          metric_0: 0.07015514746308327,
+        },
+        {
+          timestamp: 1667334780000,
+          metric_0: 0.07097820068399112,
+        },
+        {
+          timestamp: 1667334810000,
+          metric_0: 0.07899011671543121,
+        },
+        {
+          timestamp: 1667334840000,
+          metric_0: 0.0858859270811081,
+        },
+        {
+          timestamp: 1667334870000,
+          metric_0: 0.09217413142323494,
+        },
+        {
+          timestamp: 1667334900000,
+          metric_0: 0.0708518202106158,
+        },
+        {
+          timestamp: 1667334930000,
+          metric_0: 0.07819438974062602,
+        },
+        {
+          timestamp: 1667334960000,
+          metric_0: 0.06452227135499318,
+        },
+        {
+          timestamp: 1667334990000,
+          metric_0: 0.07336027920246124,
+        },
+        {
+          timestamp: 1667335020000,
+          metric_0: 0.0878225713968277,
+        },
+        {
+          timestamp: 1667335050000,
+          metric_0: 0.06716983020305634,
+        },
+        {
+          timestamp: 1667335080000,
+          metric_0: 0.07575112084547679,
+        },
+        {
+          timestamp: 1667335110000,
+          metric_0: 0.0706015316148599,
+        },
+        {
+          timestamp: 1667335140000,
+          metric_0: 0.06916510562102,
+        },
+        {
+          timestamp: 1667335170000,
+          metric_0: 0.09287087122599284,
+        },
+        {
+          timestamp: 1667335200000,
+          metric_0: 0.07184786225358646,
+        },
+        {
+          timestamp: 1667335230000,
+          metric_0: 0.08004874487717946,
+        },
+        {
+          timestamp: 1667335260000,
+          metric_0: 0.07564823950330417,
+        },
+        {
+          timestamp: 1667335290000,
+          metric_0: 0.08442442615826924,
+        },
+        {
+          timestamp: 1667335320000,
+          metric_0: 0.09695929785569508,
+        },
+        {
+          timestamp: 1667335350000,
+          metric_0: 0.06922225405772527,
+        },
+        {
+          timestamp: 1667335380000,
+          metric_0: 0.07078801095485687,
+        },
+        {
+          timestamp: 1667335410000,
+          metric_0: 0.07679924989740054,
+        },
+        {
+          timestamp: 1667335440000,
+          metric_0: 0.10407442102829616,
+        },
+        {
+          timestamp: 1667335470000,
+          metric_0: 0.08720897883176804,
+        },
+        {
+          timestamp: 1667335500000,
+          metric_0: 0.08593178416291873,
+        },
+        {
+          timestamp: 1667335530000,
+          metric_0: 0.08358448619643848,
+        },
+        {
+          timestamp: 1667335560000,
+          metric_0: 0.08708819250265758,
+        },
+        {
+          timestamp: 1667335590000,
+          metric_0: 0.07782159248987834,
+        },
+        {
+          timestamp: 1667335620000,
+          metric_0: 0.08542116234699886,
+        },
+        {
+          timestamp: 1667335650000,
+          metric_0: 0.0812041237950325,
+        },
+        {
+          timestamp: 1667335680000,
+          metric_0: 0.08351231614748637,
+        },
+        {
+          timestamp: 1667335710000,
+          metric_0: 0.05535511424144109,
+        },
+        {
+          timestamp: 1667335740000,
+          metric_0: 0.07774332910776138,
+        },
+        {
+          timestamp: 1667335770000,
+          metric_0: 0.07709678262472153,
+        },
+        {
+          timestamp: 1667335800000,
+          metric_0: 0.06920745968818665,
+        },
+        {
+          timestamp: 1667335830000,
+          metric_0: 0.082817276318868,
+        },
+        {
+          timestamp: 1667335860000,
+          metric_0: 0.07570452739795049,
+        },
+        {
+          timestamp: 1667335890000,
+          metric_0: 0.09861680120229721,
+        },
+        {
+          timestamp: 1667335920000,
+          metric_0: 0.09386072059472401,
+        },
+        {
+          timestamp: 1667335950000,
+          metric_0: 0.08338053027788798,
+        },
+        {
+          timestamp: 1667335980000,
+          metric_0: 0.07138080149888992,
+        },
+        {
+          timestamp: 1667336010000,
+          metric_0: 0.08854598800341289,
+        },
+        {
+          timestamp: 1667336040000,
+          metric_0: 0.06785820548733075,
+        },
+        {
+          timestamp: 1667336070000,
+          metric_0: 0.05830418566862742,
+        },
+        {
+          timestamp: 1667336100000,
+          metric_0: 0.08220852414766948,
+        },
+        {
+          timestamp: 1667336130000,
+          metric_0: 0.07428461809953053,
+        },
+        {
+          timestamp: 1667336160000,
+          metric_0: 0.08419369906187057,
+        },
+        {
+          timestamp: 1667336190000,
+          metric_0: 0.06846946105360985,
+        },
+        {
+          timestamp: 1667336220000,
+          metric_0: 0.10103679696718852,
+        },
+        {
+          timestamp: 1667336250000,
+          metric_0: 0.08376967410246532,
+        },
+        {
+          timestamp: 1667336280000,
+          metric_0: 0.07617812603712082,
+        },
+        {
+          timestamp: 1667336310000,
+          metric_0: 0.08387881393233936,
+        },
+        {
+          timestamp: 1667336340000,
+          metric_0: 0.05714743832747141,
+        },
+        {
+          timestamp: 1667336370000,
+          metric_0: 0.09143430491288503,
+        },
+      ],
+    },
+  },
+];
diff --git a/storybook/stories/components/tooltip/tooltip.stories.tsx b/storybook/stories/components/tooltip/tooltip.stories.tsx
index 9454143f04..aa48e9c47e 100644
--- a/storybook/stories/components/tooltip/tooltip.stories.tsx
+++ b/storybook/stories/components/tooltip/tooltip.stories.tsx
@@ -9,6 +9,14 @@
 export { Example as ComposedList } from './1_composed_list.story';
 export { Example as ComposedTable } from './2_composed_table.story';
 export { Example as TabularData } from './3_tabular_data.story';
+export { Example as ActionsWithCustomTooltip } from './4_actions_with_custom_tooltip.story';
+export { Example as DefaultChartsTooltip } from './5_chart_tooltip.story';
+export { Example as AsyncActions } from './6_async_actions.story';
+
+export { Example as CartesianCharts } from './10_cartesian_chart.story';
+export { Example as PartitionCharts } from './11_partition_chart.story';
+export { Example as HeatmapChart } from './12_heatmap.story';
+export { Example as Flamegraph } from './13_flamegraph.story';
 
 export default {
   title: 'Components/Tooltip',
diff --git a/storybook/stories/components/tooltip/tooltip_showcase.tsx b/storybook/stories/components/tooltip/tooltip_showcase.tsx
index 20adfd3f3e..5a5321e2cf 100644
--- a/storybook/stories/components/tooltip/tooltip_showcase.tsx
+++ b/storybook/stories/components/tooltip/tooltip_showcase.tsx
@@ -9,7 +9,16 @@
 import { boolean, color } from '@storybook/addon-knobs';
 import React, { memo, useEffect, useRef, useState } from 'react';
 
-import { BaseDatum, Datum, SeriesIdentifier, TooltipProps } from '@elastic/charts';
+import {
+  BaseDatum,
+  Datum,
+  SeriesIdentifier,
+  TooltipProps,
+  LIGHT_THEME,
+  DEFAULT_TOOLTIP_SPEC,
+  TooltipSpec,
+  TooltipValue,
+} from '@elastic/charts';
 import { TooltipComponent, TooltipComponentProps } from '@elastic/charts/src/components/tooltip/tooltip';
 
 import { getPlacementKnob } from '../../utils/knobs';
@@ -22,14 +31,14 @@ type BaseTooltipProps<
 > = TooltipComponentProps<D, SI>;
 
 type TooltipShowcaseProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = Partial<
-  Omit<TooltipComponentProps<D, SI>, 'settings' | 'visible'>
-> &
-  Partial<TooltipProps<D, SI>>;
+  Omit<TooltipComponentProps<D, SI>, 'settings' | 'visible' | 'tooltip'>
+> & { tooltip?: Partial<TooltipComponentProps<D, SI>['tooltip']> } & Partial<TooltipProps<D, SI>>;
 
 const TooltipShowcaseInner = <D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>(
   props: TooltipShowcaseProps<D, SI>,
 ) => {
   const [, setVisible] = useState(false);
+  const [selected, setSelected] = useState<TooltipValue<D, SI>[]>([]);
   const divRef = useRef<HTMLDivElement | null>(null);
   const anchorRef = useRef<HTMLDivElement | null>(null);
 
@@ -40,7 +49,6 @@ const TooltipShowcaseInner = <D extends BaseDatum = Datum, SI extends SeriesIden
   }, []);
 
   const tooltipProps: BaseTooltipProps<D, SI> = {
-    ...props,
     zIndex: 200,
     info: props.info,
     settings: {
@@ -54,6 +62,30 @@ const TooltipShowcaseInner = <D extends BaseDatum = Datum, SI extends SeriesIden
     getChartContainerRef: () => divRef,
     // @ts-ignore - overriding mouse logic
     onPointerMove: () => {},
+    toggleSelectedTooltipItem: (rawitem) => {
+      const item = rawitem as TooltipValue<D, SI>;
+      const index = selected.indexOf(item);
+      setSelected((prev) => {
+        if (index === -1) return [...prev, item];
+        return prev.filter((i) => i !== item);
+      });
+    },
+    setSelectedTooltipItems: (items) => {
+      setSelected(items as TooltipValue<D, SI>[]);
+    },
+    pinTooltip() {
+      setSelected([]);
+    },
+    canPinTooltip: false,
+    pinned: false,
+    selected,
+    maxTooltipItems: 5,
+    tooltipTheme: LIGHT_THEME.tooltip,
+    ...props,
+    tooltip: {
+      ...(DEFAULT_TOOLTIP_SPEC as unknown as TooltipSpec<D, SI>),
+      ...props.tooltip,
+    },
   };
 
   return (
@@ -68,4 +100,11 @@ const TooltipShowcaseInner = <D extends BaseDatum = Datum, SI extends SeriesIden
   );
 };
 
+/**
+ * This component is used to render the internal `TooltipComponent` as a standalone element.
+ *
+ * - No connection to redux
+ * - Everything is overridable
+ * - Limited defaults, logic must be manually implemented above or when used
+ */
 export const TooltipShowcase = memo(TooltipShowcaseInner) as typeof TooltipShowcaseInner;
diff --git a/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx b/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx
index 0bdfdb3795..dc8e69058f 100644
--- a/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx
+++ b/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx
@@ -97,7 +97,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-Example.parameters = {
-  // background: { default: 'transparent' },
-};
diff --git a/storybook/stories/utils/knobs.ts b/storybook/stories/utils/knobs.ts
index 70d4aef987..1621d125bb 100644
--- a/storybook/stories/utils/knobs.ts
+++ b/storybook/stories/utils/knobs.ts
@@ -7,7 +7,7 @@
  */
 
 import { PopoverAnchorPosition } from '@elastic/eui';
-import { select, array, number, optionsKnob } from '@storybook/addon-knobs';
+import { select, array, number, optionsKnob, boolean } from '@storybook/addon-knobs';
 import {
   OptionsTypeKnobSingleValue,
   OptionsTypeKnobValue,
@@ -36,6 +36,14 @@ import { VerticalAlignment, HorizontalAlignment } from '@elastic/charts/src/util
 export const getPositiveNumberKnob = (name: string, value: number, groupId?: string) =>
   number(name, value, { min: 0 }, groupId);
 
+export function getToggledNumber<T>(initEnabled: boolean, fallbackValue: T) {
+  return (...[name, initialValue, options, groupId]: Parameters<typeof number>) => {
+    const enabled = boolean(`${name} - enabled`, initEnabled, groupId);
+    const value = number(name, initialValue, options, groupId);
+    return enabled ? value : fallbackValue;
+  };
+}
+
 export const numberSelect = <T extends number>(
   name: string,
   options: { [s: string]: T },
diff --git a/storybook/stories/utils/utils.ts b/storybook/stories/utils/utils.ts
index 34ed7d685c..c6c27f940d 100644
--- a/storybook/stories/utils/utils.ts
+++ b/storybook/stories/utils/utils.ts
@@ -38,6 +38,10 @@ const hexStringToTuple = (s: string) => [
   String(parseInt(s.slice(5, 7), 16)),
 ];
 
+export const wait = <T extends () => any>(n: number, cb: T): Promise<ReturnType<T>> => {
+  return new Promise<ReturnType<T>>((resolve) => setTimeout(resolve, n)).then(cb);
+};
+
 export const plasma18 = [
   '#0d0887',
   '#2f0596',
diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
index c7e3bc4f72..16fe34e5a1 100644
--- a/storybook/webpack.config.js
+++ b/storybook/webpack.config.js
@@ -40,6 +40,8 @@ const MAX_CYCLES = 0;
 let numCyclesDetected = 0;
 
 module.exports = ({ config }) => {
+  config.mode = 'development';
+
   if (process.env.CI) {
     config.plugins.push(
       new CircularDependencyPlugin({
diff --git a/yarn.lock b/yarn.lock
index 4f73d4e569..76c7a08be6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10758,7 +10758,8 @@ eslint-module-utils@^2.7.3:
     find-up "^2.1.0"
 
 "eslint-plugin-elastic-charts@link:./packages/eslint-plugin-elastic-charts":
-  version "1.0.0"
+  version "0.0.0"
+  uid ""
 
 eslint-plugin-eslint-comments@^3.2.0:
   version "3.2.0"