[charts-pro] Add pan on `wheel` to zoom #19998

JCQuintas · 2025-10-16T16:17:59Z

Fixes #13798

Implements:

On desktop-mouse: It should pan left/right with a side scroll wheel or during Shift + scroll
On desktop-trackpad: It should pan left/right while sliding to the left/right with two fingers
Tested on OSX and Windows
Allow configuring pan on x/y axes

mui-bot · 2025-10-16T16:20:06Z

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

Updated pages:

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

Bundle size report

ℹ️ Using snapshot from parent commit 789d239 (fallback from merge base d1c95a3).

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	🔺+60B^(+0.02%)	🔺+8B^(+0.01%)
@mui/x-charts-pro	🔺+1.55KB^(+0.35%)	🔺+338B^(+0.25%)
@mui/x-charts-premium	🔺+1.55KB^(+0.35%)	🔺+365B^(+0.28%)
@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 7fdea1e

codspeed-hq · 2025-10-16T16:31:39Z

CodSpeed Performance Report

Merging #19998 will not alter performance

_{Comparing JCQuintas:side-scroll (05d7f60) with master (178daf2)¹}

Summary

✅ 13 untouched

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

github-actions · 2025-10-17T13:03:46Z

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

Signed-off-by: Jose C Quintas Jr <[email protected]>

bernardobelchior · 2025-10-17T14:09:40Z

It's a bit hard to showcase, but scrolling on wheel seems to be too slow. When I scroll the page scroll seems much faster than when scrolling the chart. Especially if you use your trackpad and scroll fast, the page will scroll very fast, but the chart won't.

Screen.Recording.2025-10-17.at.15.07.21.mov

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

packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.ts

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

alexfauquette

About the default config, would it be possible to have by default

the y-wheel manages the zoom
the x-wheel manages x-axis pan

That would be nice for people using either track-pad or mouse with a x-wheel

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

This reverts commit 0cf263a.

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

