@mui/x-charts-pro 9.0.1 → 9.0.3

package/ChartsRotationAxis/index.d.mts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRotationAxis';

package/ChartsRotationAxis/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRotationAxis';

package/ChartsRotationAxis/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsRotationAxis = require("@mui/x-charts/ChartsRotationAxis");
+Object.keys(_ChartsRotationAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsRotationAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRotationAxis[key];
+    }
+  });
+});

package/ChartsRotationAxis/index.mjs

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsRotationAxis';

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -75,6 +75,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.mjs

@@ -67,6 +67,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.object,
   tabIndex: PropTypes.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -73,6 +73,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.mjs

@@ -65,6 +65,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.object,
   tabIndex: PropTypes.number
 } : void 0;

package/ChartsToolbarPro/ChartsToolbarPro.d.mts

@@ -1,9 +1,37 @@
 import { type ChartsToolbarProps } from '@mui/x-charts/Toolbar';
+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 interface RangeButtonConfig {
+  /**
+   * The label displayed on the button (e.g., "1M", "3M", "1Y").
+   */
+  label: string;
+  /**
+   * The range value.
+   *
+   * - `{ 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.
+   * - `(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: RangeButtonValue;
+}
 export interface ChartsToolbarProProps extends ChartsToolbarProps {
   printOptions?: ChartsToolbarPrintExportOptions;
   imageExportOptions?: ChartsToolbarImageExportOptions[];
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons?: RangeButtonConfig[];
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId?: AxisId;
 }
 /**
  * The chart toolbar component for the pro package.
@@ -11,6 +39,8 @@ export interface ChartsToolbarProProps extends ChartsToolbarProps {
 declare function ChartsToolbarPro({
   printOptions,
   imageExportOptions: rawImageExportOptions,
+  rangeButtons,
+  rangeButtonsAxisId,
   ...other
 }: ChartsToolbarProProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsToolbarPro {

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,9 +1,37 @@
 import { type ChartsToolbarProps } from '@mui/x-charts/Toolbar';
+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 interface RangeButtonConfig {
+  /**
+   * The label displayed on the button (e.g., "1M", "3M", "1Y").
+   */
+  label: string;
+  /**
+   * The range value.
+   *
+   * - `{ 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.
+   * - `(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: RangeButtonValue;
+}
 export interface ChartsToolbarProProps extends ChartsToolbarProps {
   printOptions?: ChartsToolbarPrintExportOptions;
   imageExportOptions?: ChartsToolbarImageExportOptions[];
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons?: RangeButtonConfig[];
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId?: AxisId;
 }
 /**
  * The chart toolbar component for the pro package.
@@ -11,6 +39,8 @@ export interface ChartsToolbarProProps extends ChartsToolbarProps {
 declare function ChartsToolbarPro({
   printOptions,
   imageExportOptions: rawImageExportOptions,
+  rangeButtons,
+  rangeButtonsAxisId,
   ...other
 }: ChartsToolbarProProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsToolbarPro {

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
 var _Toolbar = require("@mui/x-charts/Toolbar");
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
@@ -20,13 +22,25 @@ var _ChartsMenu = require("./internals/ChartsMenu");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
 var _ChartsToolbarZoomInTrigger = require("./ChartsToolbarZoomInTrigger");
 var _ChartsToolbarZoomOutTrigger = require("./ChartsToolbarZoomOutTrigger");
+var _ChartsToolbarRangeButtonTrigger = require("./ChartsToolbarRangeButtonTrigger");
 var _ChartsToolbarPrintExportTrigger = require("./ChartsToolbarPrintExportTrigger");
 var _ChartsToolbarImageExportTrigger = require("./ChartsToolbarImageExportTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["printOptions", "imageExportOptions"];
+const _excluded = ["printOptions", "imageExportOptions", "rangeButtons", "rangeButtonsAxisId"];
 const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
   type: 'image/png'
 }];
+const RangeButtonGroup = (0, _styles.styled)(_ToggleButtonGroup.default, {
+  name: 'MuiChartsToolbarRangeButtons',
+  slot: 'Root'
+})({
+  alignSelf: 'stretch',
+  '& .MuiToggleButton-root': {
+    fontSize: '0.75rem',
+    minWidth: 'unset',
+    border: 'none'
+  }
+});
 
 /**
  * The chart toolbar component for the pro package.
@@ -34,7 +48,9 @@ const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
 function ChartsToolbarPro(_ref) {
   let {
       printOptions,
-      imageExportOptions: rawImageExportOptions
+      imageExportOptions: rawImageExportOptions,
+      rangeButtons,
+      rangeButtonsAxisId
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -56,29 +72,46 @@ function ChartsToolbarPro(_ref) {
   const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
+    if (rangeButtons && rangeButtons.length > 0) {
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(RangeButtonGroup, {
+        exclusive: true,
+        size: "small",
+        children: rangeButtons.map(rangeButton => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarRangeButtonTrigger.ChartsToolbarRangeButtonTrigger, {
+          value: rangeButton.value,
+          label: rangeButton.label,
+          axisId: rangeButtonsAxisId,
+          children: rangeButton.label
+        }, rangeButton.label))
+      }, "range-buttons"));
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarDivider.ChartsToolbarDivider, {}, "range-divider"));
+    }
     const Tooltip = slots.baseTooltip;
     const ZoomOutIcon = slots.zoomOutIcon;
     const ZoomInIcon = slots.zoomInIcon;
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({
-          fontSize: "small"
-        }, slotProps.zoomInIcon))
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({
+            fontSize: "small"
+          }, slotProps.zoomInIcon))
+        })
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({
-          fontSize: "small"
-        }, slotProps.zoomOutIcon))
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({
+            fontSize: "small"
+          }, slotProps.zoomOutIcon))
+        })
       })
     }), "zoom-out"));
   }
@@ -165,7 +198,23 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
     quality: _propTypes.default.number,
     type: _propTypes.default.string.isRequired
   })),
-  printOptions: _propTypes.default.object
+  printOptions: _propTypes.default.object,
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).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
+    })])
+  })),
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 } : void 0;
 function isHideMenuKey(key) {
   return key === 'Tab' || key === 'Escape';

package/ChartsToolbarPro/ChartsToolbarPro.mjs

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["printOptions", "imageExportOptions"];
+const _excluded = ["printOptions", "imageExportOptions", "rangeButtons", "rangeButtonsAxisId"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
 import { useChartsContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
@@ -14,12 +16,24 @@ import { ChartsMenu } from "./internals/ChartsMenu.mjs";
 import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.mjs";
 import { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.mjs";
 import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.mjs";
+import { ChartsToolbarRangeButtonTrigger } from "./ChartsToolbarRangeButtonTrigger.mjs";
 import { ChartsToolbarPrintExportTrigger } from "./ChartsToolbarPrintExportTrigger.mjs";
 import { ChartsToolbarImageExportTrigger } from "./ChartsToolbarImageExportTrigger.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
   type: 'image/png'
 }];
+const RangeButtonGroup = styled(ToggleButtonGroup, {
+  name: 'MuiChartsToolbarRangeButtons',
+  slot: 'Root'
+})({
+  alignSelf: 'stretch',
+  '& .MuiToggleButton-root': {
+    fontSize: '0.75rem',
+    minWidth: 'unset',
+    border: 'none'
+  }
+});
 
 /**
  * The chart toolbar component for the pro package.
@@ -27,7 +41,9 @@ const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
 function ChartsToolbarPro(_ref) {
   let {
       printOptions,
-      imageExportOptions: rawImageExportOptions
+      imageExportOptions: rawImageExportOptions,
+      rangeButtons,
+      rangeButtonsAxisId
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -49,29 +65,46 @@ function ChartsToolbarPro(_ref) {
   const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
+    if (rangeButtons && rangeButtons.length > 0) {
+      children.push(/*#__PURE__*/_jsx(RangeButtonGroup, {
+        exclusive: true,
+        size: "small",
+        children: rangeButtons.map(rangeButton => /*#__PURE__*/_jsx(ChartsToolbarRangeButtonTrigger, {
+          value: rangeButton.value,
+          label: rangeButton.label,
+          axisId: rangeButtonsAxisId,
+          children: rangeButton.label
+        }, rangeButton.label))
+      }, "range-buttons"));
+      children.push(/*#__PURE__*/_jsx(ChartsToolbarDivider, {}, "range-divider"));
+    }
     const Tooltip = slots.baseTooltip;
     const ZoomOutIcon = slots.zoomOutIcon;
     const ZoomInIcon = slots.zoomInIcon;
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
-      children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({
-          fontSize: "small"
-        }, slotProps.zoomInIcon))
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
+          render: /*#__PURE__*/_jsx(ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({
+            fontSize: "small"
+          }, slotProps.zoomInIcon))
+        })
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
-      children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {
-          size: "small"
-        }),
-        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({
-          fontSize: "small"
-        }, slotProps.zoomOutIcon))
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
+          render: /*#__PURE__*/_jsx(ToolbarButton, {
+            size: "small"
+          }),
+          children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({
+            fontSize: "small"
+          }, slotProps.zoomOutIcon))
+        })
       })
     }), "zoom-out"));
   }
