[charts-pro] Zoom pointer improvements #17480

JCQuintas · 2025-04-21T15:05:31Z

Resolves #16205
Fixes #16549
Fixes #16660
Fixes #17480
Supersedes #17000

Difference from the other PR

This uses @web-gestures/core to recognise the gestures. I've made the lib from scratch, thinking about extensibility and using the native event emitter api.

It should be much lighter and extensible than anything else, though it is new. So bugs might be preset 😆

As I mentioned in one of our previous meeting. It would be nice to have it as part of MUI offering if we deem it a good to have. For now it stays as a separate project.

Main change (same as last PR)

Create a interaction listener plugin. This allows us to register events directly in the SVG.

The current implementation migrates most of the interactions to the schema below.

Other changes

Divided the zoom behaviours into hooks implementing the usePanOnDrag, useZoomOnPinch and useZoomOnWheel hooks
Make the zoom panning a bit smarter by allowing users to scroll to the edge, and once the zoom can't change anymore, it allows scrolling the page instead.

…events-improvement

github-actions · 2025-06-24T12:16:44Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…events-manual

alexfauquette

I will start back the review after eating, but the mobile interaction is far better on my phone with this PR 🚀

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx

alexfauquette

I played with tooltip and zoom on various charts and everything look nice 🎉👌

alexfauquette · 2025-06-25T11:38:03Z

packages/x-charts-pro/src/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.ts

