[charts-pro] Add `tapAndDrag` zoom gesture #19727

JCQuintas · 2025-09-26T14:38:31Z

I went with a custom TapAndDragGesture rather than relying on the TapGesture and PanGesture directly, as they would interfere with other behaviours. (Eg: if user is panning but the tapAndDrag changed the drag config, the original pan would stop working)

Internally we are instantiating a new TapGesture and a new PanGesture and augmenting their behaviour, rather than reimplementing/copy-pasting the tap and drag behaviours in a single gesture.

https://deploy-preview-19727--material-ui-x.netlify.app/x/react-charts/zoom-and-pan/#interactions

Changelog

The chart zoom now supports the tapAndDrag gesture. Zoom in/out by tapping twice and dragging vertically.

mui-bot · 2025-09-26T14:41:15Z

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

Updated pages:

docs/data/charts/zoom-and-pan/zoom-and-pan.md

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.49KB^(+1.37%)	🔺+635B^(+0.63%)
@mui/x-charts-pro	🔺+5.3KB^(+1.26%)	🔺+719B^(+0.54%)
@mui/x-charts-premium	🔺+5.3KB^(+1.25%)	🔺+720B^(+0.55%)
@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 d45201a

codspeed-hq · 2025-09-27T09:49:45Z

CodSpeed Instrumentation Performance Report

Merging #19727 will not alter performance

_{Comparing JCQuintas:tap-and-pan (d45201a) with master (943e431)¹}

Summary

✅ 12 untouched

No successful run was found on master (8562aef) during the generation of this report, so 943e431 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

docs/data/charts/zoom-and-pan/zoom-and-pan.md

bernardobelchior · 2025-09-29T06:57:44Z

docs/data/charts/zoom-and-pan/zoom-and-pan.md

+
+- **`wheel`**: Zoom in/out by scrolling the mouse wheel (default)
+- **`pinch`**: Zoom in/out by pinching on touch devices (default)
+- **`tapAndDrag`**: Zoom in/out by tapping once and then dragging vertically. Dragging up zooms in, dragging down zooms out.


I think of this a "double tap and drag", since you tap once, then you lift the finger and tap a second time before dragging.

So, "doubleTapAndDrag" would better describe the action, and some people do call it "double tap and drag" (here and here, here).

The only place I saw it called "tap-and-drag" was here, but the description then mentions a double tap:

Tap-and-drag is performed by double tapping anywhere on the display.

So, we can either:

Rename it to doubleTapAndDrag or,

Update the description here to say "[...] by tapping twice [...]"

I'm fine either way.

thats odd, I wouldn't consider it a double-tap because our tap interaction is defined as a down+up interaction, and in this case it is down+up/down+move, in my understanding a double tap would be down+up/down+up/down+move. We don't say the drag is a tap and drag interaction.

I'm ok with changing if you still think that should be the case

We don't say the drag is a tap and drag interaction.

True. I agree there is some inconsistency.

I think we can keep the name, but I'd update the description to say "tapping twice". Maybe even call out "similar to Google/Apple Maps"? What do you think?

@bernardobelchior added a prevent default for touchstart when we detect the tap. Safari has this behaviour by default when you taptap, and there is not a lot of ways to get rid of it.

If we always prevent the default, then the touch-action: pan-y wouldn't work. So we add/remove this listener at the same stage we used to add/remove the touchAction changes I did a few commits ago

It's now working perfectly, great job!

prakhargupta1 · 2025-09-29T07:52:39Z

I have a fundamental question about this gesture/feature. Since this is only applicable for touch screen devices, why would someone do this when they can pinch to zoom and drag to pan. These feel more intuitive to me.

Also, does Google maps support this? I couldn't replicate it on my phone.

bernardobelchior · 2025-09-29T08:53:11Z

Also, does Google map support this? I couldn't replicate it on my phone.

Yes, Apple Maps as well.

prakhargupta1 · 2025-09-29T09:12:24Z

Yes, Apple Maps as well.

Got it, yes just checked it both on apple and google maps. I have never used this gesture, but ok this seems to be there for accessibility. Also, as Bernardo pointed out, they describe it as "double tap and drag".

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

packages/x-internal-gestures/src/core/gestures/TapAndDragGesture.ts

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

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

packages/x-internal-gestures/src/core/gestures/TapAndDragGesture.ts

packages/x-internal-gestures/src/core/gestures/TapAndDragGesture.test.ts

bernardobelchior

The interaction is looking great! Nice job 💯

JCQuintas added 18 commits September 17, 2025 16:58