bernardobelchior · 2025-11-06T15:26:07Z

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

  if (!zoomInteractionConfig?.pan) {
    defaultizedConfig.pan = {
      drag: { type: 'drag', requiredKeys: [], mouse: {}, touch: {} },
+      wheel: { type: 'wheel', requiredKeys: [], mouse: {}, touch: {}, allowedDirection: 'x' },


I suppose we should document this limitation, right? Otherwise developers won't realize until their users complain that pan on wheel isn't working properly.

This makes me thing if we should even enable by default if we know it'll have issues.

bernardobelchior · 2025-11-06T15:33:35Z

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

+        return;
+      }
+
+      rafThrottledSetZoomData((prev) => {


Aren't we potentially losing events? rafThrottle will call setZoomData at most once per frame. If we call rafThrottledSetZoomData twice within a frame, the function will be called once per frame with the last arguments.

As a rule of thumb, with rafThrottle we need to accumulate the events and call the throttled function with the accumulated data. If we process the events inside the throttled function we can lose events.

It doesn't really seem to affect wheel events a lot, since they don't need to "sync" with the mouse.

I've added the accumulator regardless

Co-authored-by: Bernardo Belchior <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>

This reverts commit 7379063.

JCQuintas added 2 commits October 15, 2025 18:31

enable side-scroll

d4f7eb9

example and fixes

532edfd

JCQuintas self-assigned this Oct 16, 2025

JCQuintas requested review from alexfauquette, bernardobelchior and prakhargupta1 as code owners October 16, 2025 16:18

JCQuintas added type: new feature Expand the scope of the product to solve a new problem. plan: Pro Impact at least one Pro user. scope: charts Changes related to the charts. labels Oct 16, 2025

JCQuintas marked this pull request as draft October 16, 2025 16:18

Merge branch 'master' into side-scroll

2a29030

JCQuintas added 4 commits October 16, 2025 19:03

scripts

e203f61

add some tests

a9f1eb9

fix y pan

e2abfbe

fix

aa89712

JCQuintas marked this pull request as ready for review October 16, 2025 18:32

Merge branch 'master' into side-scroll

d9158b4

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

Merge branch 'master' into side-scroll

36a079d

Signed-off-by: Jose C Quintas Jr <[email protected]>

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

bernardobelchior reviewed Oct 17, 2025

View reviewed changes

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

packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.ts Outdated Show resolved Hide resolved

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

alexfauquette reviewed Oct 20, 2025

View reviewed changes

prakhargupta1 reviewed Oct 20, 2025

View reviewed changes

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

prakhargupta1 reviewed Oct 20, 2025

View reviewed changes

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

JCQuintas added 2 commits October 20, 2025 12:24

docs

270621d

Merge commit '7e86b02aae8f4f5bd0fac3409f86a7724957f5a0' into side-scroll

6539416

JCQuintas added 7 commits October 30, 2025 10:50

fix pan drag

0cf263a

Merge commit '5e57865dd32419eed3751943af7a42543b5947c5' into side-scroll

35584d6

Revert "fix pan drag"

d16ff97

This reverts commit 0cf263a.

inverse scrolling

b784891

fix

9f8f542

Merge commit 'd2a635b7f75d58abc362518d60750c7269253e09' into side-scroll

07c1d59

Merge commit 'da98471ad77b69195ed7fd745dc30a4b96733706' into side-scroll

50e982b

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

JCQuintas added 4 commits November 3, 2025 17:03

fix duplicates

ee17eb8

fix types

cf8bee7

Merge branch 'master' into side-scroll

7b698ee

fix directions

606397a

JCQuintas marked this pull request as ready for review November 5, 2025 14:54

JCQuintas requested a review from bernardobelchior November 6, 2025 12:20

bernardobelchior reviewed Nov 6, 2025

View reviewed changes

JCQuintas and others added 4 commits November 6, 2025 17:05

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

05d7f60

Co-authored-by: Bernardo Belchior <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>

Merge commit 'd2571938137797fd5a86e3e230ab24ad6e42eebf' into side-scroll

c6f008f

Accumulate values

8d613bd

better handling

069bf60

JCQuintas requested review from bernardobelchior and prakhargupta1 November 13, 2025 09:52

bernardobelchior approved these changes Nov 13, 2025

View reviewed changes

Merge branch 'master' into side-scroll

7fdea1e

JCQuintas enabled auto-merge (squash) November 13, 2025 15:36

JCQuintas merged commit 7379063 into mui:master Nov 13, 2025
20 of 21 checks passed

JCQuintas deleted the side-scroll branch November 13, 2025 15:47

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts-pro] Add pan on wheel to zoom (mui#19998)"

e1d2d1c

This reverts commit 7379063.

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts-pro] Add pan on wheel to zoom (mui#19998)"

85b662b

This reverts commit 7379063.

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts-pro] Add pan on wheel to zoom (mui#19998)"

937c608

This reverts commit 7379063.

bernardobelchior added a commit to bernardobelchior/mui-x that referenced this pull request Nov 19, 2025

Revert "[charts-pro] Add pan on wheel to zoom (mui#19998)"

e1ef560

This reverts commit 7379063.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[charts-pro] Add pan on `wheel` to zoom #19998

[charts-pro] Add pan on `wheel` to zoom #19998

JCQuintas commented Oct 16, 2025 •

edited

Loading

Uh oh!

mui-bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 17, 2025

Uh oh!

bernardobelchior commented Oct 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexfauquette left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bernardobelchior Nov 6, 2025

Uh oh!

bernardobelchior Nov 6, 2025

Uh oh!

JCQuintas Nov 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

[charts-pro] Add pan on wheel to zoom #19998

[charts-pro] Add pan on wheel to zoom #19998

Conversation

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

Uh oh!

Uh oh!

mui-bot commented Oct 16, 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 Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #19998 will not alter performance

Summary

Footnotes

Uh oh!

github-actions bot commented Oct 17, 2025

Uh oh!

bernardobelchior commented Oct 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bernardobelchior Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[charts-pro] Add pan on `wheel` to zoom #19998

[charts-pro] Add pan on `wheel` to zoom #19998

JCQuintas commented Oct 16, 2025 •

edited

Loading

mui-bot commented Oct 16, 2025 •

edited

Loading

codspeed-hq bot commented Oct 16, 2025 •

edited

Loading