Skip to content

fix(ui): remove dark overlay on chart hover#598

Open
mrdeyroy wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
mrdeyroy:fix/commits-chart-hover-shadow
Open

fix(ui): remove dark overlay on chart hover#598
mrdeyroy wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
mrdeyroy:fix/commits-chart-hover-shadow

Conversation

@mrdeyroy
Copy link
Copy Markdown
Contributor

Summary

This PR fixes a visual UI bug in the "Your Commits" section where a dark rectangular shadow/overlay appeared behind hovered bars. The default Recharts <Tooltip /> cursor background was enabled but was visually inconsistent with the dashboard styling.

Setting the cursor prop to false across all chart variants (Bar, Line, and Area) successfully resolves this, ensuring clean and native-feeling hover states.

Closes #584

Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Refactor / code cleanup

Changes Made

  • Edited src/components/ContributionGraph.tsx
  • Modified <Tooltip /> configurations inside <BarChart>, <LineChart>, and <AreaChart>
  • Explicitly set cursor={false} to disable the default Recharts background rectangle overlay.

How to Test

Steps for the reviewer to verify this works:

  1. Run the development server locally using npm run dev.
  2. Navigate to the dashboard.
  3. Scroll down to the "Your Commits" section.
  4. Hover your mouse over individual data points across Bar, Line, and Area views.
  5. Verify that no dark background overlay appears behind the active datapoint and the tooltip itself displays flawlessly.

Screenshots (if UI change)

Before:
ui_bar_issue

After:
graph_fixed

Checklist

  • Linked issue in summary
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Self-reviewed the diff
  • Added/updated tests if applicable

@vercel
Copy link
Copy Markdown

vercel Bot commented May 21, 2026

@mrdeyroy is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) labels May 21, 2026
@github-actions
Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] : Chart Hover Overlay Creates Unwanted Dark Shadow on Commit Bars

1 participant