@@ -158,7 +191,23 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
     quality: PropTypes.number,
     type: PropTypes.string.isRequired
   })),
-  printOptions: PropTypes.object
+  printOptions: PropTypes.object,
+  /**
+   * Configuration for range buttons shown in the toolbar.
+   * Each button zooms the chart to a predefined time range from the end of the data.
+   */
+  rangeButtons: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })),
+  /**
+   * The axis ID to apply range buttons to.
+   * Defaults to the first x-axis with zoom enabled and a time scale.
+   */
+  rangeButtonsAxisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : void 0;
 export { ChartsToolbarPro };
 function isHideMenuKey(key) {

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.mts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { type ChartsSlotProps, type AxisId } from '@mui/x-charts/internals';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type RangeButtonValue } from "./rangeButtonValueToZoom.mjs";
+export interface ChartsToolbarRangeButtonTriggerProps {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseToggleButton']>;
+  /**
+   * 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.
+   * - `(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: RangeButtonValue;
+  /**
+   * The axis ID to apply the range to.
+   * Defaults to the first x-axis with zoom enabled.
+   */
+  axisId?: AxisId;
+  /**
+   * The label used to identify the button for active-state tracking.
+   */
+  label: string;
+  /**
+   * The size of the button.
+   * @default 'small'
+   */
+  size?: 'small' | 'medium' | 'large';
+}
+/**
+ * A button that sets the chart zoom to a predefined range.
+ * It renders the `baseToggleButton` slot.
+ */
+declare const ChartsToolbarRangeButtonTrigger: React.ForwardRefExoticComponent<ChartsToolbarRangeButtonTriggerProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarRangeButtonTrigger };

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { type ChartsSlotProps, type AxisId } from '@mui/x-charts/internals';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type RangeButtonValue } from "./rangeButtonValueToZoom.js";
+export interface ChartsToolbarRangeButtonTriggerProps {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseToggleButton']>;
+  /**
+   * 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.
+   * - `(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: RangeButtonValue;
+  /**
+   * The axis ID to apply the range to.
+   * Defaults to the first x-axis with zoom enabled.
+   */
+  axisId?: AxisId;
+  /**
+   * The label used to identify the button for active-state tracking.
+   */
+  label: string;
+  /**
+   * The size of the button.
+   * @default 'small'
+   */
+  size?: 'small' | 'medium' | 'large';
+}
+/**
+ * A button that sets the chart zoom to a predefined range.
+ * It renders the `baseToggleButton` slot.
+ */
+declare const ChartsToolbarRangeButtonTrigger: React.ForwardRefExoticComponent<ChartsToolbarRangeButtonTriggerProps & {
+  children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarRangeButtonTrigger };

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.js

