fix(Area): connectNulls connects across stacked points where every series is null by kimlj · Pull Request #7566 · recharts/recharts

kimlj · 2026-07-20T09:54:51Z

Top chart is master, bottom is this PR. The all-null point (Page C) connects across; the partial-null point (Page F, only uv missing) still renders as 0, so the #7073 regression does not return.

Problem

In a stacked AreaChart with connectNulls, a data point where every series is null renders as a drop to 0 instead of connecting across the gap. d3-stack defaults nulls to 0, so value1 is never null for stacked data, and the !connectNulls guard is the only thing controlling null behavior there.

Change

computeArea in src/cartesian/Area.tsx marks a point as a break point when every dataKey in the stack group is null (wholeStackIsNull). The stack dataKeys are supplied by a new selectStackDataKeys selector in src/state/selectors/areaSelectors.ts.

The !connectNulls && rawValue == null guard is unchanged, so a point where only some series are null still renders as 0 in the stack.

Every series null at a point: connects across (new behavior).
Some series null at a point: unchanged, renders as 0 to preserve stack offsets.

Prior art

This is the design proposed by @Harikrushn9118 in #7085: keep the existing guard, add a separate all-null check, and pass the stack dataKeys into computeArea. #7085 was closed by its author before completion. This PR implements that design and commits the VR snapshots #7085 was missing.

History

#7041 removed the !connectNulls guard and was merged, then reverted in #7073 because it made stacked charts with a single null series render incorrectly. This PR keeps that guard and scopes the new behavior to the all-null case, so the #7073 regression does not return.

Tests

test/chart/AreaChart.spec.tsx: two regression tests, "connects across points where every stacked series is null if connectNulls is true" and "breaks at points where every stacked series is null if connectNulls is false". Both fail without the source change. The existing "Renders null points as 0 if stacked and connectNulls is true" test covers the partial-null case that must stay unchanged.
www example AreaChartConnectNulls.tsx: adds a dataWithGaps dataset with an all-null point at Page C and a partial-null point at Page F.
VR snapshots committed for chromium, firefox, and webkit.

Summary by CodeRabbit

Bug Fixes
- Improved stacked area gap/break detection when an entire stacked point has all series values missing, so gaps are handled correctly.
- connectNulls now reliably bridges fully missing stacked points, while keeping breaks when connectNulls is disabled.
- Partial missing values still render with correct stacked contributions.
Documentation
- Added stacked area examples showing how gaps are rendered with and without connectNulls.
Tests
- Added coverage validating connectNulls behavior for all-missing stacked points in area charts.

…ries is null A null value in one series of a stack still renders as zero contribution so the offsets of the series above are preserved. When every series in the stack is null at a data point there is no offset to preserve, so the point becomes a break point that connectNulls can connect across. Fixes recharts#6985

…pshots

coderabbitai · 2026-07-20T09:55:35Z

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: 2b14c3fb-abab-4180-a3e1-9a007656d929

📥 Commits

Reviewing files that changed from the base of the PR and between 1e1f762 and 29a5c1e.

⛔ Files ignored due to path filters (3)

test-vr/__snapshots__/tests/www/AreaChartApiExamples.spec-vr.tsx-snapshots/AreaChartConnectNulls-1-chromium-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/AreaChartApiExamples.spec-vr.tsx-snapshots/AreaChartConnectNulls-1-firefox-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/AreaChartApiExamples.spec-vr.tsx-snapshots/AreaChartConnectNulls-1-webkit-linux.png is excluded by !**/*.png

📒 Files selected for processing (4)

src/cartesian/Area.tsx
src/state/selectors/areaSelectors.ts
test/chart/AreaChart.spec.tsx
www/src/docs/exampleComponents/AreaChart/AreaChartConnectNulls.tsx

🚧 Files skipped from review as they are similar to previous changes (4)

src/state/selectors/areaSelectors.ts
test/chart/AreaChart.spec.tsx
www/src/docs/exampleComponents/AreaChart/AreaChartConnectNulls.tsx
src/cartesian/Area.tsx

Walkthrough

Changes

Stacked area null-gap handling

Layer / File(s)	Summary
Area breakpoint detection `src/cartesian/Area.tsx`	`computeArea` identifies points where all stacked series are null and applies breakpoint behavior.
Selector stack-key wiring `src/state/selectors/areaSelectors.ts`	The area selector derives contributing stack data keys and passes them to `computeArea`.
Null-gap validation and examples `test/chart/AreaChart.spec.tsx`, `www/src/docs/exampleComponents/AreaChart/AreaChartConnectNulls.tsx`	Tests and examples cover connected and disconnected all-null stacked points.

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

Sequence Diagram(s)

sequenceDiagram
  participant AreaChart
  participant selectArea
  participant computeArea
  AreaChart->>selectArea: request stacked area points
  selectArea->>computeArea: pass stackDataKeys
  computeArea->>computeArea: detect all-null stack breakpoint

Possibly related PRs

recharts/recharts#7041 — Overlaps in stacked computeArea breakpoint logic and null-value tests.
recharts/recharts#7073 — Overlaps in stacked-area gap handling for missing and null values.

Suggested reviewers: pavelvanecek

🚥 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
Title check	✅ Passed	The title clearly describes the main change: connectNulls now bridges fully null stacked points.
Description check	✅ Passed	The description covers the issue, motivation, implementation, and tests, even though some template sections are not filled out verbatim.
Linked Issues check	✅ Passed	The code and tests address `#6985` by connecting across all-null stack points while preserving zero behavior for partial-null stacks.
Out of Scope Changes check	✅ Passed	The changes stay focused on stacked AreaChart null handling, tests, and the matching example update.

✨ 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.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/cartesian/Area.tsx`:
- Line 983: Replace DataKey<any> with DataKey<unknown> in the stackDataKeys type
in src/cartesian/Area.tsx at lines 983-983 and in the return type of the area
selector in src/state/selectors/areaSelectors.ts at lines 141-145; preserve the
existing APIs and behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 08c36f9e-7c12-4c1d-a0df-31d324b428f5

📥 Commits

Reviewing files that changed from the base of the PR and between 082495a and 1e1f762.

⛔ Files ignored due to path filters (3)

test-vr/__snapshots__/tests/www/AreaChartApiExamples.spec-vr.tsx-snapshots/AreaChartConnectNulls-1-chromium-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/AreaChartApiExamples.spec-vr.tsx-snapshots/AreaChartConnectNulls-1-firefox-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/AreaChartApiExamples.spec-vr.tsx-snapshots/AreaChartConnectNulls-1-webkit-linux.png is excluded by !**/*.png

