fix: clear stale active bar layer state by pupuking723 · Pull Request #7547 · recharts/recharts

pupuking723 · 2026-07-11T15:12:46Z

When an active Bar moves into the active z-index layer, it waits for transitionend before returning to the normal bar layer. If another bar becomes active before that event fires, the previous bar can stay in the active layer as an inactive shape.

This clears that stale layer state when the active index/dataKey points to another bar, while preserving the existing transitionend path when the chart simply becomes inactive.

Verification:

npm run test -- test/cartesian/Bar/Bar.csstransition.spec.tsx -t "should remove the old active layer bar when another bar becomes active"
npm run test -- test/cartesian/Bar/Bar.csstransition.spec.tsx
npx eslint src/cartesian/Bar.tsx test/cartesian/Bar/Bar.csstransition.spec.tsx
npx prettier --check src/cartesian/Bar.tsx test/cartesian/Bar/Bar.csstransition.spec.tsx

Summary by CodeRabbit

Bug Fixes
- Fixed bar hover transitions so the previously active bar is removed from the active layer when another bar is selected.
- Ensured only the newly selected bar remains highlighted during repeated hover interactions.

coderabbitai · 2026-07-11T15:13:16Z

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: d5b7698d-d0c7-4e50-b814-8bfd04b3796e

📥 Commits

Reviewing files that changed from the base of the PR and between 97e0c77 and 17008a0.

📒 Files selected for processing (2)

src/cartesian/Bar.tsx
test/cartesian/Bar/Bar.csstransition.spec.tsx

Walkthrough

Bar active-state rendering now clears stale layering when another bar becomes active. A CSS transition test verifies tooltip-driven switching leaves only the newly active bar in the active layer.

Changes

Bar active-layer transition

Layer / File(s)	Summary
Clear stale active-layer state `src/cartesian/Bar.tsx`	Adds detection for another active bar and resets `stayInLayer` during the inactive transition, including the new effect dependency.
Verify tooltip-driven bar switching `test/cartesian/Bar/Bar.csstransition.spec.tsx`	Uses coordinate-based tooltip activation and verifies that the active layer contains exactly one active bar with no inactive bars.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

recharts/recharts#6479: Related active-bar layering behavior and tests.
recharts/recharts#7006: Related active/inactive layer transition handling.

Suggested reviewers: PavelVanecek, ckifer

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the active bar state fix.
Description check	✅ Passed	The description covers the issue, motivation, testing, and related issue, with only non-critical template sections omitted.
Linked Issues check	✅ Passed	The changes address `#6953` by clearing stale active-bar state when hover shifts or the chart becomes inactive.
Out of Scope Changes check	✅ Passed	All code and test changes stay within the active-bar layer state fix and its coverage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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-07-11T15:15:56Z

Bundle Report

