fix: add cursor prop type to BaseChartProps by mixelburg · Pull Request #7065 · recharts/recharts

mixelburg · 2026-02-27T22:12:21Z

The cursor SVG presentation attribute was already forwarded to the <svg> element at runtime (it's listed in SVGElementPropKeys in svgPropertiesNoEvents.ts), but was missing from the TypeScript type definitions, causing a TS error when passing it directly.

This adds cursor?: CSSProperties['cursor'] to BaseChartProps, which covers all chart components that extend it (BarChart, LineChart, AreaChart, PieChart, RadarChart, etc.).

Before:

// TS error: Property 'cursor' does not exist on type 'IntrinsicAttributes & ...'
<BarChart cursor="pointer" ... />

After:

// Works correctly, with proper type checking
<BarChart cursor="pointer" ... />
<LineChart cursor="crosshair" ... />
<PieChart cursor="default" ... />

Also adds a typed spec test file to verify compilation.

Summary by CodeRabbit

New Features
- Charts accept an optional cursor property to customize the mouse cursor over charts for improved visual feedback.
Tests
- Added type-focused tests verifying cursor compatibility across chart variants.
Documentation
- Expanded cross-component prop guidance and added an exception note clarifying cursor behavior for the tooltip component.

coderabbitai · 2026-02-27T22:12:43Z

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: ecd5eb51-34c2-4bfc-a3cc-feade46edf1e

📥 Commits

Reviewing files that changed from the base of the PR and between 65ad7de and 3a43b34.

📒 Files selected for processing (4)

omnidoc/commentSimilarityExceptions.ts
omnidoc/cross-component-prop-comments.spec.ts
src/util/types.ts
test/chart/BarChart.typed.spec.tsx

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

test/chart/BarChart.typed.spec.tsx
src/util/types.ts

Walkthrough

Added an optional cursor prop to BaseChartProps, updated cross-component documentation/tests, and added type tests verifying cursor compatibility across BarChart, LineChart, and PieChart; also added an omnidoc exception entry for Tooltip.cursor.

Changes

Cohort / File(s)	Summary
Type Definition `src/util/types.ts`	Added `cursor?: CSSProperties['cursor']` to `BaseChartProps` to expose CSS cursor typing for chart containers.
Type Compatibility Tests `test/chart/BarChart.typed.spec.tsx`	Added type-focused tests asserting `cursor` prop compatibility for `BarChart`, `LineChart`, and `PieChart`.
Omnidoc Exceptions `omnidoc/commentSimilarityExceptions.ts`	Added an exception entry distinguishing `Tooltip.cursor` (graphical highlight) from CSS cursor properties.
Omnidoc Guidance `omnidoc/cross-component-prop-comments.spec.ts`	Expanded JSDoc-style guidance in the cross-component prop comments test clarifying failure implications and when to add exceptions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Omnidoc: Area, AreaChart, Bar prop comments #6715: Adds shared cursor prop support, cross-component cursor tests, and a Tooltip.cursor exception—directly related to these changes.
omnidoc checks for non-existing but documented props #6582: Introduced stricter omnidoc prop-documentation checks; the new Tooltip.cursor exception relates to that infrastructure.

Suggested reviewers

ckifer

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding the cursor prop type to BaseChartProps interface.
Description check	✅ Passed	The description is complete with issue reference, motivation, before/after examples, and mentions test additions, aligning well with the template requirements.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#2484` by adding the cursor prop type definition to BaseChartProps, eliminating TypeScript errors when using cursor on chart components.
Out of Scope Changes check	✅ Passed	All changes are in scope: cursor prop type added to BaseChartProps, typed tests added, and comment exception documented for Tooltip's different cursor usage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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

coderabbitai

🧹 Nitpick comments (1)

test/chart/BarChart.typed.spec.tsx (1)
7-23: Type-checking tests look good, consider adding negative test cases.

The type compilation tests correctly verify that the cursor prop is accepted on chart components. For more comprehensive type coverage, consider adding a negative test case using @ts-expect-error to verify that invalid cursor values are rejected by TypeScript.
💡 Optional enhancement for negative type testing
  it('should reject invalid cursor values', () => {
    return (
      // `@ts-expect-error` - invalid cursor value should fail type check
      <BarChart width={400} height={300} data={data} cursor="invalid-cursor-value" />
    );
  });
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/chart/BarChart.typed.spec.tsx` around lines 7 - 23, Add a negative
type-check test to ensure invalid cursor values are rejected by TypeScript: in
the existing test suite that uses BarChart, LineChart, and PieChart add an it
block that returns a chart component (e.g., BarChart) with an obviously invalid
cursor string and annotate the JSX line with // `@ts-expect-error` so the test
fails compilation if the types erroneously accept the invalid value; reference
the existing BarChart/LineChart/PieChart components and keep the other props
(width, height, data) consistent with current tests.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@test/chart/BarChart.typed.spec.tsx`:
- Around line 7-23: Add a negative type-check test to ensure invalid cursor
values are rejected by TypeScript: in the existing test suite that uses
BarChart, LineChart, and PieChart add an it block that returns a chart component
(e.g., BarChart) with an obviously invalid cursor string and annotate the JSX
line with // `@ts-expect-error` so the test fails compilation if the types
erroneously accept the invalid value; reference the existing
BarChart/LineChart/PieChart components and keep the other props (width, height,
data) consistent with current tests.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d6ab58e and 65ad7de.

📒 Files selected for processing (2)

src/util/types.ts
test/chart/BarChart.typed.spec.tsx

PavelVanecek · 2026-03-03T11:54:33Z

Conflicts

PavelVanecek · 2026-03-03T11:55:08Z

test/chart/BarChart.typed.spec.tsx

-      </BarChart>,
-    );
+  it('should accept cursor prop on LineChart', () => {
+    return <LineChart width={400} height={300} data={data} cursor="crosshair" />;


Let's assert that the prop actually appears in the DOM

Closes recharts#2484 The cursor SVG presentation attribute was already forwarded to the SVG element at runtime (listed in SVGElementPropKeys) but was missing from the TypeScript type definitions. Adding it to BaseChartProps makes it available on all chart types (BarChart, LineChart, PieChart, etc.).

codecov · 2026-03-07T10:49:14Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.61%. Comparing base (3b0ec86) to head (3a43b34).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7065   +/-   ##
=======================================
  Coverage   89.61%   89.61%           
=======================================
  Files         534      534           
  Lines       40252    40252           
  Branches     5477     5477           
=======================================
  Hits        36070    36070           
  Misses       4174     4174           
  Partials        8        8

☔ View full report in Codecov by Sentry.
📢 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.

coderabbitai bot reviewed Feb 27, 2026

View reviewed changes

PavelVanecek reviewed Mar 3, 2026

View reviewed changes

PavelVanecek requested changes Mar 3, 2026

View reviewed changes

mixelburg and others added 3 commits March 7, 2026 19:05

fix: update BarChart tests to validate cursor prop functionality

a94ce67

fix: add cursor prop comment similarity exception for Tooltip component

3a43b34

PavelVanecek force-pushed the fix/cursor-prop-type-in-charts branch from 65ad7de to 3a43b34 Compare March 7, 2026 10:32

PavelVanecek approved these changes Mar 7, 2026

View reviewed changes

PavelVanecek merged commit af888fd into recharts:main Mar 7, 2026
41 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: add cursor prop type to BaseChartProps#7065

fix: add cursor prop type to BaseChartProps#7065
PavelVanecek merged 3 commits intorecharts:mainfrom
mixelburg:fix/cursor-prop-type-in-charts

mixelburg commented Feb 27, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 27, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

PavelVanecek commented Mar 3, 2026

Uh oh!

PavelVanecek Mar 3, 2026

Uh oh!

codecov bot commented Mar 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

mixelburg commented Feb 27, 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 Feb 27, 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!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

PavelVanecek commented Mar 3, 2026

Uh oh!

PavelVanecek Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Mar 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mixelburg commented Feb 27, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 27, 2026 •

edited

Loading

codecov bot commented Mar 7, 2026 •

edited

Loading