Skip to content

fix(Tooltip): find the active sector in the angle-axis wrap-around gap#7550

Merged
PavelVanecek merged 1 commit into
recharts:mainfrom
MahinAnowar:fix/angle-axis-active-tick-wrap
Jul 14, 2026
Merged

fix(Tooltip): find the active sector in the angle-axis wrap-around gap#7550
PavelVanecek merged 1 commit into
recharts:mainfrom
MahinAnowar:fix/angle-axis-active-tick-wrap

Conversation

@MahinAnowar

@MahinAnowar MahinAnowar commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Description

On a full-circle angle axis, calculateActiveTickIndex can return -1 for pointer angles near the range wrap, so hovering that part of a PieChart produces no active sector — onMouseMove gets no coordinates and the tooltip doesn't show. This is the calculation ckifer pinned down in the issue: tooltip ticks get shifted by the band offset (±4° for a 4-sector pie), which moves the first/last tick intervals partially out of the [0, 360] window. The pointer angle is always normalized into that window, so the slice between the last covered boundary and 360° (356°–360° in the 4-sector case, the "bottom right" from the reports) matches no interval and falls through to -1.

Zeroing the offset fixes pie but breaks RadarChart (as noted in the thread), so this fix leaves the offset alone and instead makes the interval matching wrap-aware: the coordinate is also tested shifted by a full turn in both directions. It's strictly widening — every coordinate that matched before still matches the same sector (the intervals partition the circle, so the shifted candidates can't produce a conflicting match), and only the previously-dead gap gains coverage.

Related Issue

Fixes #5099

Motivation and Context

Hovering near the wrap of a full-circle pie silently loses the tooltip/mouse coordinates even though the pointer is inside a sector.

How Has This Been Tested?

Unit tests in test/util/ChartUtils.spec.tsx using the exact tick shape the tooltip selector produces for a 4-sector pie (band starts shifted by -4, range [0, 360]): three pointer angles inside the wrap gap (357, 358, 359.9) return -1 on current main and sector 0 with this change, and five control angles across all sectors return the same index before and after the change. Also ran the full polar surface as a guard for the RadarChart concern from the thread: test/polar/, PieChart, RadarChart, RadialBarChart (19 files, 522 tests), plus test/state/ and the Tooltip component suites (64 files, 1236 tests), tsc, and eslint — all green.

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

    • Improved active sector detection for full-circle charts when angle coordinates wrap around or fall outside the standard range.
    • Ensured pointer interactions select the correct sector across wrap-around boundaries.
  • Tests

    • Added coverage for full-circle angle-axis interactions, including wrapped and offset coordinates.

@coderabbitai

coderabbitai Bot commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

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: 52457e5c-3e04-4612-9afe-420fc88d14da

📥 Commits

Reviewing files that changed from the base of the PR and between b6ba1ad and 2ccca9a.

📒 Files selected for processing (2)
  • src/util/getActiveCoordinate.ts
  • test/util/ChartUtils.spec.tsx

Walkthrough

Full-circle angleAxis active tick matching now handles wrap-around coordinates shifted by the interval span. Tests cover gap handling and expected sector selection for multiple pointer angles.

Changes

Angle-axis interval matching

Layer / File(s) Summary
Wrapped interval matching
src/util/getActiveCoordinate.ts
Adds isInside checks for direct and span-shifted coordinates across full-circle intervals, including same- and different-interval matching.
Full-circle regression coverage
test/util/ChartUtils.spec.tsx
Adds parameterized tests for offset-shifted angle ticks, wrap-around gaps, and expected active sector indexes.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

  • recharts/recharts#6754: Both changes modify calculateActiveTickIndex, including its return behavior and angle-axis matching logic.

Suggested reviewers: ckifer

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and accurately summarizes the wrap-around tooltip fix in the angle-axis logic.
Description check ✅ Passed The description covers the change, related issue, motivation, testing, type of change, and checklist items.
Linked Issues check ✅ Passed The change addresses #5099 by making angle-axis tick matching wrap-aware, which should restore coordinates in the PieChart gap.
Out of Scope Changes check ✅ Passed All code and tests are directly tied to the wrap-around tooltip bug; no unrelated changes are introduced.
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

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Bundle Report

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

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.45MB 635 bytes (0.04%) ⬆️
recharts/bundle-es6 1.27MB 635 bytes (0.05%) ⬆️
recharts/bundle-umd 586.48kB 54 bytes (0.01%) ⬆️
recharts/bundle-treeshaking-treemap 391.57kB 635 bytes (0.16%) ⬆️
recharts/bundle-treeshaking-sunburst 349.65kB 635 bytes (0.18%) ⬆️
recharts/bundle-treeshaking-sankey 383.14kB 635 bytes (0.17%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 54 bytes 586.48kB 0.01%
view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
util/getActiveCoordinate.js 635 bytes 7.99kB 8.63% ⚠️
view changes for bundle: recharts/bundle-treeshaking-sunburst

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 635 bytes 349.65kB 0.18%
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
util/getActiveCoordinate.js 635 bytes 8.49kB 8.08% ⚠️
view changes for bundle: recharts/bundle-treeshaking-sankey

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 635 bytes 383.14kB 0.17%
view changes for bundle: recharts/bundle-treeshaking-treemap

Assets Changed:

Asset Name Size Change Total Size Change (%)
bundle.js 635 bytes 391.57kB 0.16%

@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.19%. Comparing base (b6ba1ad) to head (2ccca9a).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7550   +/-   ##
=======================================
  Coverage   88.18%   88.19%           
=======================================
  Files         613      613           
  Lines       14258    14260    +2     
  Branches     3589     3588    -1     
=======================================
+ Hits        12574    12576    +2     
  Misses       1494     1494           
  Partials      190      190           

☔ 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
PavelVanecek merged commit 553e77b into recharts:main Jul 14, 2026
58 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

onMouseMove for PieChart has empty chartX and chartY coordinates

2 participants