@mui/x-charts 8.3.1 → 8.5.0

package/ChartsYAxis/ChartsYAxis.js

@@ -35,10 +35,11 @@ const _excluded = ["scale", "tickNumber"];
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    position
+    position,
+    id
   } = ownerState;
   const slots = {
-    root: ['root', 'directionY', position],
+    root: ['root', 'directionY', position, `id-${id}`],
     line: ['line'],
     tickContainer: ['tickContainer'],
     tick: ['tick'],
@@ -243,12 +244,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = instance.isPointInside({
-        x: -1,
-        y: tickOffset
-      }, {
-        direction: 'y'
-      });
+      const showLabel = instance.isYInside(tickOffset);
       const tickLabel = tickLabels.get(item);
       if (!showLabel) {
         return null;

package/Gauge/Gauge.js

@@ -55,6 +55,7 @@ const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props
     }), children]
   }));
 });
+if (process.env.NODE_ENV !== "production") Gauge.displayName = "Gauge";
 process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/Gauge/GaugeContainer.js

@@ -85,6 +85,7 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
     })
   });
 });
+if (process.env.NODE_ENV !== "production") GaugeContainer.displayName = "GaugeContainer";
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/Gauge/GaugeProvider.js

@@ -29,9 +29,7 @@ const GaugeContext = exports.GaugeContext = /*#__PURE__*/React.createContext({
   maxRadius: 0,
   valueAngle: null
 });
-if (process.env.NODE_ENV !== 'production') {
-  GaugeContext.displayName = 'GaugeContext';
-}
+if (process.env.NODE_ENV !== "production") GaugeContext.displayName = "GaugeContext";
 function GaugeProvider(props) {
   const {
     value = null,

package/LineChart/AnimatedLine.js

@@ -47,6 +47,7 @@ const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(functi
     }, other, animateProps))
   });
 });
+if (process.env.NODE_ENV !== "production") AnimatedLine.displayName = "AnimatedLine";
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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,19 +65,21 @@ 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", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.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]
-      }))]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") LineChart.displayName = "LineChart";
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -195,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/LineHighlightPlot.js

@@ -91,10 +91,7 @@ function LineHighlightPlot(props) {
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
 
-        if (!instance.isPointInside({
-          x,
-          y
-        })) {
+        if (!instance.isPointInside(x, y)) {
           return null;
         }
         const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);

package/LineChart/MarkPlot.js

@@ -129,10 +129,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!instance.isPointInside({
-              x,
-              y
-            })) {
+            if (!instance.isPointInside(x, y)) {
               // Remove out of range
               return 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/PieArc.js

@@ -106,6 +106,7 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     strokeLinejoin: "round"
   }, other, interactionProps, animatedProps));
 });
+if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";
 process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/PieChart/PieArcLabel.js

@@ -101,6 +101,7 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     children: formattedArcLabel
   }));
 });
+if (process.env.NODE_ENV !== "production") PieArcLabel.displayName = "PieArcLabel";
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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");
@@ -20,10 +21,10 @@ var _ChartsSurface = require("../ChartsSurface");
 var _ChartDataProvider = require("../ChartDataProvider");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
-var _PieChart = require("./PieChart.plugins");
+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);
@@ -81,15 +83,16 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     onHighlightChange,
     className,
     skipAnimation,
-    plugins: _PieChart.PIE_CHART_PLUGINS
+    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
@@ -102,13 +105,14 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
           loading: loading,
           slots: slots,
           slotProps: slotProps
-        }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
-          trigger: "item"
-        }, slotProps?.tooltip)), children]
-      }))]
+        }), children]
+      })), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+        trigger: "item"
+      }, slotProps?.tooltip))]
     })
   }));
 });
+if (process.env.NODE_ENV !== "production") PieChart.displayName = "PieChart";
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -186,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 };

package/RadarChart/RadarChart.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 _ChartsLegend = require("../ChartsLegend");
 var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _useRadarChartProps = require("./useRadarChartProps");
@@ -23,6 +24,15 @@ var _RadarAxisHighlight = require("./RadarAxisHighlight");
 var _RadarMetricLabels = require("./RadarMetricLabels");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Demos:
+ *
+ * - [Radar Chart](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+ */
 const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -39,15 +49,17 @@ const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function R
     children
   } = (0, _useRadarChartProps.useRadarChartProps)(props);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarDataProvider.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProps, {
     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, {
         ref: ref,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), children]
-      }))]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
+      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") RadarChart.displayName = "RadarChart";
 process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -56,7 +68,6 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.object
   }),
-  children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
@@ -152,6 +163,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default 'sharp'
    */
   shape: _propTypes.default.oneOf(['circular', 'sharp']),
