@mui/x-charts 6.0.0-alpha.5 → 6.0.0-alpha.7

package/LineChart/MarkElement.js

@@ -50,7 +50,7 @@ const MarkElementPath = (0, _styles.styled)('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: (theme.vars || theme).palette.background.paper,
+  fill: theme.palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2,
   '&.MuiMarkElement-highlighted': {

package/LineChart/MarkPlot.d.ts

@@ -1,2 +1,25 @@
 import * as React from 'react';
-export declare function MarkPlot(): React.JSX.Element | null;
+import { MarkElementProps } from './MarkElement';
+export interface MarkPlotSlotsComponent {
+    mark?: React.JSXElementConstructor<MarkElementProps>;
+}
+export interface MarkPlotSlotComponentProps {
+    mark?: Partial<MarkElementProps>;
+}
+export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement> {
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: MarkPlotSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MarkPlotSlotComponentProps;
+}
+declare function MarkPlot(props: MarkPlotProps): React.JSX.Element | null;
+declare namespace MarkPlot {
+    var propTypes: any;
+}
+export { MarkPlot };

package/LineChart/MarkPlot.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkPlot = MarkPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
@@ -12,9 +15,14 @@ var _useScale = require("../hooks/useScale");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function MarkPlot() {
+function MarkPlot(props) {
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
   }
@@ -30,7 +38,7 @@ function MarkPlot() {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, props, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -71,7 +79,7 @@ function MarkPlot() {
           x,
           y,
           index
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkElement.MarkElement, {
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
           id: seriesId,
           dataIndex: index,
           shape: "circle",
@@ -79,8 +87,24 @@ function MarkPlot() {
           x: x,
           y: y,
           highlightScope: series[seriesId].highlightScope
-        }, `${seriesId}-${index}`));
+        }, slotProps?.mark), `${seriesId}-${index}`));
       });
     })
-  });
-}
+  }));
+}
+process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/LineChart/formatter.js

