diff --git a/packages/charts/src/components/_global.scss b/packages/charts/src/components/_global.scss
index 2b68010552..87509344da 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: 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);
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