[charts-pro] Add range selection to zoom slider #17949

bernardobelchior · 2025-05-21T15:18:12Z

Part of #15383.

Adds a range selection to zoom slider. It respects all zoom options (e.g., minSpan, minStart).

Screen.Recording.2025-05-21.at.16.48.10.mov

Some edge cases

Selection starts too close to the end and the cursor goes to the right, so the minSpan of 10 wouldn't be respected. In this case, we need to move the start to the left.

Screen.Recording.2025-05-21.at.16.49.29.mov

Selection starts outside minStart. In this case, we move the start to minStart and adjust the end accordingly.

Screen.Recording.2025-05-21.at.17.17.04.mov

github-actions · 2025-05-21T15:18:26Z

Thanks for adding a type label to the PR! 👍

bernardobelchior · 2025-05-21T15:18:37Z

docs/data/charts/zoom-and-pan/ZoomSlider.tsx

+        { axisId: 'x', start: 45, end: 55 },
        { axisId: 'x2', start: 30, end: 70 },
-        { axisId: 'y', start: 10, end: 90 },
+        { axisId: 'y', start: 40, end: 60 },


Updated demo so it's easier to test the range selection

bernardobelchior · 2025-05-21T15:19:14Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+    event.stopPropagation();
+
+    rect.setPointerCapture(event.pointerId);
+    document.addEventListener('pointerup', onPointerUp);


Couldn't make it work when pointerup listener was set on rect. The event wasn't being triggered in some cases.

this is normal

mui-bot · 2025-05-21T15:19:54Z

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

Bundle size report

Total Size Change:^{${\tiny{\color{red}▲}}$}+10.9KB^(+0.09%) - Total Gzip Change:^{${\tiny{\color{red}▲}}$}+3.33KB^(+0.09%)
Files: 118 total (0 added, 0 removed, 37 changed)

@mui/x-charts-pro parsed:^{${\tiny{\color{red}▲}}$}+1.59KB^(+0.49%) gzip:^{${\tiny{\color{red}▲}}$}+491B^(+0.49%)
@mui/x-charts-pro/LineChartPro parsed:^{${\tiny{\color{red}▲}}$}+1.58KB^(+0.71%) gzip:^{${\tiny{\color{red}▲}}$}+548B^(+0.76%)
@mui/x-charts-pro/BarChartPro parsed:^{${\tiny{\color{red}▲}}$}+1.58KB^(+0.76%) gzip:^{${\tiny{\color{red}▲}}$}+467B^(+0.69%)
@mui/x-charts-pro/ScatterChartPro parsed:^{${\tiny{\color{red}▲}}$}+1.58KB^(+0.82%) gzip:^{${\tiny{\color{red}▲}}$}+412B^(+0.65%)
@mui/x-charts-pro/ChartZoomSlider parsed:^{${\tiny{\color{red}▲}}$}+1.45KB^(+2.25%) gzip:^{${\tiny{\color{red}▲}}$}+436B^(+1.89%)

Show 32 more bundle changes

