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

package/modern/LineChart/LineElement.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "highlightScope"];
+const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { color as d3Color } from 'd3-color';
 import composeClasses from '@mui/utils/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
@@ -27,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getLineElementUtilityClass, classes);
 };
-const LineElementPath = styled('path', {
+export const LineElementPath = styled('path', {
   name: 'MuiLineElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -61,7 +62,9 @@ function LineElement(props) {
       id,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -84,13 +87,19 @@ function LineElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id
-  })));
+  const Line = slots?.line ?? LineElementPath;
+  const lineProps = useSlotProps({
+    elementType: Line,
+    externalSlotProps: slotProps?.line,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'line',
+      seriesId: id
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(Line, _extends({}, lineProps));
 }
 process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -101,6 +110,16 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   highlightScope: PropTypes.shape({
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  })
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
 } : void 0;
 export { LineElement };

package/modern/LineChart/LinePlot.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
@@ -7,7 +10,12 @@ import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function LinePlot(props) {
+function LinePlot(props) {
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -25,7 +33,7 @@ export function LinePlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", _extends({}, props, {
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -42,18 +50,42 @@ export function LinePlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
         }
         const linePath = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData.length !== stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
+          }
+        }
         const curve = getCurveFactory(series[seriesId].curve);
         const d3Data = xData?.map((x, index) => ({
           x,
-          y: stackedData[index]
+          y: stackedData[index] ?? [0, 0]
         }));
         return /*#__PURE__*/_jsx(LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,
           color: series[seriesId].color,
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          slots: slots,
+          slotProps: slotProps
         }, seriesId);
       });
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? LinePlot.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.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { LinePlot };

package/modern/LineChart/MarkPlot.js

@@ -1,13 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function MarkPlot(props) {
+function MarkPlot(props) {
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
+  const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
   }
@@ -64,7 +70,7 @@ export function MarkPlot(props) {
           x,
           y,
           index
-        }) => /*#__PURE__*/_jsx(MarkElement, {
+        }) => /*#__PURE__*/_jsx(Mark, _extends({
           id: seriesId,
           dataIndex: index,
           shape: "circle",
@@ -72,8 +78,25 @@ export function MarkPlot(props) {
           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.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { MarkPlot };

package/modern/PieChart/PieArcLabel.js

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

package/modern/PieChart/PieChart.js

@@ -44,7 +44,9 @@ function PieChart(props) {
     leftAxis = null,
     rightAxis = null,
     bottomAxis = null,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -67,8 +69,16 @@ function PieChart(props) {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(PiePlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(PiePlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
   });
 }
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -94,8 +104,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -122,8 +137,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   legend: PropTypes.shape({
@@ -140,6 +160,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     spacing: PropTypes.number
   }),
   margin: PropTypes.shape({
@@ -162,8 +184,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   series: PropTypes.arrayOf(PropTypes.shape({
@@ -205,6 +232,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     type: PropTypes.oneOf(['pie']),
     valueFormatter: PropTypes.func
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -227,8 +260,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -251,15 +289,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -275,15 +315,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/modern/PieChart/PiePlot.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import PieArc from './PieArc';
 import PieArcLabel from './PieArcLabel';
@@ -21,7 +22,11 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   }
   return arcLabel(item);
 }
-export function PiePlot() {
+function PiePlot(props) {
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(SeriesContext).pie;
   const {
     left,
@@ -41,6 +46,8 @@ export function PiePlot() {
     series,
     seriesOrder
   } = seriesData;
+  const Arc = slots?.pieArc ?? PieArc;
+  const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
   return /*#__PURE__*/_jsx("g", {
     children: seriesOrder.map(seriesId => {
       const {
@@ -59,7 +66,7 @@ export function PiePlot() {
         transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
         children: /*#__PURE__*/_jsxs("g", {
           children: [data.map((item, index) => {
-            return /*#__PURE__*/_createElement(PieArc, _extends({}, item, {
+            return /*#__PURE__*/_createElement(Arc, _extends({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius ?? availableRadius,
@@ -70,9 +77,9 @@ export function PiePlot() {
               highlightScope: series[seriesId].highlightScope,
               highlighted: highlighted,
               faded: faded
-            }));
+            }, slotProps?.pieArc));
           }), data.map((item, index) => {
-            return /*#__PURE__*/_createElement(PieArcLabel, _extends({}, item, {
+            return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius ?? availableRadius,
@@ -82,10 +89,27 @@ export 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.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { PiePlot };

package/modern/ScatterChart/ScatterChart.js

@@ -26,7 +26,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
@@ -44,8 +46,16 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(ScatterPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ScatterPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
       x: "none",
       y: "none"
     }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({
@@ -76,8 +86,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -104,8 +119,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   legend: PropTypes.shape({
@@ -122,6 +142,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     spacing: PropTypes.number
   }),
   margin: PropTypes.shape({
@@ -144,8 +166,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   series: PropTypes.arrayOf(PropTypes.shape({
@@ -167,6 +194,16 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     xAxisKey: PropTypes.string,
     yAxisKey: PropTypes.string
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -189,8 +226,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -213,15 +255,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -237,15 +281,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/modern/ScatterChart/ScatterPlot.js

@@ -1,9 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Scatter } from './Scatter';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ScatterPlot() {
+function ScatterPlot(props) {
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(SeriesContext).scatter;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -21,6 +27,7 @@ export function ScatterPlot() {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const ScatterItems = slots?.scatter ?? Scatter;
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesOrder.map(seriesId => {
       const {
@@ -32,13 +39,30 @@ export function ScatterPlot() {
       } = series[seriesId];
       const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
-      return /*#__PURE__*/_jsx(Scatter, {
+      return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,
         color: color,
         markerSize: markerSize ?? 4,
         series: series[seriesId]
-      }, id);
+      }, slotProps?.scatter), id);
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? ScatterPlot.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.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { ScatterPlot };