@mui/x-charts 8.3.1 → 8.5.0

package/esm/PieChart/PieArc.js

@@ -97,6 +97,7 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     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/esm/PieChart/PieArcLabel.js

@@ -92,6 +92,7 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     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/esm/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/esm/PieChart/PieChart.js

@@ -2,10 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
+import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
@@ -55,7 +56,8 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      showToolbar
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, defaultMargin);
@@ -77,12 +79,13 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     plugins: PIE_CHART_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, {
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
-      children: [!hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
         direction: props?.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
         slotProps: slotProps
@@ -95,13 +98,14 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
           loading: loading,
           slots: slots,
           slotProps: slotProps
-        }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
-          trigger: "item"
-        }, slotProps?.tooltip)), children]
-      }))]
+        }), children]
+      })), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        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 |
@@ -179,6 +183,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of [[PieSeriesType]] 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.

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
+import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useRadarChartProps } from "./useRadarChartProps.js";
@@ -16,6 +17,15 @@ import { RadarAxisHighlight } from "./RadarAxisHighlight/index.js";
 import { RadarMetricLabels } from "./RadarMetricLabels/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "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 = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -32,15 +42,17 @@ const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, re
     children
   } = useRadarChartProps(props);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
   return /*#__PURE__*/_jsx(RadarDataProvider, _extends({}, radarDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         ref: ref,
-        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
-      }))]
+        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, 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 |
@@ -49,7 +61,6 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.object
   }),
-  children: PropTypes.node,
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
@@ -145,6 +156,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default 'sharp'
    */
   shape: PropTypes.oneOf(['circular', 'sharp']),
+  /**
+   * 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.

package/esm/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/esm/RadarChart/RadarChart.plugins.js

@@ -0,0 +1,4 @@
+import { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const RADAR_PLUGINS = [useChartPolarAxis, useChartInteraction, useChartHighlight];

package/esm/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/esm/RadarChart/RadarDataProvider/RadarDataProvider.js

@@ -2,20 +2,16 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
+import { RADAR_PLUGINS } from "../RadarChart.plugins.js";
 import { ChartDataProvider } from "../../ChartDataProvider/index.js";
 import { defaultizeMargin } from "../../internals/defaultizeMargin.js";
-import { useChartPolarAxis } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { useChartHighlight } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { useChartInteraction } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { radarSeriesConfig } from "../seriesConfig/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RADAR_SERIES_CONFIG = {
   radar: radarSeriesConfig
 };
-const RADAR_PLUGINS = [useChartPolarAxis, useChartInteraction, useChartHighlight];
 const DEFAULT_RADAR_MARGIN = {
   top: 30,
   bottom: 30,
@@ -29,12 +25,11 @@ function RadarDataProvider(props) {
       width,
       height,
       colors,
-      highlightedItem,
-      onHighlightChange,
       skipAnimation,
       margin,
       radar,
-      highlight
+      highlight,
+      plugins
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rotationAxes = React.useMemo(() => [{
@@ -80,117 +75,12 @@ function RadarDataProvider(props) {
     height: height,
     margin: defaultizedMargin,
     colors: colors,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
     skipAnimation: skipAnimation,
-    plugins: RADAR_PLUGINS,
+    plugins: plugins ?? 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.shape({
-    current: PropTypes.object
-  }),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
-   */
-  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
-  desc: PropTypes.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.bool,
-  /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
-   */
-  height: PropTypes.number,
-  /**
-   * Indicates if the chart should highlight items per axis or per series.
-   * @default 'axis'
-   */
-  highlight: PropTypes.oneOf(['axis', 'none', 'series']),
-  /**
-   * The highlighted item.
-   * Used when the highlight is controlled.
-   */
-  highlightedItem: PropTypes.shape({
-    dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.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.string,
-  /**
-   * Localized text for chart components.
-   */
-  localeText: PropTypes.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.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The callback fired when the highlighted item changes.
-   *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-   */
-  onHighlightChange: PropTypes.func,
-  /**
-   * The configuration of the radar scales.
-   */
-  radar: PropTypes.shape({
-    labelFormatter: PropTypes.func,
-    labelGap: PropTypes.number,
-    max: PropTypes.number,
-    metrics: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
-      max: PropTypes.number,
-      min: PropTypes.number,
-      name: PropTypes.string.isRequired
-    }))]).isRequired,
-    startAngle: PropTypes.number
-  }).isRequired,
-  /**
-   * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
-   */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig: PropTypes.object,
-  /**
-   * If `true`, animations are skipped.
-   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
-   */
-  skipAnimation: PropTypes.bool,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  theme: PropTypes.oneOf(['dark', 'light']),
-  title: PropTypes.string,
-  /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
-   */
-  width: PropTypes.number
-} : void 0;
 export { RadarDataProvider };

