@mui/x-charts 8.4.0 → 8.5.0

package/BarChart/BarChart.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
 import { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from "./BarPlot.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
@@ -11,8 +13,8 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
-export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the bar chart.
@@ -50,6 +52,11 @@ export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartP
    * @default 'vertical'
    */
   layout?: BarSeriesType['layout'];
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
 }
 /**
  * Demos:

package/BarChart/BarChart.js

@@ -24,6 +24,7 @@ var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
+var _ChartsToolbar = require("../Toolbar/internals/ChartsToolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -59,9 +60,10 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.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: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : 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)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__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)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -196,6 +198,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[BarSeriesType]] 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.

package/BarChart/useBarChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _BarChart = require("./BarChart.plugins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar"];
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/CHANGELOG.md

@@ -5,6 +5,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.0
+
+_May 29, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add support for exporting `RadarChartPro`, `FunnelChart` and `Heatmap` as image and PDF.
+- 📊 `RadarChart` is now stable.
+
+Special thanks go out to the community members for their valuable contributions:
+@xBlizZer, @sai6855, @alisasanib.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.0`
+
+- [DataGrid] Avoid ResizeObserver loop error (#17984) @cherniavskii
+- [DataGrid] Fix column management `toggleColumn` event type (#18023) @KenanYusuf
+- [DataGrid] Remove unnecessary `any` type (#17979) @sai6855
+
+#### `@mui/x-data-grid-pro@8.5.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@8.5.0`, plus:
+
+- [DataGridPro] Allow multi sorting without modifier key (#17925) @cherniavskii
+- [DataGridPro] Row reordering icon improvements (#17947) @KenanYusuf
+- [DataGridPro] Fix pinned columns order in column management (#17950) @alisasanib
+
+#### `@mui/x-data-grid-premium@8.5.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-data-grid-pro@8.5.0`, plus:
+
+- [DataGridPremium] Export `GridApiPremium` type (#18037) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.5.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@8.5.0`, plus:
+
+- [DateRangePicker] Allow to override the format in the field (#17972) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.5.0`
+
+- [charts] Add `render` prop to charts toolbar components (#17649) @bernardobelchior
+- [charts] Add configurable slots to toolbar (#17712) @bernardobelchior
+- [charts] Export `useFunnelSeries` and `useRadarSeries` (#18034) @JCQuintas
+- [charts] Expose `ChartApi` through context (#18004) @bernardobelchior
+- [charts] Mark Radar chart as stable (#17946) @alexfauquette
+- [charts] Only update store if interaction item is different (#17851) @bernardobelchior
+- [charts] Reuse shared date utils (#18014) @JCQuintas
+- [charts] Use Map for string cache instead of object (#17982) @bernardobelchior
+- [charts] Fix Population pyramid demo (#17987) @oliviertassinari
+
+#### `@mui/x-charts-pro@8.5.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@8.5.0`, plus:
+
+- [charts-pro] Add range selection to zoom slider (#17949) @bernardobelchior
+- [charts-pro] Allow configuring zoom slider tooltip (#18030) @bernardobelchior
+- [charts-pro] Allow exporting a funnel chart (#17957) @bernardobelchior
+- [charts-pro] Allow exporting a heatmap chart (#17916) @bernardobelchior
+- [charts-pro] Allow exporting a radar chart (#17968) @bernardobelchior
+- [charts-pro] Always show both zoom slider tooltips (#18027) @bernardobelchior
+- [charts-pro] Show zoom slider tooltip when selecting range (#18028) @bernardobelchior
+- [charts-pro] Split `ChartAxisZoomSlider` into smaller files (#18011) @bernardobelchior
+- [charts-pro] Update zoom slider range selection cursor (#17977) @bernardobelchior
+- [charts-pro] Add support for Heatmap legend (#17943) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.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@8.5.0`.
+
+### Docs
+
+- [docs] Fix derived column pivoting demo crash (#17944) @arminmeh
+- [docs] Fix light/dark mode blink on pickers overview (#18002) @alexfauquette
+- [docs] Fix scatter shape demo causing horizontal overflow (#17974) @bernardobelchior
+
+### Core
+
+- [code-infra] Add bundle size monitor (#17754) @Janpot
+- [code-infra] Enable `babel-plugin-display-name` in vitest (#17903) @JCQuintas
+- [infra] Remove last deprecated `ponyfillGlobal` usage (#18003) @LukasTy
+- [infra] Use `babel-plugin-display-name` from npm (#18040) @LukasTy
+- [x-telemetry] Remove deprecated `ponyfillGlobal` (#17986) @xBlizZer
+
 ## 8.4.0
 
 _May 21, 2025_

package/ChartContainer/ChartContainer.d.ts

@@ -1,11 +1,30 @@
 import * as React from 'react';
+import { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
+import { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
+import { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import { ChartPublicAPI } from "../internals/plugins/models/index.js";
 export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
-export type ChartApi = NonNullable<NonNullable<ChartContainerProps['apiRef']>['current']>;
+type PluginsPerSeriesType = {
+  line: LineChartPluginsSignatures;
+  scatter: ScatterChartPluginsSignatures;
+  bar: BarChartPluginsSignatures;
+  pie: PieChartPluginSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartApi<'composition'>
+ */
+export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/ChartContainer/ChartContainer.js

