Add custom fillOpacity on hover website example by PavelVanecek · Pull Request #7489 · recharts/recharts

PavelVanecek · 2026-06-23T12:45:54Z

Description

Cell is deprecated and will be removed in 4.0, please don't use Cell. This example shows setting opacity using hooks instead.

Related Issue

Closes #5045
Closes #4216

Summary by CodeRabbit

New Features
- Enhanced pie chart interactivity with improved visual feedback. Chart segments now display opacity changes with smooth transitions when hovering, providing a more intuitive and responsive user experience.

coderabbitai · 2026-06-23T12:46:13Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f5f56ab9-c5f9-4ee8-b548-0f0dc757ebb1

📥 Commits

Reviewing files that changed from the base of the PR and between 337edbd and 84d42f9.

📒 Files selected for processing (1)

www/src/docs/exampleComponents/PieChart/PieChartWithCustomizedLabel.tsx

Walkthrough

In PieChartWithCustomizedLabel.tsx, the recharts import is reformatted to multi-line. The MyCustomPie custom shape renderer is updated to call useActiveTooltipDataPoints() and useIsTooltipActive() hooks, conditionally setting fillOpacity to 0.5 for inactive sectors and 1 for the active sector, with an inline fill-opacity CSS transition.

Changes

PieChart Tooltip-Aware Opacity

Layer / File(s)	Summary
MyCustomPie tooltip hook integration `www/src/docs/exampleComponents/PieChart/PieChartWithCustomizedLabel.tsx`	`recharts` import is expanded to multi-line. `MyCustomPie` now calls `useActiveTooltipDataPoints()` and `useIsTooltipActive()` to determine active state per sector, sets `fillOpacity` to `0.5` when another sector is active and `1` otherwise, and adds an inline `transition` style for `fill-opacity`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Possibly related issues

#5045 — The PR updates the PieChartWithCustomizedLabel example to use tooltip hooks for opacity management, which directly addresses the label re-render/flicker caused by external onMouseEnter/onMouseLeave handlers changing fillOpacity.
#5805 — The change uses useActiveTooltipDataPoints() and useIsTooltipActive() to manage fillOpacity based on tooltip state, which corresponds to the hover-opacity-sticking problem described in that issue.

Suggested reviewers

ckifer

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add custom fillOpacity on hover website example' directly and clearly describes the main change: adding a website example demonstrating custom fillOpacity behavior on hover.
Linked Issues check	✅ Passed	The PR fulfills the requirements from `#5045` by providing a working example that demonstrates how to implement custom fillOpacity changes without causing label re-renders, using React hooks as an alternative to the deprecated Cell component.
Out of Scope Changes check	✅ Passed	All changes are scope-compliant: the reformatted imports and modified MyCustomPie renderer directly implement the hover fillOpacity functionality required to address the label re-rendering issue in `#5045`.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch pie-fillopacity

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

codecov · 2026-06-23T12:49:50Z

Bundle Report

Bundle size has no change ✅

chromatic-com · 2026-06-23T12:54:14Z

Tip

All tests passed and all changes approved!

🟢 UI Tests: 198 tests unchanged
🟢 UI Review: 198 stories published -- no changes
Storybook Publish: 198 stories published

codecov · 2026-06-23T12:54:24Z

Codecov Report

❌ Patch coverage is 0% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.02%. Comparing base (337edbd) to head (84d42f9).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...omponents/PieChart/PieChartWithCustomizedLabel.tsx	0.00%	6 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7489      +/-   ##
==========================================
- Coverage   88.06%   88.02%   -0.05%     
==========================================
  Files         604      604              
  Lines       13996    14003       +7     
  Branches     3524     3526       +2     
==========================================
  Hits        12326    12326              
- Misses       1483     1488       +5     
- Partials      187      189       +2

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

github-actions · 2026-06-23T12:59:04Z

Staging Deployment Details

These deployments will remain available for 30 days.

Add custom fillOpacity on hover

84d42f9

PavelVanecek merged commit e5fe9bb into main Jun 23, 2026
63 of 65 checks passed

PavelVanecek deleted the pie-fillopacity branch June 23, 2026 13:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add custom fillOpacity on hover website example#7489

Add custom fillOpacity on hover website example#7489
PavelVanecek merged 1 commit into
mainfrom
pie-fillopacity

PavelVanecek commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Jun 23, 2026

Uh oh!

chromatic-com Bot commented Jun 23, 2026 •

edited

Loading

All tests passed and all changes approved!

Uh oh!

codecov Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

PavelVanecek commented Jun 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Jun 23, 2026

Bundle Report

Uh oh!

chromatic-com Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All tests passed and all changes approved!

Uh oh!

codecov Bot commented Jun 23, 2026

Codecov Report

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

PavelVanecek commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

chromatic-com Bot commented Jun 23, 2026 •

edited

Loading