@@ -0,0 +1,156 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarRangeButtonTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _internals = require("@mui/x-charts/internals");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");
+var _rangeButtonValueToZoom = require("./rangeButtonValueToZoom");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "value", "axisId", "label", "size"];
+/**
+ * A button that sets the chart zoom to a predefined range.
+ * It renders the `baseToggleButton` slot.
+ */
+const ChartsToolbarRangeButtonTrigger = exports.ChartsToolbarRangeButtonTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarRangeButtonTrigger(_ref, ref) {
+  let {
+      render,
+      value,
+      axisId: axisIdProp,
+      label,
+      size = 'small'
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const {
+    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);
+  const {
+    domains
+  } = store.use(_internals.selectorChartXAxisWithDomains);
+
+  // Resolve the target axis ID: use the prop, or find the first zoomable x-axis.
+  const resolvedAxisId = React.useMemo(() => {
+    if (axisIdProp !== undefined) {
+      return axisIdProp;
+    }
+    if (!rawXAxes) {
+      return undefined;
+    }
+    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 resolvedAxis = React.useMemo(() => rawXAxes?.find(axis => axis.id === resolvedAxisId), [rawXAxes, resolvedAxisId]);
+  const isOrdinal = resolvedAxis?.scaleType === 'band' || resolvedAxis?.scaleType === 'point';
+
+  // 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) {
+      return undefined;
+    }
+    if (isOrdinal) {
+      return {
+        min: 0,
+        max: domainDef.domain.length - 1
+      };
+    }
+    const min = domainDef.domain[0];
+    const max = domainDef.domain[domainDef.domain.length - 1];
+    return {
+      min: Number(min),
+      max: Number(max)
+    };
+  }, [resolvedAxisId, domains, isOrdinal]);
+  const handleClick = React.useCallback(() => {
+    if (resolvedAxisId === undefined || !axisDomain) {
+      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
+    });
+    instance.setActiveRangeButtonKey(label);
+  }, [resolvedAxisId, resolvedAxis, axisDomain, value, instance, label]);
+
+  // 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;
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseToggleButton, render, (0, _extends2.default)({}, slotProps.baseToggleButton, {
+    onClick: handleClick,
+    selected: isActive,
+    value: label,
+    size
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarRangeButtonTrigger.displayName = "ChartsToolbarRangeButtonTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarRangeButtonTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The axis ID to apply the range to.
+   * Defaults to the first x-axis with zoom enabled.
+   */
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The label used to identify the button for active-state tracking.
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  /**
+   * The size of the button.
+   * @default 'small'
+   */
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  /**
+   * 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.
+   * - `(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({
+    step: _propTypes.default.number,
+    unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+  })])
+} : void 0;