[charts-pro][ChartsToolbarRangeButtons] Add initialRangeKey support by mustafajw07 · Pull Request #22106 · mui/mui-x

mustafajw07 · 2026-04-15T17:42:50Z

Changelog

[charts-pro] Add initialRangeKey prop to range buttons to reflect the initial zoom selection in the toolbar.
I have followed (at least) the PR section of the contributing guide.

…ge buttons on mount

… mount

code-infra-dashboard · 2026-04-15T17:47:43Z

Bundle size

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	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	🔺+951B^(+0.19%)	🔺+268B^(+0.18%)
@mui/x-charts-premium	🔺+951B^(+0.18%)	🔺+249B^(+0.16%)
@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

Deploy preview

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

Check out the code infra dashboard for more information about this PR.

alexfauquette · 2026-04-16T08:01:34Z

        optionsLookup,
      ),
-      activeRangeButtonKey: null,
+      activeRangeButtonKey: initialRangeKey ?? null,


The initial range key should also impact the initial zoomData. For example if initialRangeKey is set to 3 months the initial zoom should correspond to 3 months.

By order of priority the zoom shoudl be se by

controlled zoom

initial zoom

initial range button

default value

Updated the pr

alexfauquette · 2026-04-16T08:02:14Z

@mustafajw07 thank you for this pull request! It looks like your changes impact the commercially licensed code. For any changes of this nature, we require contributors to sign the MUI’s Contributor License Agreement (CLA).
I can’t find an already signed CLA that cover your changes. Please follow those steps: https://mui-org.notion.site/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 to sign it. Thanks.

codspeed-hq · 2026-04-16T14:34:44Z

Merging this PR will not alter performance

✅ 14 untouched benchmarks

_{Comparing mustafajw07:feature/22067-add-initialRangeKey-to-range-button (82bca79) with master (4f6dda5)¹}

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

mustafajw07 · 2026-04-16T16:12:53Z

@mustafajw07 thank you for this pull request! It looks like your changes impact the commercially licensed code. For any changes of this nature, we require contributors to sign the MUI’s Contributor License Agreement (CLA). I can’t find an already signed CLA that cover your changes. Please follow those steps: https://mui-org.notion.site/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 to sign it. Thanks.

I have signed the CLA.

…zoom functionality

…RangeKey description for zoom functionality

zannager · 2026-04-17T10:38:37Z

@mustafajw07 can you please complete the last step? Thanks.

mustafajw07 · 2026-04-17T15:38:53Z

@mustafajw07 can you please complete the last step? Thanks.

Done

zannager · 2026-04-17T15:59:29Z

@alexfauquette, CLA signed, thanks.

JCQuintas · 2026-04-20T08:59:08Z

@alexfauquette I don't like that this is a two way setter. Like, the initialZoom affects the initialRangeButton and the other way around too.

Ideally we should have a single way of setting everything.

IMO we should try to calculate the selected buttons based on the current resolved zoom instead of trying to have a "priority order over multiple options"

Eg:

We calculate if each button is selected by using the selectorChartAxisZoomData, whenever the zoom changes, we calculate it again.

This way we can even get rid of activeRangeButtonKey

alexfauquette · 2026-04-21T07:29:32Z

I don't like that this is a two way setter. Like, the initialZoom affects the initialRangeButton and the other way around too.

I suggested the second way, not the first one.

You want the initial zoom top be on the last 3 months. would you prefer to

Compute the percentage that correspond to the last 3 months based on the data range
Set an initialRangeButton="3-months"

IMO it's just a syntax sugar for the initialZoom

This way we can even get rid of activeRangeButtonKey

I agree it would be more flexible, but we will need to deal with the notion of precision

JCQuintas · 2026-04-21T14:17:31Z

I don't like that this is a two way setter. Like, the initialZoom affects the initialRangeButton and the other way around too.

I suggested the second way, not the first one.

You want the initial zoom top be on the last 3 months. would you prefer to

Wouldn't it be better to change initialZoom to allow ranges then?

JCQuintas · 2026-04-21T14:44:44Z

An option would be something like this: #22137

It would hardly ever match when users manually zoom though

alexfauquette · 2026-04-21T15:35:00Z

Wouldn't it be better to change initialZoom to allow ranges then?

That could be a nice option 👍

mustafajw07 · 2026-04-21T16:16:20Z

Wouldn't it be better to change initialZoom to allow ranges then?

That could be a nice option 👍

Thanks for the feedback, this makes sense.

I see the concern about introducing multiple ways to control the same behavior and the current two-way relationship between initialZoom and initialRangeKey.

Based on the discussion, should i refactor the approach to make Zoom the single source of truth:

Remove the need for activeRangeButtonKey state
Derive the selected range button from the resolved zoom (instead of storing it)
Avoid two-way sync between range buttons and zoom
Treat range buttons as helpers that only update zoom