@@ -14,6 +14,14 @@ var _ChartDataProvider = require("../ChartDataProvider");
 var _useChartContainerProps = require("./useChartContainerProps");
 var _ChartsSurface = require("../ChartsSurface");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartApi<'composition'>
+ */
+
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *
@@ -593,6 +601,14 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: _propTypes.default.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,

package/ChartContainer/useChartContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps"];
 const useChartContainerProps = (props, ref) => {
   const _ref = props,
     {
@@ -38,7 +38,9 @@ const useChartContainerProps = (props, ref) => {
       skipAnimation,
       seriesConfig,
       plugins,
-      localeText
+      localeText,
+      slots,
+      slotProps
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const chartsSurfaceProps = (0, _extends2.default)({
@@ -69,7 +71,9 @@ const useChartContainerProps = (props, ref) => {
     height,
     localeText,
     seriesConfig,
-    plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS
+    plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS,
+    slots,
+    slotProps
   };
   return {
     chartDataProviderProps,

package/ChartDataProvider/ChartDataProvider.d.ts

@@ -1,10 +1,20 @@
 import * as React from 'react';
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
 import { ChartProviderProps } from "../context/ChartProvider/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>> & ChartsLocalizationProviderProps;
+export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>> & ChartsLocalizationProviderProps & {
+  /**
+   * Slots to customize charts' components.
+   */
+  slots?: Partial<ChartsSlots>;
+  /**
+   * The props for the slots.
+   */
+  slotProps?: Partial<ChartsSlotProps>;
+};
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/ChartDataProvider/ChartDataProvider.js

@@ -10,6 +10,8 @@ exports.ChartDataProvider = ChartDataProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("../internals/material");
+var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
 var _useChartDataProviderProps = require("./useChartDataProviderProps");
 var _ChartProvider = require("../context/ChartProvider");
 var _ChartsLocalizationProvider = require("../ChartsLocalizationProvider");
@@ -45,12 +47,19 @@ function ChartDataProvider(props) {
   const {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   } = (0, _useChartDataProviderProps.useChartDataProviderProps)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, (0, _extends2.default)({}, chartProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLocalizationProvider.ChartsLocalizationProvider, {
       localeText: localeText,
-      children: children
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSlotsContext.ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: _material.defaultSlotsMaterial,
+        children: children
+      })
     })
   }));
 }
@@ -107,6 +116,14 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: _propTypes.default.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: _propTypes.default.object,
   theme: _propTypes.default.oneOf(['dark', 'light']),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -8,4 +8,6 @@ export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
   chartProviderProps: ChartProviderProps<TSeries, TSignatures>;
+  slots: Partial<import("../internals/index.js").ChartsSlots> | undefined;
+  slotProps: Partial<import("../internals/index.js").ChartsSlotProps> | undefined;
 };