Changes will increase total bundle size by 20.14kB (0.36%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.45MB	4.39kB (0.3%) ⬆️
recharts/bundle-es6	1.27MB	4.18kB (0.33%) ⬆️
recharts/bundle-umd	586.15kB	-8.0kB (-1.35%) ⬇️
recharts/bundle-treeshaking-cartesian	725.53kB	9.8kB (1.37%) ⬆️
recharts/bundle-treeshaking-polar	476.84kB	5.42kB (1.15%) ⬆️
recharts/bundle-treeshaking-treemap	390.94kB	4.36kB (1.13%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	-8.0kB	586.15kB	-1.35%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`state/selectors/axisSelectors.js`	1.85kB	62.83kB	3.03%
`chart/Sankey.js`	4.35kB	37.99kB	12.92% ⚠️
`chart/Treemap.js`	-14 bytes	33.85kB	-0.04%
`cartesian/Bar.js`	327 bytes	31.96kB	1.03%
`polar/Pie.js`	81 bytes	27.68kB	0.29%
`cartesian/Scatter.js`	2.5kB	26.87kB	10.27% ⚠️
`cartesian/Area.js`	81 bytes	25.71kB	0.32%
`cartesian/Line.js`	81 bytes	22.26kB	0.37%
`polar/RadialBar.js`	88 bytes	21.4kB	0.41%
`cartesian/Funnel.js`	81 bytes	21.13kB	0.38%
`cartesian/CartesianGrid.js`	1.51kB	18.0kB	9.14% ⚠️
`util/scale/getNiceTickValues.js`	351 bytes	13.15kB	2.74%
`cartesian/ErrorBar.js`	-14 bytes	12.23kB	-0.11%
`animation/AnimationHandle.js` (New)	9.73kB	9.73kB	100.0% 🚀
`cartesian/LineDrawShape.js`	216 bytes	7.52kB	2.96%
`component/DefaultLegendContent.js`	38 bytes	6.89kB	0.55%
`index.js`	285 bytes	4.57kB	6.65% ⚠️
`animation/CSSTransitionAnimate.js`	-925 bytes	4.53kB	-16.95%
`animation/JavascriptAnimate.js`	-7 bytes	3.81kB	-0.18%
`theme/graphicalItemIdentity.js` (New)	2.54kB	2.54kB	100.0% 🚀
`animation/useAnimationController.js` (New)	1.74kB	1.74kB	100.0% 🚀
`animation/timeoutController.js`	324 bytes	1.31kB	32.73% ⚠️
`animation/AnimationControllerImpl.js` (New)	1.22kB	1.22kB	100.0% 🚀
`theme/RechartsThemeContext.js` (New)	481 bytes	481 bytes	100.0% 🚀
`theme/legacyTheme.js` (New)	376 bytes	376 bytes	100.0% 🚀
`animation/util.js`	-2.57kB	330 bytes	-88.62%
`theme/lightTheme.js` (New)	226 bytes	226 bytes	100.0% 🚀
`theme/darkTheme.js` (New)	128 bytes	128 bytes	100.0% 🚀
`animation/AnimationController.js` (New)	10 bytes	10 bytes	100.0% 🚀
`theme/RechartsTheme.js` (New)	10 bytes	10 bytes	100.0% 🚀
~~`animation/ProgressAnimationManager.js`~~ (Deleted)	-6.63kB	0 bytes	-100.0% 🗑️
~~`animation/AnimationProgressProvider.js`~~ (Deleted)	-5.77kB	0 bytes	-100.0% 🗑️
~~`animation/configUpdate.js`~~ (Deleted)	-3.33kB	0 bytes	-100.0% 🗑️
~~`animation/AnimationManager.js`~~ (Deleted)	-2.9kB	0 bytes	-100.0% 🗑️
~~`animation/ManualTimeoutController.js`~~ (Deleted)	-1.4kB	0 bytes	-100.0% 🗑️
~~`animation/useAnimationManager.js`~~ (Deleted)	-619 bytes	0 bytes	-100.0% 🗑️
~~`animation/createDefaultAnimationManager.js`~~ (Deleted)	-265 bytes	0 bytes	-100.0% 🗑️

view changes for bundle: recharts/bundle-treeshaking-polar

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	5.42kB	476.84kB	1.15%

view changes for bundle: recharts/bundle-treeshaking-treemap

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	4.36kB	390.94kB	1.13%

view changes for bundle: recharts/bundle-treeshaking-cartesian

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	9.8kB	725.53kB	1.37%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`state/selectors/axisSelectors.js`	2.05kB	73.05kB	2.88%
`chart/Sankey.js`	4.4kB	39.8kB	12.42% ⚠️
`chart/Treemap.js`	-5 bytes	35.57kB	-0.01%
`cartesian/Bar.js`	327 bytes	33.7kB	0.98%
`polar/Pie.js`	81 bytes	29.49kB	0.28%
`cartesian/Scatter.js`	2.52kB	28.49kB	9.7% ⚠️
`cartesian/Area.js`	81 bytes	27.36kB	0.3%
`cartesian/Line.js`	81 bytes	23.82kB	0.34%
`polar/RadialBar.js`	88 bytes	22.83kB	0.39%
`cartesian/Funnel.js`	81 bytes	22.59kB	0.36%
`cartesian/CartesianGrid.js`	1.54kB	19.33kB	8.64% ⚠️
`index.js`	993 bytes	17.78kB	5.91% ⚠️
`util/scale/getNiceTickValues.js`	351 bytes	14.08kB	2.56%
`cartesian/ErrorBar.js`	-5 bytes	13.24kB	-0.04%
`animation/AnimationHandle.js` (New)	9.99kB	9.99kB	100.0% 🚀
`cartesian/LineDrawShape.js`	216 bytes	8.3kB	2.67%
`component/DefaultLegendContent.js`	38 bytes	7.85kB	0.49%
`animation/CSSTransitionAnimate.js`	-878 bytes	4.82kB	-15.4%
`animation/JavascriptAnimate.js`	-125 bytes	4.07kB	-2.98%
`theme/graphicalItemIdentity.js` (New)	2.67kB	2.67kB	100.0% 🚀
`animation/useAnimationController.js` (New)	1.97kB	1.97kB	100.0% 🚀
`animation/timeoutController.js`	324 bytes	1.53kB	26.8% ⚠️
`animation/AnimationControllerImpl.js` (New)	1.4kB	1.4kB	100.0% 🚀
`theme/RechartsThemeContext.js` (New)	708 bytes	708 bytes	100.0% 🚀
`animation/util.js`	-2.76kB	533 bytes	-83.79%
`theme/legacyTheme.js` (New)	501 bytes	501 bytes	100.0% 🚀
`theme/lightTheme.js` (New)	349 bytes	349 bytes	100.0% 🚀
`theme/darkTheme.js` (New)	249 bytes	249 bytes	100.0% 🚀
`animation/AnimationController.js` (New)	13 bytes	13 bytes	100.0% 🚀
`theme/RechartsTheme.js` (New)	13 bytes	13 bytes	100.0% 🚀
~~`animation/ProgressAnimationManager.js`~~ (Deleted)	-6.83kB	0 bytes	-100.0% 🗑️
~~`animation/AnimationProgressProvider.js`~~ (Deleted)	-6.66kB	0 bytes	-100.0% 🗑️
~~`animation/configUpdate.js`~~ (Deleted)	-3.5kB	0 bytes	-100.0% 🗑️
~~`animation/AnimationManager.js`~~ (Deleted)	-3.02kB	0 bytes	-100.0% 🗑️
~~`animation/ManualTimeoutController.js`~~ (Deleted)	-1.58kB	0 bytes	-100.0% 🗑️
~~`animation/useAnimationManager.js`~~ (Deleted)	-850 bytes	0 bytes	-100.0% 🗑️
~~`animation/createDefaultAnimationManager.js`~~ (Deleted)	-426 bytes	0 bytes	-100.0% 🗑️

codecov · 2026-07-11T15:22:25Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.18%. Comparing base (ce639fa) to head (17008a0).
⚠️ Report is 57 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7547      +/-   ##
==========================================
- Coverage   88.25%   88.18%   -0.08%     
==========================================
  Files         607      613       +6     
  Lines       14102    14250     +148     
  Branches     3544     3582      +38     
==========================================
+ Hits        12446    12566     +120     
- Misses       1469     1494      +25     
- Partials      187      190       +3

☔ 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.

fix: clear stale active bar layer state

17008a0

PavelVanecek approved these changes Jul 11, 2026

View reviewed changes

PavelVanecek merged commit 2fa048e into recharts:main Jul 12, 2026
57 of 58 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: clear stale active bar layer state#7547

fix: clear stale active bar layer state#7547
PavelVanecek merged 1 commit into
recharts:mainfrom
pupuking723:fix/stuck-active-bar-focus

pupuking723 commented Jul 11, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jul 11, 2026

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jul 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

pupuking723 commented Jul 11, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Uh oh!

codecov Bot commented Jul 11, 2026

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jul 11, 2026

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pupuking723 commented Jul 11, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 11, 2026 •

edited

Loading