Add animate-by-scroll example and update docs by PavelVanecek · Pull Request #7487 · recharts/recharts

PavelVanecek · 2026-06-23T11:11:45Z

Docs and comments only

Summary by CodeRabbit

New Features
- Added a scroll-driven animation example demonstrating how to control chart animations based on scroll position.
Documentation
- Enhanced animation guide with a new section on customizing animation controllers, including use-case examples and related resources.
- Added documentation references to animation functionality.
Chores
- Updated test exclusion lists for animation-related exports.

coderabbitai · 2026-06-23T11:12:06Z

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: 870ba974-2a25-452a-b2de-516c88a0a271

📥 Commits

Reviewing files that changed from the base of the PR and between 6dbe130 and f37a3ae.

📒 Files selected for processing (9)

omnidoc/verifyExamples.spec.ts
src/animation/AnimationController.ts
src/animation/AnimationHandle.ts
src/animation/timeoutController.ts
src/animation/useAnimationController.tsx
www/src/components/GuideView/Animations/index.tsx
www/src/components/ManualAnimationContext.tsx
www/src/docs/exampleComponents/BarChart/ScrollAnimateBarChart.tsx
www/src/docs/exampleComponents/BarChart/index.tsx

💤 Files with no reviewable changes (1)

omnidoc/verifyExamples.spec.ts

Walkthrough

Adds a new ScrollAnimateBarChart example that implements a custom AnimationController driven by window.scrollY and registers it in the barChartExamples map. The animations guide gains a new "Customize animation controller" section. JSDoc @see links are added across animation source files, and the corresponding exports are removed from the exportsThatNeedExamples exclusion list.

Changes

Scroll-Driven Animation Example and Guide Update

Layer / File(s)	Summary
ScrollAnimateBarChart component and registration `www/src/docs/exampleComponents/BarChart/ScrollAnimateBarChart.tsx`, `www/src/docs/exampleComponents/BarChart/index.tsx`	Defines `ScrollAnimateBarChart` with a custom `AnimationController` that reads `window.scrollY`, ticks `AnimationHandle` to derive a normalized animation fraction, and wraps the chart in `AnimationControllerProvider`. Registers the new example in `barChartExamples` with description text noting the Recharts 3.9 APIs.
Animations guide: new section and ManualAnimationContext styling `www/src/components/GuideView/Animations/index.tsx`, `www/src/components/ManualAnimationContext.tsx`	Adds a new guide section describing `AnimationControllerProvider` use-cases (scroll, WebSocket, manual driving) with links to the new example, test files, and `ManualAnimationContext`. Applies minor whitespace fixes around the existing `CustomAnimationExample` block. Adjusts `radioGroupStyle` margin to `'1ex'` and `radioLabelStyle` to add `cursor: 'pointer'` while removing prior `fontSize`/`color` overrides.
Animation JSDoc `@see` links and verifyExamples exclusion cleanup `src/animation/AnimationController.ts`, `src/animation/AnimationHandle.ts`, `src/animation/timeoutController.ts`, `src/animation/useAnimationController.tsx`, `omnidoc/verifyExamples.spec.ts`	Inserts `@see` links to the animations guide in JSDoc blocks across animation source files. Removes `AnimationController`, `AnimationControllerProvider`, `AnimationHandle`, `CancelableTimeout`, `OnAnimationStateUpdate`, and `createHorizontalChart` from the `exportsThatNeedExamples` exclusion list.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

recharts/recharts#7484: Directly adds the same ScrollAnimateBarChart scroll-driven AnimationController example and updates the same omnidoc/verifyExamples.spec.ts exclusions for animation controller exports.
recharts/recharts#7481: Updates omnidoc/verifyExamples.spec.ts to change example-coverage expectations for the same animation-related exports (AnimationController, AnimationControllerProvider, etc.).
recharts/recharts#7179: Modifies the same www/src/components/GuideView/Animations/index.tsx animations guide file, building on the same guide content and examples.

Suggested reviewers

ckifer

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is minimal ('Docs and comments only') and does not follow the required template with sections like Related Issue, Motivation and Context, or How Has This Been Tested.	Expand the description to include all required template sections: Related Issue, Motivation and Context, How Has This Been Tested, and completed Checklist items.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main changes: adding an animate-by-scroll example and updating related documentation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 animation-examples

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-23T11:15:23Z

Bundle Report

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

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.43MB	214 bytes (0.01%) ⬆️
recharts/bundle-es6	1.26MB	214 bytes (0.02%) ⬆️
recharts/bundle-treeshaking-cartesian	717.9kB	214 bytes (0.03%) ⬆️
recharts/bundle-treeshaking-polar	474.49kB	214 bytes (0.05%) ⬆️
recharts/bundle-treeshaking-treemap	388.75kB	214 bytes (0.06%) ⬆️
recharts/bundle-treeshaking-sankey	375.48kB	214 bytes (0.06%) ⬆️

Affected Assets, Files, and Routes:

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	214 bytes	717.9kB	0.03%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`animation/AnimationHandle.js`	86 bytes	9.99kB	0.87%
`animation/useAnimationController.js`	42 bytes	1.97kB	2.17%
`animation/timeoutController.js`	86 bytes	1.53kB	5.94% ⚠️

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	214 bytes	388.75kB	0.06%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`animation/AnimationHandle.js`	86 bytes	9.73kB	0.89%
`animation/useAnimationController.js`	42 bytes	1.74kB	2.48%
`animation/timeoutController.js`	86 bytes	1.31kB	7.0% ⚠️

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	214 bytes	474.49kB	0.05%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	214 bytes	375.48kB	0.06%

chromatic-com · 2026-06-23T11:19:33Z

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-23T11:19:40Z

Codecov Report

❌ Patch coverage is 57.89474% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.06%. Comparing base (a2c4171) to head (f37a3ae).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...ampleComponents/BarChart/ScrollAnimateBarChart.tsx	57.89%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7487      +/-   ##
==========================================
- Coverage   88.10%   88.06%   -0.04%     
==========================================
  Files         603      604       +1     
  Lines       13975    13994      +19     
  Branches     3523     3524       +1     
==========================================
+ Hits        12312    12324      +12     
- Misses       1476     1483       +7     
  Partials      187      187

☔ 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-23T11:24:13Z

Staging Deployment Details

These deployments will remain available for 30 days.

PavelVanecek added 3 commits June 22, 2026 23:19

Add new example where chart animates by scroll

b77d69a

font size

f31736d

Update animations guide and comments

f37a3ae

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

PavelVanecek deleted the animation-examples branch June 23, 2026 11:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add animate-by-scroll example and update docs#7487

Add animate-by-scroll example and update docs#7487
PavelVanecek merged 3 commits into
mainfrom
animation-examples

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 •

edited

Loading

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

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!

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 PRs

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

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

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

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

codecov Bot commented Jun 23, 2026 •

edited

Loading

chromatic-com Bot commented Jun 23, 2026 •

edited

Loading