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 <noreply@anthropic.com>
This commit is contained in:
parent
c8b92517e8
commit
4923880a6e
2 changed files with 4 additions and 0 deletions
|
|
@ -107,7 +107,9 @@ export default function CategoryBarChart({
|
||||||
border: "1px solid var(--border)",
|
border: "1px solid var(--border)",
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
color: "var(--foreground)",
|
color: "var(--foreground)",
|
||||||
|
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
||||||
}}
|
}}
|
||||||
|
wrapperStyle={{ zIndex: 50 }}
|
||||||
labelStyle={{ color: "var(--foreground)" }}
|
labelStyle={{ color: "var(--foreground)" }}
|
||||||
itemStyle={{ color: "var(--foreground)" }}
|
itemStyle={{ color: "var(--foreground)" }}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -123,7 +123,9 @@ export default function CategoryOverTimeChart({
|
||||||
border: "1px solid var(--border)",
|
border: "1px solid var(--border)",
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
color: "var(--foreground)",
|
color: "var(--foreground)",
|
||||||
|
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
||||||
}}
|
}}
|
||||||
|
wrapperStyle={{ zIndex: 50 }}
|
||||||
labelStyle={{ color: "var(--foreground)" }}
|
labelStyle={{ color: "var(--foreground)" }}
|
||||||
itemStyle={{ color: "var(--foreground)" }}
|
itemStyle={{ color: "var(--foreground)" }}
|
||||||
filterNull
|
filterNull
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue