@mui/x-charts-pro 8.2.0 → 8.3.0

package/esm/LineChartPro/LineChartPro.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -16,6 +16,8 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { useLineChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
+import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
 import { LINE_CHART_PRO_PLUGINS } from "./LineChartPro.plugins.js";
@@ -39,7 +41,8 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -71,10 +74,10 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
         }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -219,6 +222,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * An array of [[LineSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * @default false
@@ -306,6 +314,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -366,6 +377,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -421,6 +435,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -476,6 +493,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -531,6 +551,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -586,6 +609,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -641,6 +667,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -696,6 +725,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),
@@ -763,6 +795,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -822,6 +857,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -876,6 +914,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -930,6 +971,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -984,6 +1028,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1038,6 +1085,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1092,6 +1142,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1146,6 +1199,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),

package/esm/ScatterChartPro/ScatterChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { ScatterChartProps } from '@mui/x-charts/ScatterChart';
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
 import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
-export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {}
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -15,6 +15,8 @@ import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useScatterChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
+import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
 import { SCATTER_CHART_PRO_PLUGINS } from "./ScatterChartPro.plugins.js";
@@ -38,7 +40,8 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -65,8 +68,8 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
         }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props?.slotProps?.tooltip, {
@@ -208,6 +211,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
@@ -300,6 +308,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -360,6 +371,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -415,6 +429,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -470,6 +487,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -525,6 +545,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -580,6 +603,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -635,6 +661,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -690,6 +719,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),
@@ -757,6 +789,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -816,6 +851,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -870,6 +908,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -924,6 +965,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -978,6 +1022,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1032,6 +1079,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1086,6 +1136,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1140,6 +1193,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),

package/esm/index.d.ts

@@ -25,6 +25,7 @@ export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
+export { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
@@ -32,4 +33,6 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
-export * from "./FunnelChart/index.js";
+export * from "./FunnelChart/index.js";
+export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsToolbarPro/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.2.0
+ * @mui/x-charts-pro v8.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -34,6 +34,7 @@ export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
+export { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
 
 // Pro components
 export * from "./hooks/index.js";
@@ -43,4 +44,6 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
-export * from "./FunnelChart/index.js";
+export * from "./FunnelChart/index.js";
+export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsToolbarPro/index.js";

package/esm/internals/material/icons.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ChartsZoomInIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;

package/esm/internals/material/icons.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createSvgIcon } from '@mui/x-charts/internals';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ChartsZoomInIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment, {
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"
+  })]
+}), 'ZoomIn');
+export const ChartsZoomOutIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
+}), 'ZoomOut');

package/esm/internals/material/index.d.ts

@@ -0,0 +1,4 @@
+import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
+import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
+export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;
+export declare const defaultSlotsMaterial: ChartsSlotsPro;

package/esm/internals/material/index.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import Tooltip from '@mui/material/Tooltip';
+import { defaultSlotsMaterial as communityDefaultSlotsMaterial } from '@mui/x-charts/internals';
+import { ChartsZoomInIcon, ChartsZoomOutIcon } from "./icons.js";
+const baseSlots = {
+  baseTooltip: Tooltip
+};
+const iconSlots = {
+  zoomInIcon: ChartsZoomInIcon,
+  zoomOutIcon: ChartsZoomOutIcon
+};
+export const defaultSlotsMaterial = _extends({}, communityDefaultSlotsMaterial, baseSlots, iconSlots);

package/esm/internals/plugins/useChartProZoom/calculateZoom.d.ts

@@ -0,0 +1,23 @@
+import { DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+export declare function calculateZoom<T extends Readonly<Pick<ZoomData, 'start' | 'end'>>>(zoom: T, step: number, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}: Pick<DefaultizedZoomOptions, 'minSpan' | 'maxSpan' | 'minStart' | 'maxEnd'>): T & {
+  start: number;
+  end: number;
+};

package/esm/internals/plugins/useChartProZoom/calculateZoom.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+export function calculateZoom(zoom, step, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}) {
+  const span = zoom.end - zoom.start;
+  let delta = span * step / 2;
+  if (delta > 0) {
+    delta = Math.min(delta, (span - minSpan) / 2);
+  } else {
+    delta = Math.max(delta, (span - maxSpan) / 2);
+  }
+  return _extends({}, zoom, {
+    start: Math.max(minStart, zoom.start + delta),
+    end: Math.min(maxEnd, zoom.end - delta)
+  });
+}

package/esm/internals/plugins/useChartProZoom/useChartProZoom.d.ts

@@ -1,4 +1,4 @@
 import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>, zoomData?: readonly ZoomData[]): ZoomData[];
+export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

package/esm/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -2,10 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
 import { useEventCallback } from '@mui/material/utils';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import debounce from '@mui/utils/debounce';
+import { calculateZoom } from "./calculateZoom.js";
 import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
 
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
@@ -101,6 +102,34 @@ export const useChartProZoom = ({
       });
     });
   }, [onZoomChange, store, removeIsInteracting]);
+  const moveZoomRange = React.useCallback((axisId, by) => {
+    setZoomDataCallback(prevZoomData => {
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId !== axisId) {
+          return zoom;
+        }
+        const options = optionsLookup[axisId];
+        if (!options) {
+          return zoom;
+        }
+        let start = zoom.start;
+        let end = zoom.end;
+        if (by > 0) {
+          const span = end - start;
+          end = Math.min(end + by, options.maxEnd);
+          start = end - span;
+        } else {
+          const span = end - start;
+          start = Math.max(start + by, options.minStart);
+          end = start + span;
+        }
+        return _extends({}, zoom, {
+          start,
+          end
+        });
+      });
+    });
+  }, [optionsLookup, setZoomDataCallback]);
   React.useEffect(() => {
     return () => {
       removeIsInteracting.clear();
@@ -327,12 +356,25 @@ export const useChartProZoom = ({
       rafThrottledSetZoomData.clear();
     };
   }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
+  const zoom = React.useCallback(step => {
+    setZoomDataCallback(prev => prev.map(zoomData => {
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), zoomData.axisId);
+      return calculateZoom(zoomData, step, zoomOptions);
+    }));
+  }, [setZoomDataCallback, store]);
+  const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
+  const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
   return {
     publicAPI: {
-      setZoomData: setZoomDataCallback
+      setZoomData: setZoomDataCallback,
+      zoomIn,
+      zoomOut
     },
     instance: {
-      setZoomData: setZoomDataCallback
+      setZoomData: setZoomDataCallback,
+      moveZoomRange,
+      zoomIn,
+      zoomOut
     }
   };
 };