@mui/x-charts-pro 8.4.0 → 8.5.1

package/PieChartPro/PieChartPro.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PieChartPro = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _internals = require("@mui/x-charts/internals");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
+var React = _interopRequireWildcard(require("react"));
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _PieChart = require("@mui/x-charts/PieChart");
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
+var _PieChartPro2 = require("./PieChartPro.plugins");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function PieChartPro(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiPieChartPro'
+  });
+  const {
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      skipAnimation,
+      hideLegend,
+      children,
+      slots,
+      slotProps,
+      onItemClick,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className,
+      showToolbar
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const margin = (0, _internals.defaultizeMargin)(marginProps, _internals.DEFAULT_PIE_CHART_MARGIN);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, other, {
+    series: series.map(s => (0, _extends2.default)({
+      type: 'pie'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation,
+    plugins: _PieChartPro2.PIE_CHART_PRO_PLUGINS
+  }), ref);
+  const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      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
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PieChart.PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), children]
+      })), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+        trigger: "item"
+      }, slotProps?.tooltip))]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") PieChartPro.displayName = "PieChartPro";
+process.env.NODE_ENV !== "production" ? PieChartPro.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.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
+      exportAsPrint: _propTypes.default.func.isRequired
+    })
+  }),
+  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]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  desc: _propTypes.default.string,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: _propTypes.default.bool,
+  /**
+   * 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,
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * 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,
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * The series to display in the pie chart.
+   * 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.
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
+  title: _propTypes.default.string,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: _propTypes.default.number
+} : void 0;

package/PieChartPro/PieChartPro.plugins.d.ts

@@ -0,0 +1,4 @@
+import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type PieChartProPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export declare const PIE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<PieChartProPluginSignatures>;

package/PieChartPro/PieChartPro.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIE_CHART_PRO_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+const PIE_CHART_PRO_PLUGINS = exports.PIE_CHART_PRO_PLUGINS = [..._internals.PIE_CHART_PLUGINS, _useChartProExport.useChartProExport];

package/PieChartPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./PieChartPro.js";

package/PieChartPro/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PieChartPro = require("./PieChartPro");
+Object.keys(_PieChartPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PieChartPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChartPro[key];
+    }
+  });
+});

package/RadarChartPro/RadarChartPro.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { RadarChartProps, RadarDataProviderProps } from '@mui/x-charts/RadarChart';
+import { RadarChartProPluginsSignatures } from "./RadarChartPro.plugins.js";
+export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {}
+/**
+ * Demos:
+ *
+ * - [Radar Chart](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+ */
+declare const RadarChartPro: React.ForwardRefExoticComponent<RadarChartProProps & React.RefAttributes<SVGSVGElement>>;
+export { RadarChartPro };

package/RadarChartPro/RadarChartPro.js

@@ -0,0 +1,202 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadarChartPro = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RadarChart = require("@mui/x-charts/RadarChart");
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-charts/internals");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _RadarChartPro2 = require("./RadarChartPro.plugins");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
+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 RadarChartPro = exports.RadarChartPro = /*#__PURE__*/React.forwardRef(function RadarChartPro(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiRadarChartPro'
+  });
+  const {
+    chartsWrapperProps,
+    chartsSurfaceProps,
+    radarDataProviderProps,
+    radarGrid,
+    overlayProps,
+    legendProps,
+    highlight,
+    children
+  } = (0, _internals.useRadarChartProps)(props);
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  const radarDataProviderProProps = (0, _extends2.default)({}, radarDataProviderProps, {
+    apiRef: radarDataProviderProps.apiRef,
+    plugins: _RadarChartPro2.RADAR_CHART_PRO_PLUGINS
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.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)(_RadarChart.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.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") RadarChartPro.displayName = "RadarChartPro";
+process.env.NODE_ENV !== "production" ? RadarChartPro.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.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
+      exportAsPrint: _propTypes.default.func.isRequired
+    })
+  }),
+  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 number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions: _propTypes.default.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: _propTypes.default.bool,
+  /**
+   * 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,
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * 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 grid shape.
+   * @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.
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @param {number} index The index of the stripe band.
+   * @returns {string} The color to fill the stripe.
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   */
+  stripeColor: _propTypes.default.func,
+  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;

package/RadarChartPro/RadarChartPro.plugins.d.ts

@@ -0,0 +1,4 @@
+import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature, UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type RadarChartProPluginsSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export declare const RADAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<RadarChartProPluginsSignatures>;

package/RadarChartPro/RadarChartPro.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RADAR_CHART_PRO_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+const RADAR_CHART_PRO_PLUGINS = exports.RADAR_CHART_PRO_PLUGINS = [_internals.useChartPolarAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];

package/RadarChartPro/index.d.ts

@@ -0,0 +1 @@
+export * from "./RadarChartPro.js";

package/RadarChartPro/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _RadarChartPro = require("./RadarChartPro");
+Object.keys(_RadarChartPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RadarChartPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadarChartPro[key];
+    }
+  });
+});

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { ScatterChartProps } from '@mui/x-charts/ScatterChart';
+import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mui/x-charts/ScatterChart';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
 import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
-export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {
+export interface ScatterChartProSlots extends ScatterChartSlots, Partial<ChartsSlotsPro> {}
+export interface ScatterChartProSlotProps extends ScatterChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps'> {
   /**
-   * If true, shows the default chart toolbar.
-   * @default false
+   * Overridable component slots.
+   * @default {}
    */
-  showToolbar?: boolean;
+  slots?: ScatterChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartProSlotProps;
 }
 /**
  * Demos:

package/ScatterChartPro/ScatterChartPro.js

@@ -73,9 +73,10 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
     plugins: _ScatterChartPro2.SCATTER_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.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)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
@@ -96,6 +97,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     current: _propTypes.default.shape({
       exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
+      setAxisZoomData: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
@@ -318,6 +320,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -382,6 +385,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -441,6 +445,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -500,6 +505,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -559,6 +565,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -618,6 +625,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -677,6 +685,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -736,6 +745,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -807,6 +817,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -870,6 +881,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -928,6 +940,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -986,6 +999,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1044,6 +1058,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1102,6 +1117,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1160,6 +1176,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number
@@ -1218,6 +1235,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
       step: _propTypes.default.number