From f8429fbb4d22f0f832e8e662f25ab2f884788061 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Sat, 16 Mar 2024 15:53:59 -0500
Subject: [PATCH 1/2] fix(legend): custom legend covered by background

---
 packages/charts/src/components/_global.scss         | 1 +
 storybook/stories/legend/16_custom_legend.story.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/charts/src/components/_global.scss b/packages/charts/src/components/_global.scss
index 2b68010552..d2aa044add 100644
--- a/packages/charts/src/components/_global.scss
+++ b/packages/charts/src/components/_global.scss
@@ -13,4 +13,5 @@
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: -1;
 }
diff --git a/storybook/stories/legend/16_custom_legend.story.tsx b/storybook/stories/legend/16_custom_legend.story.tsx
index f633261963..8b0f55d0aa 100644
--- a/storybook/stories/legend/16_custom_legend.story.tsx
+++ b/storybook/stories/legend/16_custom_legend.story.tsx
@@ -42,7 +42,7 @@ const allMetrics = [...data3, ...data2, ...data1];
 
 export const Example: ChartsStory = (_, { title, description }) => {
   const customLegend: CustomLegend = ({ items, pointerValue }) => (
-    <div style={{ width: '100%', position: 'relative' }}>
+    <div style={{ width: '100%' }}>
       <p style={{ height: '1.5em' }}>{pointerValue ? moment(pointerValue?.value).format('HH:mm') : 'System Load'}</p>
       {items.map((i) => (
         <button

From ffa1534a165a1e6c7e7f2b98046da9cae44d9252 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Sun, 17 Mar 2024 13:18:12 -0500
Subject: [PATCH 2/2] chore: tweak z-index styles

---
 packages/charts/src/components/_global.scss        | 2 +-
 packages/charts/src/components/legend/_legend.scss | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/charts/src/components/_global.scss b/packages/charts/src/components/_global.scss
index d2aa044add..87509344da 100644
--- a/packages/charts/src/components/_global.scss
+++ b/packages/charts/src/components/_global.scss
@@ -13,5 +13,5 @@
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: -1;
+  z-index: 0;
 }
diff --git a/packages/charts/src/components/legend/_legend.scss b/packages/charts/src/components/legend/_legend.scss
index 353b8fa418..1b06aacbda 100644
--- a/packages/charts/src/components/legend/_legend.scss
+++ b/packages/charts/src/components/legend/_legend.scss
@@ -1,4 +1,6 @@
 .echLegend {
+  z-index: 1;
+
   .echLegendList {
     display: grid;
     grid-template-columns: minmax(0, 1fr);