initial tap and pan draft

705d8c2

rename

93d453c

improves

655d76f

add test

4afbcf4

instruction

9ac7adc

simplify

9ee14b3

remove run

1ee4f57

fix tests

ab3f52a

add behavioru

04273f6

use composed behavior

d48f320

fix

88e78d5

proper names and fixes

e832e52

fix updating

b8f93d5

add docs

654b6cc

scripts

c38d394

fix

800958b

titles

39202ee

tests

a307c1c

JCQuintas self-assigned this Sep 26, 2025

JCQuintas requested review from alexfauquette and bernardobelchior as code owners September 26, 2025 14:38

JCQuintas added the type: new feature Expand the scope of the product to solve a new problem. label Sep 26, 2025

JCQuintas requested a review from prakhargupta1 as a code owner September 26, 2025 14:38

JCQuintas added plan: Pro Impact at least one Pro user. scope: charts Changes related to the charts. labels Sep 26, 2025

Merge branch 'master' into tap-and-pan

5fe74fa

JCQuintas added 2 commits September 26, 2025 15:49

fix tests

5439beb

Merge commit 'fd427c347301d5c0de5532dcf20d9680e4a919df' into tap-and-pan

9277f9d

bernardobelchior reviewed Sep 29, 2025

View reviewed changes

docs/data/charts/zoom-and-pan/zoom-and-pan.md Show resolved Hide resolved

bernardobelchior reviewed Sep 29, 2025

View reviewed changes

JCQuintas added 4 commits September 29, 2025 12:48

desc

91a9ca9

remove margin

2f60355

fix touchAction

678094c

Merge commit 'ce0fddc3bfe994423437ebc58ba60dd1fc659e5d' into tap-and-pan

21d1832

alexfauquette reviewed Sep 29, 2025

View reviewed changes

packages/x-charts-pro/src/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.ts Show resolved Hide resolved

alexfauquette approved these changes Sep 29, 2025

View reviewed changes

JCQuintas added 5 commits September 29, 2025 16:28

Merge branch 'master' into tap-and-pan

aae46a6

add fix and test case for deltaY issue

ad43a12

fix ios issue

2d0bbc7

remove redundant style change

3b8cbca

Merge branch 'master' into tap-and-pan

83088fa

flaviendelangle reviewed Sep 30, 2025

View reviewed changes

packages/x-internal-gestures/src/core/gestures/TapAndDragGesture.ts Outdated Show resolved Hide resolved

JCQuintas added 3 commits September 30, 2025 12:48

replace binding

b7d138d

remove unused

d29af54

Merge branch 'master' into tap-and-pan

463800e

bernardobelchior reviewed Sep 30, 2025

View reviewed changes

JCQuintas added 4 commits September 30, 2025 15:00

fix ts node

df4916a

func

fcf5386

handle return outside

3ac336e

decrease timeout

d45201a

bernardobelchior approved these changes Oct 1, 2025

View reviewed changes

JCQuintas merged commit 7ed4c14 into mui:master Oct 1, 2025
22 checks passed

JCQuintas deleted the tap-and-pan branch October 1, 2025 07:19

JCQuintas changed the title ~~[charts] Add tapAndDrag zoom gesture~~ [charts-pro] Add tapAndDrag zoom gesture Oct 1, 2025

JCQuintas mentioned this pull request Oct 1, 2025

[charts] Add pressAndDrag pan gesture #19779

Merged

Uh oh!

[charts-pro] Add tapAndDrag zoom gesture #19727

[charts-pro] Add tapAndDrag zoom gesture #19727

Uh oh!

Conversation

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

Uh oh!

Changelog

Uh oh!

mui-bot commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Instrumentation Performance Report

Merging #19727 will not alter performance

Summary

Footnotes

Uh oh!

Uh oh!

bernardobelchior Sep 29, 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 Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

prakhargupta1 commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bernardobelchior commented Sep 29, 2025

Uh oh!

prakhargupta1 commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

[charts-pro] Add `tapAndDrag` zoom gesture #19727

[charts-pro] Add `tapAndDrag` zoom gesture #19727

JCQuintas commented Sep 26, 2025 •

edited

Loading

mui-bot commented Sep 26, 2025 •

edited

Loading

codspeed-hq bot commented Sep 27, 2025 •

edited

Loading

bernardobelchior Sep 29, 2025 •

edited

Loading

prakhargupta1 commented Sep 29, 2025 •

edited

Loading

prakhargupta1 commented Sep 29, 2025 •

edited

Loading