@mui/x-charts-pro 8.2.0 → 8.3.1

package/LineChartPro/LineChartPro.js

@@ -22,11 +22,13 @@ var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _internals = require("@mui/x-charts/internals");
+var _ChartZoomSlider = require("../ChartZoomSlider");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _LineChartPro = require("./LineChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
  * Demos:
  *
@@ -46,7 +48,8 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -78,10 +81,10 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -226,6 +229,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * An array of [[LineSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * If `true`, animations are skipped.
    * @default false
@@ -313,6 +321,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -373,6 +384,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -428,6 +442,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -483,6 +500,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -538,6 +558,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -593,6 +616,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -648,6 +674,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -703,6 +732,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),
@@ -770,6 +802,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -829,6 +864,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -883,6 +921,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -937,6 +978,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -991,6 +1035,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1045,6 +1092,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1099,6 +1149,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1153,6 +1206,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),

package/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/ScatterChartPro/ScatterChartPro.js

@@ -21,11 +21,13 @@ var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _internals = require("@mui/x-charts/internals");
+var _ChartZoomSlider = require("../ChartZoomSlider");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _ScatterChartPro = require("./ScatterChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
  * Demos:
  *
@@ -45,7 +47,8 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -72,8 +75,8 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip, {
@@ -215,6 +218,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
@@ -307,6 +315,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -367,6 +378,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -422,6 +436,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -477,6 +494,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -532,6 +552,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -587,6 +610,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -642,6 +668,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -697,6 +726,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),
@@ -764,6 +796,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -823,6 +858,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -877,6 +915,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -931,6 +972,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -985,6 +1029,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1039,6 +1086,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1093,6 +1143,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1147,6 +1200,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),

package/esm/BarChartPro/BarChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { BarChartProps } from '@mui/x-charts/BarChart';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {}
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *

package/esm/BarChartPro/BarChartPro.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 { useBarChartProps, ChartsWrapper } from '@mui/x-charts/internals';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+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 { BAR_CHART_PRO_PLUGINS } from "./BarChartPro.plugins.js";
@@ -40,7 +42,8 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -69,10 +72,10 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(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(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       }))]
     }))
   }));
@@ -222,6 +225,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * An array of [[BarSeriesType]] 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.
@@ -309,6 +317,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -369,6 +380,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -424,6 +438,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -479,6 +496,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -534,6 +554,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -589,6 +612,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -644,6 +670,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -699,6 +728,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),
@@ -766,6 +798,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -825,6 +860,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -879,6 +917,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -933,6 +974,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -987,6 +1031,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1041,6 +1088,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1095,6 +1145,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   }), PropTypes.shape({
@@ -1149,6 +1202,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: PropTypes.number,
       minStart: PropTypes.number,
       panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool
+      }),
       step: PropTypes.number
     }), PropTypes.bool])
   })]).isRequired),

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -10,7 +10,7 @@ import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
+const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/ChartZoomSlider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+export declare function ChartZoomSlider(): React.JSX.Element;