+  /**
+   * 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.plugins.d.ts

@@ -0,0 +1,5 @@
+import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
+export type RadarChartPluginsSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];

package/RadarChart/RadarChart.plugins.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RADAR_PLUGINS = void 0;
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartPolarAxis.useChartPolarAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];

package/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
-import { ChartContainerProps } from "../../ChartContainer/index.js";
+import { RadarChartPluginsSignatures } from "../RadarChart.plugins.js";
 import { RadarSeriesType } from "../../models/seriesType/radar.js";
-import { UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { UseChartHighlightSignature } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartInteractionSignature } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { ChartDataProviderProps } from "../../ChartDataProvider/index.js";
 import { RadarConfig } from "./radar.types.js";
-type RadarPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
-export interface RadarDataProviderProps extends Omit<ChartContainerProps<'radar', RadarPluginSignatures>, 'series' | 'plugins' | 'rotationAxis' | 'radiusAxis' | 'dataset'> {
+import { ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeriesType]] objects.
@@ -22,9 +20,6 @@ export interface RadarDataProviderProps extends Omit<ChartContainerProps<'radar'
    * @default 'axis'
    */
   highlight?: 'axis' | 'series' | 'none';
-}
-declare function RadarDataProvider(props: RadarDataProviderProps): React.JSX.Element;
-declare namespace RadarDataProvider {
-  var propTypes: any;
-}
+};
+declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
 export { RadarDataProvider };

package/RadarChart/RadarDataProvider/RadarDataProvider.js

@@ -10,19 +10,15 @@ exports.RadarDataProvider = RadarDataProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RadarChart = require("../RadarChart.plugins");
 var _ChartDataProvider = require("../../ChartDataProvider");
 var _defaultizeMargin = require("../../internals/defaultizeMargin");
-var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
-var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
 var _seriesConfig = require("../seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["series", "children", "width", "height", "colors", "highlightedItem", "onHighlightChange", "className", "skipAnimation", "margin", "radar", "highlight"];
+const _excluded = ["series", "children", "width", "height", "colors", "skipAnimation", "margin", "radar", "highlight", "plugins"];
 const RADAR_SERIES_CONFIG = {
   radar: _seriesConfig.radarSeriesConfig
 };
-const RADAR_PLUGINS = [_useChartPolarAxis.useChartPolarAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
 const DEFAULT_RADAR_MARGIN = {
   top: 30,
   bottom: 30,
@@ -36,12 +32,11 @@ function RadarDataProvider(props) {
       width,
       height,
       colors,
-      highlightedItem,
-      onHighlightChange,
       skipAnimation,
       margin,
       radar,
-      highlight
+      highlight,
+      plugins
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rotationAxes = React.useMemo(() => [{
@@ -87,116 +82,11 @@ function RadarDataProvider(props) {
     height: height,
     margin: defaultizedMargin,
     colors: colors,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
     skipAnimation: skipAnimation,
-    plugins: RADAR_PLUGINS,
+    plugins: plugins ?? _RadarChart.RADAR_PLUGINS,
     rotationAxis: rotationAxes,
     radiusAxis: radiusAxis,
     seriesConfig: RADAR_SERIES_CONFIG,
     children: children
   }));
-}
-process.env.NODE_ENV !== "production" ? RadarDataProvider.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  apiRef: _propTypes.default.shape({
-    current: _propTypes.default.object
-  }),
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  /**
-   * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
-   */
-  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
-  desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
-  /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
-   */
-  height: _propTypes.default.number,
-  /**
-   * Indicates if the chart should highlight items per axis or per series.
-   * @default 'axis'
-   */
-  highlight: _propTypes.default.oneOf(['axis', 'none', 'series']),
-  /**
-   * The highlighted item.
-   * Used when the highlight is controlled.
-   */
-  highlightedItem: _propTypes.default.shape({
-    dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
-  }),
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: _propTypes.default.string,
-  /**
-   * Localized text for chart components.
-   */
-  localeText: _propTypes.default.object,
-  /**
-   * The margin between the SVG and the drawing area.
-   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   *
-   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   */
-  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number,
-    top: _propTypes.default.number
-  })]),
-  /**
-   * The callback fired when the highlighted item changes.
-   *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-   */
-  onHighlightChange: _propTypes.default.func,
-  /**
-   * The configuration of the radar scales.
-   */
-  radar: _propTypes.default.shape({
-    labelFormatter: _propTypes.default.func,
-    labelGap: _propTypes.default.number,
-    max: _propTypes.default.number,
-    metrics: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({
-      max: _propTypes.default.number,
-      min: _propTypes.default.number,
-      name: _propTypes.default.string.isRequired
-    }))]).isRequired,
-    startAngle: _propTypes.default.number
-  }).isRequired,
-  /**
-   * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
-   */
-  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig: _propTypes.default.object,
-  /**
-   * If `true`, animations are skipped.
-   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
-   */
-  skipAnimation: _propTypes.default.bool,
-  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,
-  /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
-   */
-  width: _propTypes.default.number
-} : void 0;
+}