@mui/x-charts-pro/ChartDataProviderPro parsed:^{${\tiny{\color{red}▲}}$}+240B^(+0.18%) gzip:^{${\tiny{\color{red}▲}}$}+67B^(+0.15%)
@mui/x-charts-pro/Heatmap parsed:^{${\tiny{\color{red}▲}}$}+240B^(+0.13%) gzip:^{${\tiny{\color{red}▲}}$}+64B^(+0.11%)
@mui/x-charts-pro/ChartContainerPro parsed:^{${\tiny{\color{red}▲}}$}+237B^(+0.17%) gzip:^{${\tiny{\color{red}▲}}$}+71B^(+0.15%)
@mui/x-charts-pro/FunnelChart parsed:^{${\tiny{\color{red}▲}}$}+237B^(+0.12%) gzip:^{${\tiny{\color{red}▲}}$}+65B^(+0.10%)
@mui/x-charts/ChartsAxis parsed:^{${\tiny{\color{red}▲}}$}+109B^(+0.15%) gzip:^{${\tiny{\color{red}▲}}$}+37B^(+0.15%)
@mui/x-charts/ChartsXAxis parsed:^{${\tiny{\color{red}▲}}$}+109B^(+0.16%) gzip:^{${\tiny{\color{red}▲}}$}+34B^(+0.14%)
@mui/x-charts/ChartsYAxis parsed:^{${\tiny{\color{red}▲}}$}+109B^(+0.17%) gzip:^{${\tiny{\color{red}▲}}$}+36B^(+0.15%)
@mui/x-charts/LineChart parsed:^{${\tiny{\color{red}▲}}$}+109B^(+0.06%) gzip:^{${\tiny{\color{red}▲}}$}+35B^(+0.06%)
@mui/x-charts/BarChart parsed:^{${\tiny{\color{red}▲}}$}+108B^(+0.06%) gzip:^{${\tiny{\color{red}▲}}$}+40B^(+0.07%)
@mui/x-charts/ChartsLegend parsed:^{${\tiny{\color{red}▲}}$}+108B^(+0.15%) gzip:^{${\tiny{\color{red}▲}}$}+34B^(+0.14%)
@mui/x-charts/RadarChart parsed:^{${\tiny{\color{red}▲}}$}+108B^(+0.07%) gzip:^{${\tiny{\color{red}▲}}$}+36B^(+0.07%)
@mui/x-charts parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.04%) gzip:^{${\tiny{\color{red}▲}}$}+42B^(+0.05%)
@mui/x-charts-pro/ChartsToolbarPro parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.19%) gzip:^{${\tiny{\color{red}▲}}$}+32B^(+0.16%)
@mui/x-charts/ChartContainer parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.09%) gzip:^{${\tiny{\color{red}▲}}$}+33B^(+0.09%)
@mui/x-charts/ChartDataProvider parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.10%) gzip:^{${\tiny{\color{red}▲}}$}+33B^(+0.09%)
@mui/x-charts/ChartsAxisHighlight parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.18%) gzip:^{${\tiny{\color{red}▲}}$}+34B^(+0.16%)
@mui/x-charts/ChartsGrid parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.18%) gzip:^{${\tiny{\color{red}▲}}$}+35B^(+0.17%)
@mui/x-charts/ChartsReferenceLine parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.18%) gzip:^{${\tiny{\color{red}▲}}$}+39B^(+0.18%)
@mui/x-charts/ChartsSurface parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.18%) gzip:^{${\tiny{\color{red}▲}}$}+37B^(+0.18%)
@mui/x-charts/ChartsTooltip parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.14%) gzip:^{${\tiny{\color{red}▲}}$}+32B^(+0.12%)
@mui/x-charts/Gauge parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.10%) gzip:^{${\tiny{\color{red}▲}}$}+31B^(+0.08%)
@mui/x-charts/PieChart parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.07%) gzip:^{${\tiny{\color{red}▲}}$}+31B^(+0.06%)
@mui/x-charts/ScatterChart parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.07%) gzip:^{${\tiny{\color{red}▲}}$}+39B^(+0.08%)
@mui/x-charts/SparkLineChart parsed:^{${\tiny{\color{red}▲}}$}+106B^(+0.06%) gzip:^{${\tiny{\color{red}▲}}$}+34B^(+0.06%)
@mui/x-data-grid-pro/DataGridPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-2B^(-0.01%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(+0.01%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-tree-view-pro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-tree-view-pro/RichTreeViewPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 737f5a8

bernardobelchior · 2025-05-21T15:20:44Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+  reverse: boolean;
+}
+
+function ChartAxisZoomSliderTrack({


This file is getting huge. I'll move the components to other files in a follow-up.

codspeed-hq · 2025-05-21T15:28:48Z

CodSpeed Performance Report

Merging #17949 will not alter performance

_{Comparing bernardobelchior:zoom-slider-range-selection (737f5a8) with master (48666ad)}

Summary

✅ 9 untouched benchmarks

JCQuintas · 2025-05-22T19:40:25Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

      theme.palette.mode === 'dark'
        ? (theme.vars || theme).palette.grey[800]
        : (theme.vars || theme).palette.grey[300],
+    cursor: 'crosshair',


A bit weird but ok 🤷

Yeah, I don't love it either. I'm in contact with @noraleonte and @kenanyusuf to discuss what a better cursor would be.

We're having a hard time finding a better solution.

There you go 😛
#17977

JCQuintas · 2025-05-22T20:00:47Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+          const end = calculateZoomEnd(
+            pointerZoom,
+            { ...prevZoomData, start: pointerDownZoom },
+            zoomOptions,
+          );


Names are a bit confusing here, but I don't have suggestions 🤔

I've updated them. Do you think they're better now? If not, I can revert them

JCQuintas · 2025-05-22T20:02:00Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+    event.stopPropagation();
+
+    rect.setPointerCapture(event.pointerId);
+    document.addEventListener('pointerup', onPointerUp);


this is normal

JCQuintas · 2025-05-23T07:02:10Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+    }
+
+    const pointerDownPoint = getSVGPoint(element, event);
+    let zoomFromPointerDown = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerDownPoint);


maybe something like firstZoomPoint and currentZoomPoint for the move one?

or initialZoomPoint

I'm not sure if firstZoomPoint is better because this isn't a point, it's the zoom value (ranging from 0 to 100) of the pointer down event. I could call it initialZoom, but not sure if that's less confusing 🤔

I'll merge this PR as it's been approved, but we can keep discussing and I'll update the code in a follow-up PR.

My line of thought was that it is a point in the zoom "scale"

Yeah, we can look at it that way. I'm afraid it might be confused with the SVGPoint that we're using in the same scope, that's why I initially tried suffixing it with Zoom

alexfauquette

Seems to be already merged 🙈

alexfauquette · 2025-05-23T07:28:25Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+    }
+
+    const pointerDownPoint = getSVGPoint(element, event);
+    let zoomFromPointerDown = calculateZoomFromPoint(store.getSnapshot(), axisId, pointerDownPoint);