+    const handlePanStart = () => {
+      startRef.current = store.value.zoom.zoomData;
+    };
+
+    const handlePanThrottled = rafThrottle((event: PanEvent) => {
+      const target = event.detail.srcEvent.target as SVGElement | undefined;
+      if (target?.hasAttribute('data-charts-zoom-slider') || !startRef.current) {
+        return;


Does adding this condition plus an handlePanEnd to clean the startRef.current would avoid the need for 'data-charts-zoom-slider'?

Suggested change

const handlePanStart = () => {

startRef.current = store.value.zoom.zoomData;

};

const handlePanThrottled = rafThrottle((event: PanEvent) => {

const target = event.detail.srcEvent.target as SVGElement | undefined;

if (target?.hasAttribute('data-charts-zoom-slider') || !startRef.current) {

return;

const handlePanStart = () => {

if(event is in drawing area){

startRef.current = store.value.zoom.zoomData;

}

};

const handlePanThrottled = rafThrottle((event: PanEvent) => {

const target = event.detail.srcEvent.target as SVGElement | undefined;

if (!startRef.current) {

return;

There is an issue with the releasePointerCapture of the charts cartesian axis which also uses this 'data-charts-zoom-slider'.

🤔

Maybe I can cook up something to replace it. Will look into it.

I've replaced it with the isElementInside check. Let me know waht you think. I can extract it from this PR so it is easier to check

https://github.com/mui/mui-x/pull/18530/files

...src/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.ts

...ternals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.ts

alexfauquette · 2025-06-25T12:15:25Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.ts

+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', (event) => {
+      if (!event.detail.activeGestures.pan) {
+        mousePosition.current.isInChart = false;


While playing with this feature (in the radar docs), keeping track of the pointer position outside of the charts would be nice. Otherwise, it's impossible to see the bottom value (hidden by my finger).

More for a follow up PR

WDYM? When you move the finger to the top of the screen the tooltip moves to the bottom?

If I want to see the tooltip for the Geography, the best I can do now is the second image. It would feel natural to be able to do the second. (the green potatoe represents my finger :p)

On desktop tooltip get remove when exiting the chart. on mobile only when finger up

@alexfauquette #18531

…events-manual

…drawingarea

…events-manual

github-actions · 2025-06-26T11:29:59Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…events-manual

JCQuintas added 30 commits March 6, 2025 19:15

add plugin start

b03ccf2

add chart interaction using @use-gesture/react

6d80993

replace tooltip logic

ba8b61a

rename vars

db75765

update axis event click handler

04f4a3a

improve

7f6b43e

rename

baccbf1

prevent useInteractionItemProps re-renders

b4f0d24

Fix perf related to react spring

48b461e

Merge commit 'd3cde4cfcbc42b685da49928caefa531ea3c3711' into pointer-…

e38fcee

…events-improvement

fix missing

7988ff0

add mouse position tracker back

29923fa

migrate polar axis

6abb966

add wheel listeners

7ebb091

Merge commit '06d8025ed7b5eb14b4d125924b4eeefea9af12a2' into pointer-…

637e193

…events-improvement

log

6dad5f2

fix listeners bug

6a8ad69

clear animation on drag

989c284

move zoom wheel setup to its own hook

d9b51cd

zoom on pinch

1cb800a

move pan on drag

a019178

cleanup cache logic

3c18086

fix mobile pinch

61bf657

reorder

9595fac

fix mobile interaction

223c9b1

allow config multiple listeners at once

568f7da

tree shake

c89dabd

remove el check

01899c7

use memo for storing data

f9a56a7

remove comment

b93cbd1

JCQuintas requested a review from alexfauquette June 24, 2025 11:57

JCQuintas marked this pull request as ready for review June 24, 2025 11:57

Merge branch 'master' into pointer-events-manual

8f88dcb

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 24, 2025

Merge commit '5881fd702bc9d411ca04210ec07e54deb57d4136' into pointer-…

7e2bc9c

…events-manual

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 24, 2025

alexfauquette reviewed Jun 25, 2025

View reviewed changes

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx Outdated Show resolved Hide resolved

remove unnecessary changes

3276707

alexfauquette approved these changes Jun 25, 2025

View reviewed changes

JCQuintas added 3 commits June 25, 2025 17:33

add concept of "is element inside"

63290d2

plugin suggestions

581fdd5

[charts] Add isElementInside helper

1e0903b

JCQuintas mentioned this pull request Jun 25, 2025

[charts] Add isElementInside helper #18530

Merged

JCQuintas added 2 commits June 25, 2025 17:53

Merge commit '1e0903beca7ce8703164974a531e355244a00f76' into pointer-…

57e4a4b

…events-manual

polar axis show tooltip on interacting with entire svgarea, not only …

554f663

…drawingarea

JCQuintas mentioned this pull request Jun 25, 2025

[charts] Improve touch behavior for polar axis #18531

Merged

JCQuintas added 3 commits June 25, 2025 18:43

Merge commit 'd5f48570e6f47c6e58b014d5d34f005ea181bd25' into pointer-…

4f421f7

…events-manual

rafthrottle

c8993d5

remove unused func

21b2718

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 26, 2025

Merge commit '471b7c8673fd3e813dd5912dd161048c21f3f752' into pointer-…

2358db1

…events-manual

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 26, 2025

JCQuintas merged commit 84c3d1c into mui:master Jun 27, 2025
23 checks passed

JCQuintas deleted the pointer-events-manual branch June 27, 2025 13:41

JCQuintas mentioned this pull request Jul 2, 2025

[charts-pro] Fix geometry not handling gestures in specific scenarios #18651

Merged

alexfauquette mentioned this pull request Jul 16, 2025

[charts] break click event inside shadow dom #18826

Closed

JCQuintas mentioned this pull request Oct 10, 2025

[charts] Only block scroll on mobile on scatter chart? #16676

Closed

oliviertassinari added the plan: Pro Impact at least one Pro user. label Nov 21, 2025

Uh oh!

[charts-pro] Zoom pointer improvements #17480

[charts-pro] Zoom pointer improvements #17480

Uh oh!

Conversation

JCQuintas commented Apr 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Difference from the other PR

Main change (same as last PR)

Other changes

Uh oh!

github-actions bot commented Jun 24, 2025

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexfauquette Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JCQuintas Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

JCQuintas commented Apr 21, 2025 •

edited

Loading

alexfauquette Jun 25, 2025 •

edited

Loading