📒 Files selected for processing (4)

src/cartesian/Area.tsx
src/state/selectors/areaSelectors.ts
test/chart/AreaChart.spec.tsx
www/src/docs/exampleComponents/AreaChart/AreaChartConnectNulls.tsx

codecov · 2026-07-20T09:59:29Z

Bundle Report

Changes will decrease total bundle size by 506 bytes (-0.01%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.46MB	1.47kB (0.1%) ⬆️
recharts/bundle-es6	1.29MB	1.42kB (0.11%) ⬆️
recharts/bundle-umd	591.7kB	258 bytes (0.04%) ⬆️
recharts/bundle-treeshaking-cartesian	732.15kB	1.37kB (0.19%) ⬆️
recharts/bundle-treeshaking-treemap*	391.57kB	-1.67kB (-0.43%) ⬇️
recharts/bundle-treeshaking-sunburst*	349.65kB	-1.67kB (-0.48%) ⬇️
recharts/bundle-treeshaking-sankey*	383.14kB	-1.67kB (-0.44%) ⬇️

ℹ️ *Bundle size includes cached data from a previous commit

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/Area.js`	556 bytes	26.26kB	2.16%
`state/selectors/areaSelectors.js`	865 bytes	6.17kB	16.31% ⚠️

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	-1.67kB	383.14kB	-0.44%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	-1.67kB	349.65kB	-0.48%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`cartesian/Area.js`	573 bytes	27.93kB	2.09%
`state/selectors/areaSelectors.js`	892 bytes	6.75kB	15.24% ⚠️

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	258 bytes	591.7kB	0.04%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	1.37kB	732.15kB	0.19%

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`bundle.js`	-1.67kB	391.57kB	-0.43%

…aKey<any>

codecov · 2026-07-20T10:05:20Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.23%. Comparing base (ca62d1c) to head (29a5c1e).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7566      +/-   ##
==========================================
+ Coverage   88.20%   88.23%   +0.03%     
==========================================
  Files         615      619       +4     
  Lines       14276    14390     +114     
  Branches     3591     3645      +54     
==========================================
+ Hits        12592    12697     +105     
- Misses       1494     1499       +5     
- Partials      190      194       +4

☔ 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-07-20T10:12:24Z

Why did we close #7085 ?

kimlj added 2 commits July 20, 2026 14:31

docs(AreaChart): add connectNulls stacked all-null example and VR sna…

4d577e5

…pshots

coderabbitai Bot reviewed Jul 20, 2026

View reviewed changes

Comment thread src/cartesian/Area.tsx Outdated

refactor(Area): type stackDataKeys as DataKey<unknown> instead of Dat…

29a5c1e

…aKey<any>

kimlj force-pushed the fix/connect-nulls-stacked branch from 1e1f762 to 29a5c1e Compare July 20, 2026 10:21

PavelVanecek approved these changes Jul 20, 2026

View reviewed changes

PavelVanecek merged commit 9817ae5 into recharts:main Jul 20, 2026
58 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(Area): connectNulls connects across stacked points where every series is null#7566

fix(Area): connectNulls connects across stacked points where every series is null#7566
PavelVanecek merged 3 commits into
recharts:mainfrom
kimlj:fix/connect-nulls-stacked

kimlj commented Jul 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

codecov Bot commented Jul 20, 2026 •

edited

Loading

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jul 20, 2026 •

edited

Loading

Uh oh!

PavelVanecek commented Jul 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

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

Uh oh!

Problem

Change

Prior art

History

Tests

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov Bot commented Jul 20, 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:

Assets Changed:

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

PavelVanecek commented Jul 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kimlj commented Jul 20, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading

codecov Bot commented Jul 20, 2026 •

edited

Loading

codecov Bot commented Jul 20, 2026 •

edited

Loading