@@ -10,7 +10,7 @@ var _d3Shape = require("d3-shape");
 var _stackSeries = require("../internals/stackSeries");
 var _defaultizeValueFormatter = _interopRequireDefault(require("../internals/defaultizeValueFormatter"));
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
-const formatter = params => {
+const formatter = (params, dataset) => {
   const {
     seriesOrder,
     series
@@ -18,17 +18,22 @@ const formatter = params => {
   const stackingGroups = (0, _stackSeries.getStackingGroups)(params);
 
   // Create a data set with format adapted to d3
-  const d3Dataset = [];
+  const d3Dataset = dataset ?? [];
   seriesOrder.forEach(id => {
-    series[id].data.forEach((value, index) => {
-      if (d3Dataset.length <= index) {
-        d3Dataset.push({
-          [id]: value
-        });
-      } else {
-        d3Dataset[index][id] = value;
-      }
-    });
+    const data = series[id].data;
+    if (data !== undefined) {
+      data.forEach((value, index) => {
+        if (d3Dataset.length <= index) {
+          d3Dataset.push({
+            [id]: value
+          });
+        } else {
+          d3Dataset[index][id] = value;
+        }
+      });
+    } else if (dataset === undefined) {
+      throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+    }
   });
   const completedSeries = {};
   stackingGroups.forEach(stackingGroup => {
@@ -38,9 +43,15 @@ const formatter = params => {
       stackingOrder,
       stackingOffset
     } = stackingGroup;
-    const stackedSeries = (0, _d3Shape.stack)().keys(ids).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    const stackedSeries = (0, _d3Shape.stack)().keys(ids.map(id => {
+      // Use dataKey if needed and available
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
+      const dataKey = series[id].dataKey;
       completedSeries[id] = (0, _extends2.default)({}, series[id], {
+        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/PieChart/PieArcLabel.js

@@ -47,7 +47,6 @@ const PieArcLabelRoot = (0, _styles.styled)('text', {
   theme
 }) => ({
   fill: theme.palette.text.primary,
-  alignmentBaseline: 'baseline',
   textAnchor: 'middle'
 }));
 function PieArcLabel(props) {

package/PieChart/PieChart.d.ts

@@ -4,14 +4,26 @@ import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { PieSeriesType } from '../models/seriesType';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps } from '../ChartsTooltip';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
+import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+export interface PieChartSlotsComponent extends ChartsAxisSlotsComponent, PiePlotSlotsComponent, ChartsLegendSlotsComponent {
+}
+export interface PieChartSlotComponentProps extends ChartsAxisSlotComponentProps, PiePlotSlotComponentProps, ChartsLegendSlotComponentProps {
+}
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
+    slots?: PieChartSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: PieChartSlotComponentProps;
 }
 declare function PieChart(props: PieChartProps): React.JSX.Element;
 declare namespace PieChart {

package/PieChart/PieChart.js

@@ -52,7 +52,9 @@ function PieChart(props) {
     leftAxis = null,
     rightAxis = null,
     bottomAxis = null,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
@@ -75,8 +77,16 @@ function PieChart(props) {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
   });
 }
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -102,8 +112,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   children: _propTypes.default.node,
@@ -112,6 +127,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
   disableAxisListener: _propTypes.default.bool,
   height: _propTypes.default.number,
@@ -129,8 +145,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   legend: _propTypes.default.shape({
@@ -147,6 +168,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     spacing: _propTypes.default.number
   }),
   margin: _propTypes.default.shape({
@@ -169,8 +192,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -212,6 +240,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     type: _propTypes.default.oneOf(['pie']),
     valueFormatter: _propTypes.default.func
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  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]),
   title: _propTypes.default.string,
   tooltip: _propTypes.default.shape({
@@ -234,8 +268,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
@@ -249,44 +288,52 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
-    maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
-    minTicks: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
-    maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
-    minTicks: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }))
 } : void 0;

package/PieChart/PiePlot.d.ts

@@ -1,2 +1,28 @@
 import * as React from 'react';
-export declare function PiePlot(): React.JSX.Element | null;
+import { PieArcProps } from './PieArc';
+import { PieArcLabelProps } from './PieArcLabel';
+export interface PiePlotSlotsComponent {
+    pieArc?: React.JSXElementConstructor<PieArcProps>;
+    pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+}
+export interface PiePlotSlotComponentProps {
+    pieArc?: Partial<PieArcProps>;
+    pieArcLabel?: Partial<PieArcLabelProps>;
+}
+export interface PiePlotProps {
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: PiePlotSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: PiePlotSlotComponentProps;
+}
+declare function PiePlot(props: PiePlotProps): React.JSX.Element | null;
+declare namespace PiePlot {
+    var propTypes: any;
+}
+export { PiePlot };

package/PieChart/PiePlot.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PiePlot = PiePlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _PieArc = _interopRequireDefault(require("./PieArc"));
 var _PieArcLabel = _interopRequireDefault(require("./PieArcLabel"));
@@ -28,7 +29,11 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   }
   return arcLabel(item);
 }
-function PiePlot() {
+function PiePlot(props) {
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).pie;
   const {
     left,
@@ -48,6 +53,8 @@ function PiePlot() {
     series,
     seriesOrder
   } = seriesData;
+  const Arc = slots?.pieArc ?? _PieArc.default;
+  const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: seriesOrder.map(seriesId => {
       const {
@@ -66,7 +73,7 @@ function PiePlot() {
         transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
           children: [data.map((item, index) => {
-            return /*#__PURE__*/(0, React.createElement)(_PieArc.default, (0, _extends2.default)({}, item, {
+            return /*#__PURE__*/(0, React.createElement)(Arc, (0, _extends2.default)({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius ?? availableRadius,
@@ -77,9 +84,9 @@ function PiePlot() {
               highlightScope: series[seriesId].highlightScope,
               highlighted: highlighted,
               faded: faded
-            }));
+            }, slotProps?.pieArc));
           }), data.map((item, index) => {
-            return /*#__PURE__*/(0, React.createElement)(_PieArcLabel.default, (0, _extends2.default)({}, item, {
+            return /*#__PURE__*/(0, React.createElement)(ArcLabel, (0, _extends2.default)({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius ?? availableRadius,
@@ -89,10 +96,26 @@ function PiePlot() {
               dataIndex: index,
               highlightScope: series[seriesId].highlightScope,
               formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-            }));
+            }, slotProps?.pieArcLabel));
           })]
         })
       }, seriesId);
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/ScatterChart/ScatterChart.d.ts

@@ -1,16 +1,32 @@
 import * as React from 'react';
+import { ScatterPlotSlotComponentProps, ScatterPlotSlotsComponent } from './ScatterPlot';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ScatterSeriesType } from '../models/seriesType/scatter';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps } from '../ChartsTooltip';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
+import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+export interface ScatterChartSlotsComponent extends ChartsAxisSlotsComponent, ScatterPlotSlotsComponent, ChartsLegendSlotsComponent {
+}
+export interface ScatterChartSlotComponentProps extends ChartsAxisSlotComponentProps, ScatterPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+}
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: ScatterChartSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: ScatterChartSlotComponentProps;
 }
 declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<unknown>>;
 export { ScatterChart };