fix(legend): custom legend covered by background (#2366)

elastic · Mar 18, 2024 · 5b9ffac · 5b9ffac
1 parent 7bebd6b
commit 5b9ffac
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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