package/ChartDataProvider/useChartDataProviderProps.js

@@ -10,13 +10,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styles = require("@mui/material/styles");
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["children", "localeText", "plugins", "seriesConfig"];
+const _excluded = ["children", "localeText", "plugins", "seriesConfig", "slots", "slotProps"];
 const useChartDataProviderProps = props => {
   const {
       children,
       localeText,
       plugins = _allPlugins.DEFAULT_PLUGINS,
-      seriesConfig
+      seriesConfig,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
@@ -30,7 +32,9 @@ const useChartDataProviderProps = props => {
   return {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   };
 };
 exports.useChartDataProviderProps = useChartDataProviderProps;

package/LineChart/LineChart.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsSlots, ChartsSlotProps } from "../internals/material/index.js";
 import { AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from "./AreaPlot.js";
 import { LinePlotProps, LinePlotSlotProps, LinePlotSlots } from "./LinePlot.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
@@ -14,8 +15,9 @@ import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "./LineHighli
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
 import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
-export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
+export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
@@ -67,6 +69,11 @@ export interface LineChartProps extends Omit<ChartContainerProps<'line', LineCha
    * @default false
    */
   skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
 }
 /**
  * Demos:

package/LineChart/LineChart.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _ChartsToolbar = require("../Toolbar/internals/ChartsToolbar");
 var _AreaPlot = require("./AreaPlot");
 var _LinePlot = require("./LinePlot");
 var _MarkPlot = require("./MarkPlot");
@@ -64,9 +65,10 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.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: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : 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)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.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", {
@@ -196,6 +198,11 @@ process.env.NODE_ENV !== "production" ? LineChart.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

package/LineChart/useLineChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _LineChart = require("./LineChart.plugins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.

package/PieChart/PieChart.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { PieSeriesType } from "../models/seriesType/index.js";
 import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
@@ -8,9 +10,9 @@ import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from "./PiePlot.js";
 import { PieValueType } from "../models/seriesType/pie.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
 import { PieChartPluginSignatures } from "./PieChart.plugins.js";
-export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
-export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeriesType]] objects.
@@ -24,6 +26,11 @@ export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartP
    * Callback fired when a pie arc is clicked.
    */
   onItemClick?: PiePlotProps['onItemClick'];
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}

package/PieChart/PieChart.js

@@ -12,6 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _ChartsToolbar = require("../Toolbar/internals/ChartsToolbar");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _PiePlot = require("./PiePlot");
@@ -23,7 +24,7 @@ var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _PieChart2 = require("./PieChart.plugins");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
 const defaultMargin = {
   top: 5,
   bottom: 5,
@@ -62,7 +63,8 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      showToolbar
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _defaultizeMargin.defaultizeMargin)(marginProps, defaultMargin);
@@ -84,12 +86,13 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     plugins: _PieChart2.PIE_CHART_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
-      children: [!hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
         direction: props?.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
         slotProps: slotProps
@@ -187,6 +190,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of [[PieSeriesType]] 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.

package/RadarChart/RadarChart.d.ts

@@ -1,17 +1,26 @@
 import * as React from 'react';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
+import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
 import { ChartsTooltipSlotProps, ChartsTooltipSlots } from "../ChartsTooltip/index.js";
-export interface RadarChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsLegendSlots {}
-export interface RadarChartSlotProps extends ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsLegendSlotProps {}
-export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
+export interface RadarChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsLegendSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface RadarChartSlotProps extends ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ChartsWrapperProps, 'sx'>, Omit<ChartsSurfaceProps, 'sx'> {
   /**
    * If `true`, the legend is not rendered.
    */
   hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}
@@ -23,5 +32,14 @@ export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridP
    */
   slotProps?: RadarChartSlotProps;
 }
+/**
+ * Demos:
+ *
+ * - [Radar Chart](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+ */
 declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<SVGSVGElement>>;
 export { RadarChart };