package/esm/RadarChart/index.d.ts

@@ -1,5 +1,7 @@
 export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
+export { RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
+export { RadarDataProvider } from "./RadarDataProvider/index.js";
 export type { RadarChartProps } from "./RadarChart.js";
 export type { RadarDataProviderProps } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";

package/esm/RadarChart/index.js

@@ -1,5 +1,7 @@
 export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
+export { RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
+export { RadarDataProvider } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";

package/esm/RadarChart/useRadarChartProps.d.ts

@@ -5,6 +5,7 @@ import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/i
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
+import { RadarChartPluginsSignatures } from "./RadarChart.plugins.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -16,7 +17,7 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   highlight: "none" | "series" | "axis";
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsSurfaceProps: ChartsSurfaceProps;
-  radarDataProviderProps: RadarDataProviderProps;
+  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginsSignatures>;
   radarGrid: RadarGridProps;
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;

package/esm/RadarChart/useRadarChartProps.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -11,6 +11,7 @@ const _excluded = ["series", "radar", "width", "height", "margin", "colors", "sx
  */
 export const useRadarChartProps = props => {
   const {
+      apiRef,
       series,
       radar,
       width,
@@ -32,6 +33,7 @@ export const useRadarChartProps = props => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const radarDataProviderProps = {
+    apiRef,
     series,
     radar,
     highlight,

package/esm/ScatterChart/Scatter.js

@@ -54,19 +54,11 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = instance.isPointInside({
-        x,
-        y
-      });
-      const pointCtx = {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex: i
-      };
+      const isInRange = instance.isPointInside(x, y);
       if (isInRange) {
         const currentItem = {
-          seriesId: pointCtx.seriesId,
-          dataIndex: pointCtx.dataIndex
+          seriesId: series.id,
+          dataIndex: i
         };
         const isItemHighlighted = isHighlighted(currentItem);
         temp.push({

package/esm/ScatterChart/ScatterChart.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 { ChartsSlots, ChartsSlotProps } from "../internals/material/index.js";
 import { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from "./ScatterPlot.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
@@ -12,8 +14,8 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
-export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the scatter chart.
@@ -39,6 +41,11 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * If `true`, the legend is not rendered.
    */
   hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}

package/esm/ScatterChart/ScatterChart.js

@@ -16,6 +16,7 @@ import { useChartContainerProps } from "../ChartContainer/useChartContainerProps
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -48,19 +49,21 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-        }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
-          trigger: "item"
-        }, props.slotProps?.tooltip)), children]
-      }))]
+        }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        trigger: "item"
+      }, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") ScatterChart.displayName = "ScatterChart";
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -174,6 +177,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.

package/esm/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
 import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
@@ -55,7 +55,9 @@ export const useScatterChartProps = props => {
     voronoiMaxRadius,
     onItemClick: disableVoronoi ? undefined : onItemClick,
     className,
-    plugins: SCATTER_CHART_PLUGINS
+    plugins: SCATTER_CHART_PLUGINS,
+    slots,
+    slotProps
   });
   const chartsAxisProps = {
     slots,

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -13,7 +13,7 @@ import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors'> {
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.