@mui/x-charts 8.4.0 → 8.5.1

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 { DEFAULT_PIE_CHART_MARGIN } from "../internals/constants.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
@@ -17,13 +18,6 @@ import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
 import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultMargin = {
-  top: 5,
-  bottom: 5,
-  left: 5,
-  right: 5
-};
-
 /**
  * Demos:
  *
@@ -55,10 +49,11 @@ 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);
+  const margin = defaultizeMargin(marginProps, DEFAULT_PIE_CHART_MARGIN);
   const {
     chartDataProviderProps,
     chartsSurfaceProps
@@ -77,12 +72,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;
   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 && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
         direction: props?.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
         slotProps: slotProps
@@ -180,6 +176,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

@@ -16,6 +16,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,9 +41,10 @@ const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, re
     children
   } = useRadarChartProps(props);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar;
   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 && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.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)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
@@ -50,7 +60,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.
@@ -146,6 +155,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/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

@@ -48,9 +48,10 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar;
   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 && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.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))
@@ -175,6 +176,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.

package/esm/Toolbar/Toolbar.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-export interface ToolbarProps extends React.PropsWithChildren {}
-export declare function Toolbar({
-  children
-}: ToolbarProps): React.JSX.Element;
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export interface ToolbarProps extends React.ComponentProps<'div'> {
+  className?: string;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
+}
+export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/esm/Toolbar/Toolbar.js

@@ -1,5 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "render"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { ToolbarContextProvider } from '@mui/x-internals/ToolbarContext';
+import { chartsToolbarClasses } from "./chartToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ToolbarRoot = styled('div', {
   name: 'MuiChartsToolbar',
@@ -18,10 +26,32 @@ const ToolbarRoot = styled('div', {
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: 4
 }));
-export function Toolbar({
-  children
-}) {
-  return /*#__PURE__*/_jsx(ToolbarRoot, {
-    children: children
+export const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(_ref, ref) {
+  let {
+      className,
+      render
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const element = useComponentRenderer(ToolbarRoot, render, _extends({
+    role: 'toolbar',
+    'aria-orientation': 'horizontal',
+    className: clsx(chartsToolbarClasses.root, className)
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(ToolbarContextProvider, {
+    children: element
   });
-}
+});
+if (process.env.NODE_ENV !== "production") Toolbar.displayName = "Toolbar";
+process.env.NODE_ENV !== "production" ? Toolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;

package/esm/Toolbar/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface ChartsToolbarProps {}
+export interface ChartsToolbarSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProps>;
+}
+export interface ChartsToolbarSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProps>;
+}

package/esm/Toolbar/Toolbar.types.js

@@ -0,0 +1 @@
+export {};

package/esm/Toolbar/ToolbarButton.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { ChartBaseIconButtonProps } from "../models/slots/chartsBaseSlotProps.js";
-export interface ToolbarButtonProps extends ChartBaseIconButtonProps {}
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { ChartsSlotProps } from "../internals/material/index.js";
+export type ToolbarButtonProps = ChartsSlotProps['baseIconButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+};
 declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { ToolbarButton };