Skip to content

[charts] Add experimental position-based pointer interaction for line series#21809

Draft
JCQuintas wants to merge 3 commits intomui:masterfrom
JCQuintas:experimental-pointer-interaction
Draft

[charts] Add experimental position-based pointer interaction for line series#21809
JCQuintas wants to merge 3 commits intomui:masterfrom
JCQuintas:experimental-pointer-interaction

Conversation

@JCQuintas
Copy link
Member

Summary

  • Adds opt-in experimentalFeatures.enablePositionBasedPointerInteraction for line/area series
  • When enabled, uses pointer position to determine closest series instead of SVG element hover events
  • Area series: detects if pointer is inside the filled area
  • Line series: finds the curve closest to the pointer's vertical position
  • Uses actual d3 curve evaluation (captured bezier segments) so hit detection matches the rendered curve for all curve types (monotoneX, catmullRom, natural, etc.)
  • ChartExperimentalFeatures is generic over SeriesType, so the feature only appears in types for charts that include line series
  • Adds documentation and demo under the "Click event" section in line chart docs

… series

Add opt-in pointer-position-based interaction detection for line/area series
behind `experimentalFeatures.enablePointerPositionBasedInteraction`.

When enabled, the chart uses the pointer's position to determine which
series is closest, rather than relying on SVG element hover events.
For area series, it detects whether the pointer is inside the filled area.
For line series, it finds the curve closest to the pointer's vertical position.

The detection uses actual d3 curve evaluation (via captured bezier segments)
instead of linear interpolation, so hit detection matches the rendered curve
shape for all curve types (monotoneX, catmullRom, natural, etc.).
@JCQuintas JCQuintas self-assigned this Mar 20, 2026
@JCQuintas JCQuintas added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Mar 20, 2026
@mui-bot
Copy link

mui-bot commented Mar 20, 2026

Deploy preview: https://deploy-preview-21809--material-ui-x.netlify.app/

Updated pages:

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 🔺+4.12KB(+1.13%) 🔺+1.6KB(+1.47%)
@mui/x-charts-pro 🔺+4.12KB(+0.86%) 🔺+1.6KB(+1.10%)
@mui/x-charts-premium 🔺+4.12KB(+0.81%) 🔺+1.62KB(+1.06%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 589d5f7

@codspeed-hq
Copy link

codspeed-hq bot commented Mar 20, 2026

Merging this PR will not alter performance

✅ 14 untouched benchmarks


Comparing JCQuintas:experimental-pointer-interaction (589d5f7) with master (391a0d8)1

Open in CodSpeed

Footnotes

  1. No successful run was found on master (6f33043) during the generation of this report, so 391a0d8 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: charts Changes related to the charts. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants