Skip to content

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

Open
JCQuintas wants to merge 4 commits intomui:masterfrom
JCQuintas:experimental-pointer-interaction
Open

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

Conversation

@JCQuintas
Copy link
Member

@JCQuintas JCQuintas commented Mar 20, 2026

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

@JCQuintas
[charts] Add experimental pointer-position-based interaction for line…
e352335 
… 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 •
edited
Loading

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.15KB(+1.14%) 🔺+1.61KB(+1.47%)
@mui/x-charts-pro 🔺+4.15KB(+0.87%) 🔺+1.62KB(+1.12%)
@mui/x-charts-premium 🔺+4.15KB(+0.82%) 🔺+1.65KB(+1.08%)
@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 6087cb9

@codspeed-hq
Copy link

codspeed-hq bot commented Mar 20, 2026 •
edited
Loading

Merging this PR will not alter performance

✅ 14 untouched benchmarks

Comparing JCQuintas:experimental-pointer-interaction (6087cb9) with master (71ec303)1

Open in CodSpeed

Footnotes

  1. No successful run was found on master (524a314) during the generation of this report, so 71ec303 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

@JCQuintas JCQuintas marked this pull request as ready for review March 24, 2026 14:07
@alexfauquette
Copy link
Member

alexfauquette commented Mar 24, 2026

From a UI perspective, it looks weird that when the pointer is on the green cross, it highlights the area and not the yellow line.

image

@JCQuintas
Copy link
Member Author

JCQuintas commented Mar 24, 2026

From a UI perspective, it looks weird that when the pointer is on the green cross, it highlights the area and not the yellow line.

What should be the general behaviour though? Proximity to lines > area? What about order?

Currently if we are inside an area we take the area (last series are rendered first, so the order is bottom-top), then we take the lines (top-bottom)

@alexfauquette
Copy link
Member

alexfauquette commented Mar 24, 2026

What should be the general behaviour though? Proximity to lines > area? What about order?

I was thinking about the following logic, but not sure.

  1. Find the closest line
  2. If the distance to this line is less than a threshold -> we pick that one
  3. Otherwise we look for areas
    • If we are in an area we pick the area
    • If we are not in a area we pick the closest one

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

Reviewers

@alexfauquette alexfauquette Awaiting requested review from alexfauquette alexfauquette is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@JCQuintas JCQuintas

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

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@JCQuintas @mui-bot @alexfauquette