From 4923880a6e13c910fe5976d42d531d431f06c6de Mon Sep 17 00:00:00 2001 From: medic-bot Date: Sun, 8 Mar 2026 12:06:16 -0400 Subject: [PATCH] Add box-shadow and z-index to chart tooltips for better visibility (#19) Tooltip was blending with the legend labels at the bottom of the chart, especially when showing all categories at once. Added shadow and z-index to ensure the tooltip stands out from the background. Co-Authored-By: Claude Opus 4.6 --- src/components/reports/CategoryBarChart.tsx | 2 ++ src/components/reports/CategoryOverTimeChart.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/reports/CategoryBarChart.tsx b/src/components/reports/CategoryBarChart.tsx index 9e01f89..16fcdf1 100644 --- a/src/components/reports/CategoryBarChart.tsx +++ b/src/components/reports/CategoryBarChart.tsx @@ -107,7 +107,9 @@ export default function CategoryBarChart({ border: "1px solid var(--border)", borderRadius: "8px", color: "var(--foreground)", + boxShadow: "0 4px 12px rgba(0,0,0,0.15)", }} + wrapperStyle={{ zIndex: 50 }} labelStyle={{ color: "var(--foreground)" }} itemStyle={{ color: "var(--foreground)" }} /> diff --git a/src/components/reports/CategoryOverTimeChart.tsx b/src/components/reports/CategoryOverTimeChart.tsx index cc1f9f2..a8c8523 100644 --- a/src/components/reports/CategoryOverTimeChart.tsx +++ b/src/components/reports/CategoryOverTimeChart.tsx @@ -123,7 +123,9 @@ export default function CategoryOverTimeChart({ border: "1px solid var(--border)", borderRadius: "8px", color: "var(--foreground)", + boxShadow: "0 4px 12px rgba(0,0,0,0.15)", }} + wrapperStyle={{ zIndex: 50 }} labelStyle={{ color: "var(--foreground)" }} itemStyle={{ color: "var(--foreground)" }} filterNull -- 2.45.2