or initialZoomPoint

alexfauquette · 2025-05-23T07:31:28Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+
+    let pointerMoved = false;
+
+    const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent: PointerEvent) {


It's a bit weird to define the onPointerMove inside the onPointerDown

Does removing the pointerMove/pointerDown from document makes a difference in terms of performances?

It's a bit weird to define the onPointerMove inside the onPointerDown

Why? I think it makes sense. We only need to listen to the pointer move events after a pointer down happens, so it makes sense that we only add the listener after a pointer down event.

We could add the event listener regardless, but then we're calling a function on every move just to do nothing. Seems a bit useless, IMO.

Does removing the pointerMove/pointerDown from document makes a difference in terms of performances?

It's probably negligible, I didn't test it.

alexfauquette · 2025-05-23T07:54:10Z

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

+    instance.setAxisZoomData(axisId, (prev) => ({
+      ...prev,
+      start: zoomFromPointerDown,
+      end: zoomFromPointerDown,
+    }));


What's the purpose of this setAxisZoomData?

The only effect is to clear the chart between pointer-down and pointer-move

On this topic, Echarts has a much better interaction. The pointer down and move only show the future range. And it's on pointer up that the zoom get applied. For this feature, they do not respect the min/max span.

Which seems better than having a jumping selection

Capture.video.du.2025-05-23.09-46-27.mp4

What's the purpose of this setAxisZoomData?

It's a higher level function that setZoomData that allows setting the zoom data for a specific axis, instead of having to iterate over all axes to find the one you want and update it.

IMO, our setZoomData allows too much control. For example, you can disrepect a minStart or minSpan with it. I'm not sure we should allow users to do that.

On this topic, Echarts has a much better interaction. The pointer down and move only show the future range. And it's on pointer up that the zoom get applied.

We could do something like that as well. @kenanyusuf @noraleonte what's your take? Should I try to do something like this?

For this feature, they do not respect the min/max span.

Is that a good idea? What's the point of min/max span if you can disrepect it?

Is that a good idea? What's the point of min/max span if you can disrepect it?

It's feasible to respect if with an interaction like: if the preview does not respect min/max span we ignore it, or have a different visualisation

Even if we dont not respect it with this interaction, it's usefull for the other interactions.

For me the minSpan is useful to avoid user zooming infinitely.

IMO, our setZoomData allows too much control. For example, you can disrepect a minStart or minSpan with it. I'm not sure we should allow users to do that.

It seems the setAxisZoomData does not respect minSpan since you can call it with start = end (which means span=0) 🙈

On this topic, Echarts has a much better interaction. The pointer down and move only show the future range. And it's on pointer up that the zoom get applied.

I don't think it is better though 😆
It feels a bit odd that the selection is only applied after pointer up

It's feasible to respect if with an interaction like: if the preview does not respect min/max span we ignore it, or have a different visualisation

I'm ok with not respecting min/max span while dragging, but after pointer release we ensure those constraints are met.

Even if we dont not respect it with this interaction, it's usefull for the other interactions.

For me the minSpan is useful to avoid user zooming infinitely.

Yeah, but if the range selection doesn't respect the min/max span, then a user can zoom in too much.

Plus, I think it would be pretty unexpected to for the range selection to bypass min/max span. I think users wouldn't expect it.

It seems the setAxisZoomData does not respect minSpan since you can call it with start = end (which means span=0) 🙈

Yeah, at the moment we aren't respecting it. What I meant is that I think we should provide higher-level functions that respect it. E.g., instead of setAxisZoomData, you could have moveAxisZoomStart, moveAxisZoomEnd, moveAxisZoomRange, zoomIn, zoomOut, etc.

I don't think it is better though 😆
It feels a bit odd that the selection is only applied after pointer up

UX-wise I think it's debatable, but for performance I think updating the chart only after pointer up would be much better.

UX-wise, it's fairly similar to the brush zoom
like in rechart Applied on the overview instead of the drawing area

I would argue it is similar, but fairly different.

The brush zoom you are selecting part of your content. It makes sense for it to only apply the selection after the fact, since you would change the value being currently selected as you move the mouse.

The slider is a control, an abstraction over the zoom, which the user already implies has a meaning, and which in turn allows it to directly affect the content.

See that in the first case, the control is static, you are selecting the area you want to see. While in the second case, the control is dynamic, you are adapting the view to what you want to see.

Just like the gap example in funnel chart changes the gap instantly, so should the zoom slider change the zoom.

I say that from a UX point of view. Due to performance reasons we can offer both if the case arises eventually. 😄

bernardobelchior commented May 21, 2025

View reviewed changes

bernardobelchior added type: new feature Expand the scope of the product to solve a new problem. scope: charts Changes related to the charts. labels May 21, 2025

bernardobelchior mentioned this pull request May 21, 2025

[charts] Zoom Slider #15383

Closed

6 tasks

bernardobelchior force-pushed the zoom-slider-range-selection branch from bb1be02 to 4d3f704 Compare May 22, 2025 07:14

bernardobelchior added 14 commits May 22, 2025 17:00

[charts-pro] Add range selection to zoom slider

b2d1dc7

Abstract zoom calculation

95e303c

Add TODO

bdb4b70

Fix perf issue with infinite tick number.

0762ad9

Fix dragging too close to the edge.

7f51c61

Update demo with smaller zoom ranges to make it easier to test features

6605b1c

Fix pointer up not being called

d76e80d

Use crosshair for range selection

98c74a6

Fix remove listener on wrong element

802b153

Fix same pointerup bug in active track

cc46cc0

Fix minStart/maxEnd

f560599

Rename z to better name

67057e9

Fix lint

a436d9a

Fix static

e63476a

bernardobelchior force-pushed the zoom-slider-range-selection branch from 4d3f704 to e63476a Compare May 22, 2025 15:00

bernardobelchior marked this pull request as ready for review May 22, 2025 15:40

bernardobelchior requested review from JCQuintas and alexfauquette and removed request for alexfauquette May 22, 2025 15:40

JCQuintas approved these changes May 22, 2025

View reviewed changes

Update zoom names

737f5a8

JCQuintas reviewed May 23, 2025

View reviewed changes

bernardobelchior merged commit 0df3580 into mui:master May 23, 2025
24 checks passed

bernardobelchior deleted the zoom-slider-range-selection branch May 23, 2025 07:38

alexfauquette reviewed May 23, 2025

View reviewed changes

bernardobelchior mentioned this pull request May 26, 2025

[charts-pro] Split ChartAxisZoomSlider into smaller files #18011

Merged

alexfauquette mentioned this pull request May 27, 2025

[charts] Fix initial render for zoom slider selection #18018

Closed


		let pointerMoved = false;

		const onPointerMove = rafThrottle(function onPointerMove(pointerMoveEvent: PointerEvent) {

Uh oh!

[charts-pro] Add range selection to zoom slider #17949

[charts-pro] Add range selection to zoom slider #17949

Uh oh!

Conversation

bernardobelchior commented May 21, 2025

Some edge cases

Uh oh!

github-actions bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Merging #17949 will not alter performance

Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior May 23, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 21, 2025 •

edited

Loading

mui-bot commented May 21, 2025 •

edited

Loading

codspeed-hq bot commented May 21, 2025 •

edited

Loading

bernardobelchior May 23, 2025 •

edited

Loading