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

[oliviertassinari]

Summary

When scrolling on https://next.mui.com/x/react-charts/zoom-and-pan/ on mobile, it behaves like on https://npm-stat.com/charts.html?package=@mui/x-charts (built with recharts). Once a user scrolls the page down, it's possible to be stuck:

Screen.Recording.2025-02-21.at.01.22.01.mov

I have researched this a bit, I see nobody complaining about this on echarts or recharts GitHub issues. I guess people have to make sure to leave enough space on the side npm-charts didn't, so their design doesn't work.

However:

• charts.js, never blocks the scroll on mobile. This already feels better, in the most common cases (definitely not always).
• highcharts doesn't block the scroll by default, unless you are on a scatter plot. This feels like the best UX I have seen so far. What if we were doing this?

Examples

No response

Motivation

No response

Search keywords: -

[alexfauquette]

The options we can see are:

1. Not block the scroll if the chart does not allow panning. Either if pan is disabled, or the zoom is at full width/height
2. Not block the scroll if scroll is vertical and the the chart does not allow panning in that direction
3. Modify the chart panning interaction, to require 2 fingers
4. Modify the chart panning interaction, to require 3 fingers
5. Modify the chart panning interaction, to require 4 fingers
6. Modify the chart panning interaction, to require an internal state that can be triggered by a button choosing between zoom, drag, scroll, ...

Additional option. If you are at the end of the zoom, starting a new scroll in that direction does not block the scroll. Like a div with overeflow. You can scroll it, up to when you're bloked. If you start scrolling again, it's the parent that scrolls.

[oliviertassinari]

Google Maps has a pretty similar problem, this is how they solved it: https://developers.google.com/maps/documentation/javascript/interaction.

They have two modes:

• "cooperative" (default)
  • Scrolling with mouse: do nothing, show you an info on the action you would need to perform to do something
  • Cmd + Scrolling with mouse: zoom
  • Scrolling on touch screen: nothing, show you an info on the action you would need to perform to do something
  • Two-finger on touch screen: enable interactivity
• "greedy":
  • Scrolling with mouse: zoom
  • Scrolling on touch screen: move the area inside the chart

---

Finding a solution also involves constraints like #13798. Maybe something like this:

• gestureHandlingStart?: 'lazy' | 'greedy" | { touch: "lazy' | "greedy"; mouse: "lazy' | "greedy" }

  • "lazy" (default): only start to handle gestures when:

    • two-finger actions
    • mouse down/move/up
    • cmd/ctrl + scroll

    Most relevant when showing small charts, e.g. https://npm-stat.com/charts.html?package=%40mui%2Fx-charts.
    The tooltips only trigger on touch start.

  • "greedy": start to handle gestures as soon as possible. This is most relevant when the charts is the biggest item of the page, e.g. https://www.tradingview.com/chart/.
    The tooltips follow the touch start + touch move.

• trackpadMode?: 'pan' | 'zoom'
  • pan (default): when a trackpad scrolls, the charts pan. e.g. Apple Maps, Figma, Miro, Excalidraw, tldraw, Gimp, Canva.
  • zoom: when a trackpad scrolls vertically, the zoom is enabled. When a trackpad scrolls horizontally, the event is ignored. e.g. Google Maps

On top of this, 1. and 2. also makes sense.