From 7da8131a63c9bd7d821a8388dbb8a980ae4532d3 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Mon, 15 Dec 2025 18:04:26 +0100
Subject: [PATCH] Fix chart tooltip stacking over legend FE-2130 (#41357)

fix
---
 .../components/ui/Charts/ComposedChart.tsx    | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/apps/studio/components/ui/Charts/ComposedChart.tsx b/apps/studio/components/ui/Charts/ComposedChart.tsx
index 416e2d8a946..a247be4eed3 100644
--- a/apps/studio/components/ui/Charts/ComposedChart.tsx
+++ b/apps/studio/components/ui/Charts/ComposedChart.tsx
@@ -541,34 +541,36 @@ export function ComposedChart({
         </div>
       )}
       {showLegend && (
-        <CustomLabel
-          payload={[maxAttributeData, ...chartData]}
-          attributes={attributes}
-          showMaxValue={_showMaxValue}
-          onLabelHover={setHoveredLabel}
-          onToggleAttribute={(attribute, options) => {
-            setHiddenAttributes((prev) => {
-              if (options?.exclusive) {
-                const next = new Set<string>()
-                // Hide every attribute except the selected one. If all but one are hidden, clicking again will reset to all visible.
-                const allNames = chartData.map((c) => c.name)
-                const allHiddenExcept = allNames.filter((n) => n !== attribute)
-                const isAlreadyExclusive =
-                  allHiddenExcept.every((n) => prev.has(n)) && !prev.has(attribute)
-                return isAlreadyExclusive ? new Set() : new Set(allHiddenExcept)
-              }
+        <div className="relative z-0">
+          <CustomLabel
+            payload={[maxAttributeData, ...chartData]}
+            attributes={attributes}
+            showMaxValue={_showMaxValue}
+            onLabelHover={setHoveredLabel}
+            onToggleAttribute={(attribute, options) => {
+              setHiddenAttributes((prev) => {
+                if (options?.exclusive) {
+                  const next = new Set<string>()
+                  // Hide every attribute except the selected one. If all but one are hidden, clicking again will reset to all visible.
+                  const allNames = chartData.map((c) => c.name)
+                  const allHiddenExcept = allNames.filter((n) => n !== attribute)
+                  const isAlreadyExclusive =
+                    allHiddenExcept.every((n) => prev.has(n)) && !prev.has(attribute)
+                  return isAlreadyExclusive ? new Set() : new Set(allHiddenExcept)
+                }
 
-              const next = new Set(prev)
-              if (next.has(attribute)) {
-                next.delete(attribute)
-              } else {
-                next.add(attribute)
-              }
-              return next
-            })
-          }}
-          hiddenAttributes={hiddenAttributes}
-        />
+                const next = new Set(prev)
+                if (next.has(attribute)) {
+                  next.delete(attribute)
+                } else {
+                  next.add(attribute)
+                }
+                return next
+              })
+            }}
+            hiddenAttributes={hiddenAttributes}
+          />
+        </div>
       )}
     </div>
   )