fix: preserve single-value line dash gaps during animation by puneetdixit200 · Pull Request #7405 · recharts/recharts

puneetdixit200 · 2026-06-04T09:31:38Z

Description

Single-value SVG strokeDasharray patterns repeat themselves, so strokeDasharray="5" should behave like 5 5. During the animated line reveal, Recharts currently normalizes odd dash arrays by appending 0, which turns 5 into 5 0 and removes the visible gap.

This normalizes odd dash patterns by repeating the pattern before calculating the animated dash reveal.

Related Issue

Fixes #3588

Motivation and Context

This keeps the entrance animation consistent with SVG stroke-dasharray semantics and prevents a single-value dashed line from rendering as a solid line while it animates.

How Has This Been Tested?

Red before fix: npm run test -- test/cartesian/Line.animation.spec.tsx -t "single-value dash gaps" failed with 5px, 0px, 5px, 0px, 0px, 100px
npm run test -- test/cartesian/Line.animation.spec.tsx -t "single-value dash gaps"
npm run test -- test/cartesian/Line.animation.spec.tsx
npm run test -- test/cartesian/Line.spec.tsx -t strokeDasharray
npm run test -- test/cartesian/Line.animation.spec.tsx test/cartesian/Line.spec.tsx
npx eslint src/cartesian/LineDrawShape.tsx test/cartesian/Line.animation.spec.tsx
npm run check-types-lib
npm run check-types-test
npm run omnidoc
npm run lint (passes with existing warning-level docs example messages)
git diff --check

I also ran full npm run test; it fails locally in unrelated Treemap/Tooltip timer-loop tests and omnidoc timeout tests, while the affected Line test files pass.

Screenshots (if appropriate):

N/A

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my changes.
I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

Summary by CodeRabbit

Bug Fixes
- Enhanced dashed line rendering to properly interpret custom dash patterns, ensuring consistent SVG stroke-dasharray behavior across all pattern configurations.
Tests
- Added test case to verify correct animation progression of stroke dash arrays with single-value patterns, ensuring proper dash-gap behavior during animation cycles.

coderabbitai · 2026-06-04T09:34:10Z

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: 1d671df3-3977-4ac1-a3c5-5bc11122d788

📥 Commits

Reviewing files that changed from the base of the PR and between 25b5622 and adf8fb8.

📒 Files selected for processing (2)

src/cartesian/LineDrawShape.tsx
test/cartesian/Line.animation.spec.tsx

Walkthrough

This PR fixes the handling of custom odd-length dash patterns in stroke-dasharray animations. A new normalizeDashPattern helper coerces user input to even-length sequences, and the stroke-dasharray computation was refactored to use normalized values throughout line-length and remainder calculations. A test case validates that single-value patterns animate correctly.

Changes

Dash Pattern Normalization for Animations

Layer / File(s)	Summary
Dash pattern normalization helper `src/cartesian/LineDrawShape.tsx`	Introduced `normalizeDashPattern(lines)` to duplicate odd-length arrays to even length, and updated `repeat(lines, count)` to repeat without auto-padding.
Stroke-dasharray computation with normalized patterns `src/cartesian/LineDrawShape.tsx`, `test/cartesian/Line.animation.spec.tsx`	Updated `getStrokeDasharray` to compute `lineLength` and `remainLines` from normalized patterns and generate the final dasharray string using the normalized sequence. Added test case asserting that `strokeDasharray="5"` preserves single-value dash-gap behavior during animation progress steps.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

recharts/recharts#7289: Both PRs update test/cartesian/Line.animation.spec.tsx to assert stroke-dasharray animation/progression behavior for Line inputs (including single-value dash patterns), so the test coverage overlaps directly.
recharts/recharts#7022: Both PRs adjust the SVG strokeDasharray/dash repeat logic for line draw animations—especially how odd-length custom dash patterns are normalized/padded and how the dash gap is computed—so the changes are directly related at the dasharray computation level.

Suggested reviewers

ckifer
PavelVanecek

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main fix: preserving single-value line dash gaps during animation, which directly matches the primary code change in LineDrawShape.tsx.
Description check	✅ Passed	The PR description covers all required template sections: description of the issue, related issue link (`#3588`), motivation/context, detailed testing steps, types of changes marked, and checklist items completed appropriately.
Linked Issues check	✅ Passed	The PR directly addresses issue `#3588` by implementing dash pattern normalization in LineDrawShape.tsx to preserve single-value strokeDasharray semantics during animation, matching the issue's requirement to respect stroke-dasharray in custom animation setups.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the dash pattern normalization issue: LineDrawShape.tsx was modified to normalize odd-length patterns, and a test was added to verify the fix, both directly addressing the linked issue.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ 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 and usage tips.}

codecov · 2026-06-04T10:25:19Z

Bundle Report

Changes will increase total bundle size by 674 bytes (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.45MB	216 bytes (0.01%) ⬆️
recharts/bundle-es6	1.27MB	216 bytes (0.02%) ⬆️
recharts/bundle-umd	595.65kB	26 bytes (0.0%) ⬆️
recharts/bundle-treeshaking-cartesian	718.43kB	216 bytes (0.03%) ⬆️

Affected Assets, Files, and Routes:

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	216 bytes	718.43kB	0.03%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/LineDrawShape.js`	216 bytes	8.3kB	2.67%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/LineDrawShape.js`	216 bytes	7.52kB	2.96%

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	26 bytes	595.65kB	0.0%

codecov · 2026-06-04T10:29:15Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.49%. Comparing base (25b5622) to head (adf8fb8).
⚠️ Report is 46 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7405   +/-   ##
=======================================
  Coverage   87.49%   87.49%           
=======================================
  Files         597      597           
  Lines       14183    14185    +2     
  Branches     3560     3559    -1     
=======================================
+ Hits        12409    12411    +2     
  Misses       1580     1580           
  Partials      194      194

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

PavelVanecek · 2026-06-04T22:02:44Z

@puneetdixit200 a screenshot or a video is very appropriate here. Can you please show how the animation changes?

fix: preserve single dash gaps during line animation

adf8fb8

PavelVanecek approved these changes Jun 4, 2026

View reviewed changes

PavelVanecek merged commit 0063aa4 into recharts:main Jun 23, 2026
58 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: preserve single-value line dash gaps during animation#7405

fix: preserve single-value line dash gaps during animation#7405
PavelVanecek merged 1 commit into
recharts:mainfrom
puneetdixit200:fix/single-stroke-dasharray-animation

puneetdixit200 commented Jun 4, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 4, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jun 4, 2026

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jun 4, 2026 •

edited

Loading

Uh oh!

PavelVanecek commented Jun 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

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

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 4, 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

Uh oh!

codecov Bot commented Jun 4, 2026

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

PavelVanecek commented Jun 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

puneetdixit200 commented Jun 4, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 4, 2026 •

edited

Loading

codecov Bot commented Jun 4, 2026 •

edited

Loading