@mui/x-charts-pro 9.3.0 → 9.4.0

package/BarChartPro/BarChartPro.js

@@ -264,12 +264,21 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  })),
+  }), _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
+      step: _propTypes.default.number,
+      unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -449,6 +458,27 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   })),
   /**

package/BarChartPro/BarChartPro.mjs

@@ -257,12 +257,21 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+  initialZoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  })),
+  }), PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -442,6 +451,27 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   })),
   /**

package/CHANGELOG.md

@@ -1,5 +1,201 @@
 # Changelog
 
+## 9.4.0
+
+<!-- generated comparing v9.3.0..master -->
+
+_Jun 4, 2026_
+
+We'd like to extend a big thank you to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Scheduler is now in Beta shipping with Timeline vitualization and lazy loading
+- 📆 Implement Event Timeline virtualization (#22339)
+- 🫧 Introduce bubble charts (#22537)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@imxv, @mixelburg, @mustafajw07
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @joserodolfofreitas, @LukasTy, @MBilalShafi, @michelengelen, @mj12albert, @noraleonte, @oliviertassinari, @rita-codes, @romgrk, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.4.0`
+
+- [DataGrid] Fix `avg` aggregation when the average is zero (#22652) @mj12albert
+- [DataGrid] Inherit icon `fontSize` from `baseIconButton` size (#22187) @imxv
+- [DataGrid] Fix `noRowsOverlay` flicker between `dataSource` re-fetches (#22465) @LukasTy
+
+#### `@mui/x-data-grid-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.4.0`.
+
+#### `@mui/x-data-grid-premium@9.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+> This release includes a version bump of the `@mui/x-internal-exceljs-fork` package to address the vulnerable dependencies.
+> The following CVEs are fixed:
+>
+> - <https://github.com/advisories/GHSA-ph9p-34f9-6g65>
+> - <https://github.com/isaacs/minimatch/security/advisories/GHSA-23c5-xmqv-rm74>
+> - <https://github.com/advisories/GHSA-w5hq-g745-h8pq>
+>
+> To make this security update possible, we bumped the `node` version requirement from `>=14.0.0` to `>=14.17.0`.
+> [Node.js 14.17.0](https://nodejs.org/en/blog/release/v14.17.0) was released in May 2021, so we consider it safe to bump the requirement without causing issues for our users.
+
+Same changes as in `@mui/x-data-grid-pro@9.4.0`, plus:
+
+- [DataGridPremium] Nested Lazy Loading (#21043) @MBilalShafi
+- [DataGridPremium] Update exceljs fork (#22658) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.4.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.4.0`
+
+- [charts] Add functionality to hide elements during chart export (#22525) @sai6855
+- [charts] Add option to show marks only on the first/last values (#22645) @alexfauquette
+- [charts] Add text customization section and demo for axis labels (#22597) @sai6855
+- [charts] Allow axes to scale according to the visible series only (#22566) @alexfauquette
+- [charts] Correctly handle different identifiers for each series (#22556) @sai6855
+- [charts] Fix inverted Y axis zoom/pan on ordinal scales (#22654) @JCQuintas
+- [charts] Introduce bubble charts (#22537) @alexfauquette
+- [charts] Let scatter chart tooltip ignore hidden series (#22614) @alexfauquette
+- [charts] Make `'sqrt'` size mapping the default (#22683) @alexfauquette
+- [charts] Remove unused proptypes (#22618) @alexfauquette
+- [charts] Support module augmentation for slots (#22519) @sai6855
+- [charts] Support multiple marker size in `findClosestPoint` (#22622) @alexfauquette
+- [charts] Upgrade bezier-easing to v3 and use it for line chart hit-detection (#22608) @sai6855
+- [charts] Use `useLayoutEffect` with `ResizeObserver` (#22646) @JCQuintas
+
+#### `@mui/x-charts-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.4.0`, plus:
+
+- [charts-pro] Auto-select range button matching current zoom (#22137) @JCQuintas
+- [charts-pro] Support range values in `initialZoom` (#22563) @JCQuintas
+
+#### `@mui/x-charts-premium@9.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.4.0`, plus:
+
+- [charts-premium] Support range-bar series in WebGL bar renderer (#22607) @JCQuintas
+- [charts-premium] Fix `onAxisClick` for radial bar and lines (#22522) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@9.4.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.4.0`.
+
+### Scheduler
+
+#### Breaking changes
+
+The theme `styleOverrides` slots for the skeleton and the error container were
+renamed and unified. The CSS utility class names (for example
+`.MuiEventCalendar-eventSkeleton`) are **not** affected — only
+`theme.components.*` overrides need updating.
+
+**Event skeleton**
+
+| Before                                  | After                          |
+| --------------------------------------- | ------------------------------ |
+| `MuiEventCalendar` slot `EventSkeleton` | `MuiEventSkeleton` slot `Root` |
+| `MuiEventTimeline` slot `EventSkeleton` | `MuiEventSkeleton` slot `Root` |
+
+**Error container**
+
+| Before                                                        | After                                   |
+| ------------------------------------------------------------- | --------------------------------------- |
+| `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorContainer` | `MuiEventErrorContainer` slot `Root`    |
+| `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorAlert`     | `MuiEventErrorContainer` slot `Alert`   |
+| `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorMessage`   | `MuiEventErrorContainer` slot `Message` |
+
+If you customized these through the theme, update the component name and slot
+names accordingly:
+
+```diff
+ components: {
+-  MuiEventCalendar: {
++  MuiEventSkeleton: {
+     styleOverrides: {
+-      EventSkeleton: { /* ... */ },
++      Root: { /* ... */ },
+     },
+    },
+  },
+ }
+```
+
+#### `@mui/x-scheduler@9.0.0-beta.0`
+
+- [scheduler] Add a prop to control whether the resource of an event can be cleared (#22464) @rita-codes
+- [scheduler] Add week number labels to agenda, day and week views (#22594) @mustafajw07
+- [scheduler] Add `weekStartsOn` preference and update date functions to support custom week start (#22426) @mustafajw07
+- [scheduler] Export premium version of the standalone views (#22621) @flaviendelangle
+- [scheduler] Implement timeline virtualization (#22339) @romgrk
+- [scheduler] Split scheduler overview (#22453) @joserodolfofreitas
+- [scheduler] Unify `EventSkeleton` and `ErrorContainer` between `EventCalendar` and `EventTimeline` (#22676) @noraleonte
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.0`.
+
+### Docs
+
+- [docs] Add a performance docs page for charts (#22656) @alexfauquette
+- [docs] Add real dataset for maps documentation (#22599) @alexfauquette
+- [docs] Add spacing between selects on charts overview demo (#22589) @bernardobelchior
+- [docs] Reorganize existing chat docs navigation (#22478) @hasdfa
+- [docs] Switch to visionscarto's world atlas dataset (#22669) @cherniavskii
+- [docs] Update TreeView `domstructure` docs and add demo (#22420) @mj12albert
+- [docs] Fix indexation of Scheduler (#22567) @oliviertassinari
+- [docs] Fix wide layout on event timeline lazy loading and Import title (#22604) @rita-codes
+- [docs] Derive class name owners for shared charts classes (#22674) @JCQuintas
+
+### Core
+
+- [code-infra] Drop unused and now-transitive deps from docs/package.json (#22549) @LukasTy
+- [code-infra] Refresh CI Node pins to 22.22.3 (#22598) @LukasTy
+- [code-infra] Skip empty product sections in changelog (#22541) @rita-codes
+- [code-infra] Stabilize DataGridScrollRestoration visual regression test (#22553) @Janpot
+- [internal] Add license to the `x-data-grid-generator` (#22240) @arminmeh
+- [internal] Express default value for resource_class (#22569) @oliviertassinari
+- [internal] Fix use of ellipsis (#21852) @oliviertassinari
+- [internal] `useLayoutEffect` with `ResizeObserver` (#22428) @romgrk
+
+### Miscellaneous
+
+- [chat-headless] Add built-in chat adapters (#22479) @hasdfa
+- [chat-headless] Harden runtime model and message errors (#22480) @hasdfa
+- [core] Prepare for TypeScript 6 bump (#22551) @LukasTy
+- [core] Use CircleCI Gen2 resource classes (#22610) @LukasTy
+- [infra] Fix broken tag retrieval on `master` during release (#22174) @michelengelen
+- [infra] Group Base UI renovate updates (#22590) @LukasTy
+- [pnpm] Add security settings to pnpm-workspace.yaml (#22611) @Janpot
+- [release] Fix release PR scripts (#22680) @JCQuintas
+- [test] Add a Tree View regression test for lazy loading with getChildrenCount returning -1 (#22605) @mixelburg
+- [test] Disable LCD subpixel antialiasing in regression screenshots (#22602) @Janpot
+- [test] Fix flaky Data Grid Pro data source tree data tests (#22659) @LukasTy
+- [test] Remove stale form-submit TODO from e2e suite (#22564) @LukasTy
+- [x-license] Exclude test keys from the published npm package (#22647) @aemartos
+- [test] Fix flaky WebGL benchmark by polling for canvas content (#22535) @JCQuintas
+
 ## 9.3.0
 
 _May 21, 2026_

package/ChartsDataProviderPro/ChartsDataProviderPro.js

@@ -18,8 +18,8 @@ var _useChartsDataProviderProProps = require("./useChartsDataProviderProProps");
 var _ChartsWatermark = require("../internals/ChartsWatermark");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc3OTMyMTYwMDAwMA==",
-  version: "9.3.0",
+  releaseDate: "MTc4MDUzMTIwMDAwMA==",
+  version: "9.4.0",
   name: 'x-charts-pro'
 };
 const defaultSeriesConfigPro = exports.defaultSeriesConfigPro = _internals.defaultSeriesConfig;

package/ChartsDataProviderPro/ChartsDataProviderPro.mjs

@@ -11,8 +11,8 @@ import { useChartsDataProviderProProps } from "./useChartsDataProviderProProps.m
 import { ChartsWatermark } from "../internals/ChartsWatermark.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc3OTMyMTYwMDAwMA==",
-  version: "9.3.0",
+  releaseDate: "MTc4MDUzMTIwMDAwMA==",
+  version: "9.4.0",
   name: 'x-charts-pro'
 };
 export const defaultSeriesConfigPro = defaultSeriesConfig;

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -68,6 +68,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
     fileName: _propTypes.default.string,
     nonce: _propTypes.default.string,
     onBeforeExport: _propTypes.default.func,
+    pixelRatio: _propTypes.default.number,
     quality: _propTypes.default.number,
     type: _propTypes.default.string.isRequired
   }),

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.mjs

@@ -60,6 +60,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
     fileName: PropTypes.string,
     nonce: PropTypes.string,
     onBeforeExport: PropTypes.func,
+    pixelRatio: PropTypes.number,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired
   }),

package/ChartsToolbarPro/ChartsToolbarPro.d.mts

@@ -3,7 +3,7 @@ import { type AxisId } from '@mui/x-charts/internals';
 import { type RangeButtonValue } from "./rangeButtonValueToZoom.mjs";
 import { type ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.mjs";
 import { type ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.mjs";
-export type { RangeButtonFunctionParams } from "./rangeButtonValueToZoom.mjs";
+export type { RangeButtonFunctionParams, RangeButtonValue, RangeButtonIntervalUnit } from "./rangeButtonValueToZoom.mjs";
 export interface RangeButtonConfig {
   /**
    * The label displayed on the button (e.g., "1M", "3M", "1Y").

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -3,7 +3,7 @@ import { type AxisId } from '@mui/x-charts/internals';
 import { type RangeButtonValue } from "./rangeButtonValueToZoom.js";
 import { type ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.js";
 import { type ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.js";
-export type { RangeButtonFunctionParams } from "./rangeButtonValueToZoom.js";
+export type { RangeButtonFunctionParams, RangeButtonValue, RangeButtonIntervalUnit } from "./rangeButtonValueToZoom.js";
 export interface RangeButtonConfig {
   /**
    * The label displayed on the button (e.g., "1M", "3M", "1Y").

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.mts

@@ -11,7 +11,7 @@ export interface ChartsToolbarRangeButtonTriggerProps {
    * The range value. Specifies how far back from the end of the data to zoom.
    *
    * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
-   * - `[start, end]` — An absolute date range.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
    * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
    * - `null` — Resets zoom to show all data.
    */

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.ts

@@ -11,7 +11,7 @@ export interface ChartsToolbarRangeButtonTriggerProps {
    * The range value. Specifies how far back from the end of the data to zoom.
    *
    * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
-   * - `[start, end]` — An absolute date range.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
    * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
    * - `null` — Resets zoom to show all data.
    */

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.js

@@ -38,7 +38,6 @@ const ChartsToolbarRangeButtonTrigger = exports.ChartsToolbarRangeButtonTrigger
     instance,
     store
   } = (0, _internals.useChartsContext)();
-  const activeRangeButtonKey = store.use(_useChartProZoom.selectorChartActiveRangeButtonKey);
   const canZoomOut = store.use(_useChartProZoom.selectorChartCanZoomOut);
   const zoomOptionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const rawXAxes = store.use(_internals.selectorChartRawXAxis);
@@ -56,55 +55,53 @@ const ChartsToolbarRangeButtonTrigger = exports.ChartsToolbarRangeButtonTrigger
     }
     return rawXAxes.find(axis => zoomOptionsLookup[axis.id] !== undefined)?.id;
   }, [axisIdProp, rawXAxes, zoomOptionsLookup]);
-
-  // Determine if the resolved axis is ordinal (band/point) to use index-based domain.
+  const currentAxisZoom = store.use(_useChartProZoom.selectorChartAxisZoomData, resolvedAxisId);
   const resolvedAxis = React.useMemo(() => rawXAxes?.find(axis => axis.id === resolvedAxisId), [rawXAxes, resolvedAxisId]);
-  const isOrdinal = resolvedAxis?.scaleType === 'band' || resolvedAxis?.scaleType === 'point';
+  // Use isValueNull instead of value === null to avoid unnecessary re-renders when value is a new function/object on each render.
+  const isValueNull = value === null;
 
-  // Get the full domain for the target axis, ignoring the current zoom.
-  // For ordinal axes (band/point), use index-based range since domain values are categories.
-  const axisDomain = React.useMemo(() => {
-    if (resolvedAxisId === undefined) {
-      return undefined;
-    }
-    const domainDef = domains[resolvedAxisId];
-    if (!domainDef || domainDef.domain.length < 2) {
+  // Build the range conversion params for the target axis, ignoring the current zoom.
+  const domainParams = React.useMemo(() => {
+    if (resolvedAxisId === undefined || resolvedAxis === undefined) {
       return undefined;
     }
-    if (isOrdinal) {
+    return (0, _rangeButtonValueToZoom.getRangeButtonDomainParams)(resolvedAxis, domains[resolvedAxisId]?.domain);
+  }, [resolvedAxisId, resolvedAxis, domains]);
+
+  // Destructure so that returning a new object from rangeButtonValueToZoom doesn't cause unnecessary re-renders in handleClick.
+  const {
+    start: startZoom,
+    end: endZoom
+  } = React.useMemo(() => {
+    if (domainParams === undefined) {
       return {
-        min: 0,
-        max: domainDef.domain.length - 1
+        start: undefined,
+        end: undefined
       };
     }
-    const min = domainDef.domain[0];
-    const max = domainDef.domain[domainDef.domain.length - 1];
-    return {
-      min: Number(min),
-      max: Number(max)
-    };
-  }, [resolvedAxisId, domains, isOrdinal]);
+    return (0, _rangeButtonValueToZoom.rangeButtonValueToZoom)(value, domainParams);
+  }, [domainParams, value]);
   const handleClick = React.useCallback(() => {
-    if (resolvedAxisId === undefined || !axisDomain) {
+    if (resolvedAxisId === undefined || startZoom === undefined || endZoom === undefined) {
       return;
     }
-    const zoom = (0, _rangeButtonValueToZoom.rangeButtonValueToZoom)(value, {
-      scaleType: resolvedAxis?.scaleType ?? 'linear',
-      data: resolvedAxis?.data,
-      domain: axisDomain
-    });
     instance.setAxisZoomData(resolvedAxisId, {
       axisId: resolvedAxisId,
-      start: zoom.start,
-      end: zoom.end
+      start: startZoom,
+      end: endZoom
     });
-    instance.setActiveRangeButtonKey(label);
-  }, [resolvedAxisId, resolvedAxis, axisDomain, value, instance, label]);
+  }, [resolvedAxisId, startZoom, endZoom, instance]);
 
-  // Determine if this button is selected.
-  // When explicitly clicked, activeRangeButtonKey matches the label.
-  // When no button has been clicked and zoom is at full range, the null-value button is active.
-  const isActive = activeRangeButtonKey === label || activeRangeButtonKey === null && value === null && !canZoomOut;
+  // A button is selected when the current zoom range matches its computed range.
+  const isActive = React.useMemo(() => {
+    if (startZoom === undefined || endZoom === undefined) {
+      return isValueNull && !canZoomOut;
+    }
+    const start = currentAxisZoom?.start ?? 0;
+    const end = currentAxisZoom?.end ?? 100;
+    const epsilon = 0.01;
+    return Math.abs(start - startZoom) < epsilon && Math.abs(end - endZoom) < epsilon;
+  }, [startZoom, endZoom, isValueNull, currentAxisZoom, canZoomOut]);
   const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseToggleButton, render, (0, _extends2.default)({}, slotProps.baseToggleButton, {
     onClick: handleClick,
     selected: isActive,
@@ -145,11 +142,11 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarRangeButtonTrigger.propType
    * The range value. Specifies how far back from the end of the data to zoom.
    *
    * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
-   * - `[start, end]` — An absolute date range.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
    * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
    * - `null` — Resets zoom to show all data.
    */
-  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.func, _propTypes.default.shape({
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
     step: _propTypes.default.number,
     unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
   })])

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.mjs

@@ -7,8 +7,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useChartsContext, useChartsSlots, selectorChartRawXAxis, selectorChartXAxisWithDomains, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
-import { selectorChartActiveRangeButtonKey, selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
-import { rangeButtonValueToZoom } from "./rangeButtonValueToZoom.mjs";
+import { selectorChartAxisZoomData, selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
+import { getRangeButtonDomainParams, rangeButtonValueToZoom } from "./rangeButtonValueToZoom.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that sets the chart zoom to a predefined range.
@@ -31,7 +31,6 @@ const ChartsToolbarRangeButtonTrigger = /*#__PURE__*/React.forwardRef(function C
     instance,
     store
   } = useChartsContext();
-  const activeRangeButtonKey = store.use(selectorChartActiveRangeButtonKey);
   const canZoomOut = store.use(selectorChartCanZoomOut);
   const zoomOptionsLookup = store.use(selectorChartZoomOptionsLookup);
   const rawXAxes = store.use(selectorChartRawXAxis);
@@ -49,55 +48,53 @@ const ChartsToolbarRangeButtonTrigger = /*#__PURE__*/React.forwardRef(function C
     }
     return rawXAxes.find(axis => zoomOptionsLookup[axis.id] !== undefined)?.id;
   }, [axisIdProp, rawXAxes, zoomOptionsLookup]);
-
-  // Determine if the resolved axis is ordinal (band/point) to use index-based domain.
+  const currentAxisZoom = store.use(selectorChartAxisZoomData, resolvedAxisId);
   const resolvedAxis = React.useMemo(() => rawXAxes?.find(axis => axis.id === resolvedAxisId), [rawXAxes, resolvedAxisId]);
-  const isOrdinal = resolvedAxis?.scaleType === 'band' || resolvedAxis?.scaleType === 'point';
+  // Use isValueNull instead of value === null to avoid unnecessary re-renders when value is a new function/object on each render.
+  const isValueNull = value === null;
 
-  // Get the full domain for the target axis, ignoring the current zoom.
-  // For ordinal axes (band/point), use index-based range since domain values are categories.
-  const axisDomain = React.useMemo(() => {
-    if (resolvedAxisId === undefined) {
-      return undefined;
-    }
-    const domainDef = domains[resolvedAxisId];
-    if (!domainDef || domainDef.domain.length < 2) {
+  // Build the range conversion params for the target axis, ignoring the current zoom.
+  const domainParams = React.useMemo(() => {
+    if (resolvedAxisId === undefined || resolvedAxis === undefined) {
       return undefined;
     }
-    if (isOrdinal) {
+    return getRangeButtonDomainParams(resolvedAxis, domains[resolvedAxisId]?.domain);
+  }, [resolvedAxisId, resolvedAxis, domains]);
+
+  // Destructure so that returning a new object from rangeButtonValueToZoom doesn't cause unnecessary re-renders in handleClick.
+  const {
+    start: startZoom,
+    end: endZoom
+  } = React.useMemo(() => {
+    if (domainParams === undefined) {
       return {
-        min: 0,
-        max: domainDef.domain.length - 1
+        start: undefined,
+        end: undefined
       };
     }
-    const min = domainDef.domain[0];
-    const max = domainDef.domain[domainDef.domain.length - 1];
-    return {
-      min: Number(min),
-      max: Number(max)
-    };
-  }, [resolvedAxisId, domains, isOrdinal]);
+    return rangeButtonValueToZoom(value, domainParams);
+  }, [domainParams, value]);
   const handleClick = React.useCallback(() => {
-    if (resolvedAxisId === undefined || !axisDomain) {
+    if (resolvedAxisId === undefined || startZoom === undefined || endZoom === undefined) {
       return;
     }
-    const zoom = rangeButtonValueToZoom(value, {
-      scaleType: resolvedAxis?.scaleType ?? 'linear',
-      data: resolvedAxis?.data,
-      domain: axisDomain
-    });
     instance.setAxisZoomData(resolvedAxisId, {
       axisId: resolvedAxisId,
-      start: zoom.start,
-      end: zoom.end
+      start: startZoom,
+      end: endZoom
     });
-    instance.setActiveRangeButtonKey(label);
-  }, [resolvedAxisId, resolvedAxis, axisDomain, value, instance, label]);
+  }, [resolvedAxisId, startZoom, endZoom, instance]);
 
-  // Determine if this button is selected.
-  // When explicitly clicked, activeRangeButtonKey matches the label.
-  // When no button has been clicked and zoom is at full range, the null-value button is active.
-  const isActive = activeRangeButtonKey === label || activeRangeButtonKey === null && value === null && !canZoomOut;
+  // A button is selected when the current zoom range matches its computed range.
+  const isActive = React.useMemo(() => {
+    if (startZoom === undefined || endZoom === undefined) {
+      return isValueNull && !canZoomOut;
+    }
+    const start = currentAxisZoom?.start ?? 0;
+    const end = currentAxisZoom?.end ?? 100;
+    const epsilon = 0.01;
+    return Math.abs(start - startZoom) < epsilon && Math.abs(end - endZoom) < epsilon;
+  }, [startZoom, endZoom, isValueNull, currentAxisZoom, canZoomOut]);
   const element = useComponentRenderer(slots.baseToggleButton, render, _extends({}, slotProps.baseToggleButton, {
     onClick: handleClick,
     selected: isActive,
@@ -138,11 +135,11 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarRangeButtonTrigger.propType
    * The range value. Specifies how far back from the end of the data to zoom.
    *
    * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
-   * - `[start, end]` — An absolute date range.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
    * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
    * - `null` — Resets zoom to show all data.
    */
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.func, PropTypes.shape({
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
     step: PropTypes.number,
     unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
   })])

package/ChartsToolbarPro/Toolbar.types.d.mts

@@ -1,15 +1,16 @@
 import type * as React from 'react';
+import type { ToolbarPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsToolbarProProps } from "./ChartsToolbarPro.mjs";
 export interface ChartsToolbarProSlots {
   /**
    * Custom component for the toolbar.
    * @default ChartsToolbar
    */
-  toolbar?: React.ElementType<ChartsToolbarProProps>;
+  toolbar?: React.ElementType<ChartsToolbarProProps & ToolbarPropsOverrides>;
 }
 export interface ChartsToolbarProSlotProps {
   /**
    * Props for the toolbar component.
    */
-  toolbar?: Partial<ChartsToolbarProProps>;
+  toolbar?: Partial<ChartsToolbarProProps> & ToolbarPropsOverrides;
 }