[charts-pro] Allow zoom interactions to be configured #18646

JCQuintas · 2025-07-01T21:10:19Z

Allow configuring with simple strings for accepting defaults or with full configuration.
Goal is to allow a more fine-grained customisation of the gestures, while also making the PR that adds more supported gestures smaller :)

Changelog

Charts now allow fine-grained control for zoom interactions

// default values
<BarChartPro
  zoomInteractionConfig={{
    // Enable both wheel and pinch zoom
    zoom: ['wheel', 'onPinch'],
    // Enable drag panning
    pan: ['drag'],
  }}
/>

// custom (no pinch)
<BarChartPro
  zoomInteractionConfig={{
    // Only zoom when Control key is pressed
    zoom: [{ type: 'wheel', keys: ['Control'] }],
    // Only pan when Shift key is pressed
    pan: [{ type: 'drag', keys: ['Shift'] }],
  }}
/>

mui-bot · 2025-07-01T21:12:06Z

Deploy preview: https://deploy-preview-18646--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	🔺+356B^(+0.11%)	🔺+124B^(+0.12%)
@mui/x-charts-pro	🔺+2.19KB^(+0.52%)	🔺+657B^(+0.50%)
@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 1f330b1

codspeed-hq · 2025-07-01T21:19:15Z

CodSpeed Performance Report

Merging #18646 will not alter performance

_{Comparing JCQuintas:zoom-configuration-simplified (1f330b1) with master (ba2428d)}

Summary

✅ 12 untouched

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

github-actions · 2025-07-02T19:00:36Z

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

alexfauquette

The API and the code structure look good. Just had one question

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

github-actions · 2025-08-02T15:07:10Z

This pull request has been inactive for 30 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 15 days.

…figuration-simplified

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

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

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

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

…figuration-simplified

This reverts commit 8be2e5b.

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

packages/x-internals/src/useMemoObject/useMemoObject.ts

eslint.config.mjs

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

alexfauquette · 2025-09-22T07:36:07Z

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

 export type AddInteractionListener = {
  <CustomData extends Record<string, unknown> = Record<string, unknown>>(
-    interaction: 'pan' | 'panStart' | 'panEnd',
+    interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd',


I don't get what are doing those new interactions. What's the difference between a pan and a zoomPan?

I've divided them because the gesture settings are now configurable on the gesture level, this is so the zoom configuration doesn't affect tooltip behaviour.

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

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

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

alexfauquette · 2025-09-22T07:42:25Z

Nice fix 👍

…figuration-simplified

bernardobelchior

Minor curiosity, otherwise looks good 👍

bernardobelchior · 2025-09-24T07:47:06Z

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

  const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);

+  useEffectAfterFirstRender(() => {


Why do we want this use effect to only run after the first render? What happens if it runs in the first render as well?

This hook synchronise the props in the store.

Every time a user update a props saved in the store, we need to update it.

But we don't need that at the first run because the store is already in sync thanks to the plugin's getInitialState()
So we skip the first run of the useEffect

Thanks for clarifying!
It would probably be useful to have this explanation in the code 😄

alexfauquette

🚀

JCQuintas added 3 commits July 1, 2025 22:08

add keys and mode handling

95fe3d7

simplify proptypes

261a655

add tests

602ad37

JCQuintas self-assigned this Jul 1, 2025

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 Jul 1, 2025

docs

dfa7f42

JCQuintas commented Jul 1, 2025

View reviewed changes

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

JCQuintas marked this pull request as ready for review July 1, 2025 22:13

JCQuintas requested review from alexfauquette and bernardobelchior as code owners July 1, 2025 22:13

fix types

2934bdf

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

alexfauquette reviewed Jul 3, 2025

View reviewed changes

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

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

github-actions bot added the stale Inactive for 7 days (issues) or 30 days (PRs); closed after 5 or 15 more days if no update. label Aug 2, 2025

Merge commit 'fac25a0892692bb0e3e1e25274d85a20ff9cee5b' into zoom-con…

96966fa

…figuration-simplified

github-actions bot removed PR: out-of-date The pull request has merge conflicts and can't be merged. stale Inactive for 7 days (issues) or 30 days (PRs); closed after 5 or 15 more days if no update. labels Aug 11, 2025

bernardobelchior reviewed Aug 12, 2025

View reviewed changes

JCQuintas added 2 commits August 12, 2025 17:57

split zoom interactions

f2b29a2

improve configuration and rename props

b0226d0

JCQuintas marked this pull request as draft August 12, 2025 22:04

JCQuintas added 3 commits August 20, 2025 21:59

Merge commit 'dbd436ed10bee05e2decc6578587ffca527c33b5' into zoom-con…

07cbeee

…figuration-simplified

export pmode

c64ef57

impl

36bf78f

JCQuintas added 13 commits September 18, 2025 15:04

scripts

6e8f7d5

remove comment

ae305e9

Merge commit '112c08f2efbeb0480c764e2946d4168c921a2a2a' into zoom-con…

8ccde7f

…figuration-simplified

fix missing refs

aa84499

Merge branch 'master' into zoom-configuration-simplified

b4be924

Merge branch 'master' into zoom-configuration-simplified

627ff1f

3411313

fix config clarity and memoization on all interactions

522c115

Merge branch 'master' into zoom-configuration-simplified

2292df4

test

40d8f9c

memo obj

8be2e5b

Revert "memo obj"

6165ef7

This reverts commit 8be2e5b.

test change in place

f78ae17

JCQuintas commented Sep 18, 2025

View reviewed changes

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

flaviendelangle reviewed Sep 19, 2025

View reviewed changes

packages/x-internals/src/useMemoObject/useMemoObject.ts Outdated Show resolved Hide resolved

JCQuintas added 2 commits September 19, 2025 14:33

add hook and logic

14126c0

custom hooks

af02063

bernardobelchior reviewed Sep 19, 2025

View reviewed changes

eslint.config.mjs Show resolved Hide resolved

alexfauquette reviewed Sep 22, 2025

View reviewed changes

JCQuintas added 4 commits September 22, 2025 13:53

fixes

44133e5

remove on

408df54

Merge commit 'ba2428ddee2c58391609580c2c4effdcaa316d88' into zoom-con…

14c24e9

…figuration-simplified

scripts

1f330b1

bernardobelchior reviewed Sep 24, 2025

View reviewed changes

alexfauquette approved these changes Sep 24, 2025

View reviewed changes

bernardobelchior approved these changes Sep 24, 2025

View reviewed changes

JCQuintas merged commit 5154e31 into mui:master Sep 25, 2025
22 checks passed

JCQuintas deleted the zoom-configuration-simplified branch September 25, 2025 16:51

arminmeh mentioned this pull request Oct 1, 2025

[release] v8.13.0 #19774

Merged

Uh oh!

[charts-pro] Allow zoom interactions to be configured #18646

[charts-pro] Allow zoom interactions to be configured #18646

Uh oh!

Conversation

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

Uh oh!

Changelog

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #18646 will not alter performance

Summary

Uh oh!

Uh oh!

github-actions bot commented Jul 2, 2025

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexfauquette Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexfauquette commented Sep 22, 2025

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

JCQuintas commented Jul 1, 2025 •

edited

Loading

mui-bot commented Jul 1, 2025 •

edited

Loading

codspeed-hq bot commented Jul 1, 2025 •

edited

Loading