Would like to know your thoughts @JCQuintas @alexfauquette?

JCQuintas · 2026-04-22T08:41:02Z

Based on the discussion, should i refactor the approach to make Zoom the single source of truth:

Remove the need for activeRangeButtonKey state

Derive the selected range button from the resolved zoom (instead of storing it)

Avoid two-way sync between range buttons and zoom

Treat range buttons as helpers that only update zoom

Would like to know your thoughts @JCQuintas @alexfauquette?

I think we can go into that direction. It would probably be better to divide it into multiple PRs though.

Allow initialZoom to also accept non-zoom ranges. Like {year?:number; month?:number; ...etc}, maybe also accept string for point/band values?
Then adapt the changes in this PR [charts-pro] Auto-select range button matching current zoom #22137 to make the range buttons automatically detect if they are selected or not

mustafajw07 · 2026-04-22T16:12:49Z

Based on the discussion, should i refactor the approach to make Zoom the single source of truth:

Remove the need for activeRangeButtonKey state

Derive the selected range button from the resolved zoom (instead of storing it)

Avoid two-way sync between range buttons and zoom

Treat range buttons as helpers that only update zoom

Would like to know your thoughts @JCQuintas @alexfauquette?

I think we can go into that direction. It would probably be better to divide it into multiple PRs though.

Allow initialZoom to also accept non-zoom ranges. Like {year?:number; month?:number; ...etc}, maybe also accept string for point/band values?

Then adapt the changes in this PR [charts-pro] Auto-select range button matching current zoom #22137 to make the range buttons automatically detect if they are selected or not

That direction sounds good.

Do you want this to be split into separate tickets first, or should I directly break it down into multiple PRs?

JCQuintas · 2026-04-22T16:16:29Z

Here is the new issue for changing the initialZoom behaviour
#22158

mustafajw07 added 3 commits April 15, 2026 22:22

feat: add initialRangeKey prop to charts to support pre-selecting ran…

0dad8b4

…ge buttons on mount

feat: add initialRangeKey support to pre-select zoom range buttons on…

175905e

… mount

refactor: remove unnecessary space in onZoomChange callback function

ed5b1a1

mustafajw07 requested review from JCQuintas and alexfauquette as code owners April 15, 2026 17:42

mustafajw07 mentioned this pull request Apr 15, 2026

[charts-pro] Add initialRangeKey to range buttons #22067

Open

alexfauquette reviewed Apr 16, 2026

View reviewed changes

alexfauquette added the CLA: required Head to https://mui-org.notion.site/92ece655b1584b10b00e4de9e67eed. label Apr 16, 2026

zannager added the scope: charts Changes related to the charts. label Apr 16, 2026

mustafajw07 added 2 commits April 16, 2026 21:55

feat: add range button configuration and initialRangeKey support for …

06588d0

…zoom functionality

[mui-x][charts-pr] add rangeButtons configuration and enhance initial…

82bca79

…RangeKey description for zoom functionality

zannager added CLA: signed Head to https://mui-org.notion.site/92ece655b1584b10b00e4de9e67eed. and removed CLA: required Head to https://mui-org.notion.site/92ece655b1584b10b00e4de9e67eed. labels Apr 17, 2026

JCQuintas added plan: Pro Impact at least one Pro user. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Apr 21, 2026

JCQuintas mentioned this pull request Apr 22, 2026

[charts-pro] Allow initialZoom to also accept non-zoom ranges #22158

Open

Uh oh!

Conversation

mustafajw07 commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Uh oh!

code-infra-dashboard Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size

Deploy preview

Uh oh!

alexfauquette Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

mustafajw07 Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette commented Apr 16, 2026

Uh oh!

codspeed-hq Bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

mustafajw07 commented Apr 16, 2026

Uh oh!

zannager commented Apr 17, 2026

Uh oh!

mustafajw07 commented Apr 17, 2026

Uh oh!

zannager commented Apr 17, 2026

Uh oh!

JCQuintas commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexfauquette commented Apr 21, 2026

Uh oh!

JCQuintas commented Apr 21, 2026

Uh oh!

JCQuintas commented Apr 21, 2026

Uh oh!

alexfauquette commented Apr 21, 2026

Uh oh!

mustafajw07 commented Apr 21, 2026

Uh oh!

JCQuintas commented Apr 22, 2026

Uh oh!

mustafajw07 commented Apr 22, 2026

Uh oh!

JCQuintas commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mustafajw07 commented Apr 15, 2026 •

edited

Loading

code-infra-dashboard Bot commented Apr 15, 2026 •

edited

Loading

codspeed-hq Bot commented Apr 16, 2026 •

edited

Loading

JCQuintas commented Apr 20, 2026 •

edited

Loading