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

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -9,7 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { Line, Tick, TickLabel, Label, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -60,7 +60,9 @@ function ChartsXAxis(inProps) {
     label,
     labelFontSize,
     tickSize: tickSizeProp,
-    valueFormatter
+    valueFormatter,
+    slots,
+    slotProps
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -83,14 +85,18 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
+  const Line = slots?.axisLine ?? ChartsLine;
+  const Tick = slots?.axisTick ?? ChartsTick;
+  const TickLabel = slots?.axisTickLabel ?? ChartsTickLabel;
+  const Label = slots?.axisLabel ?? ChartsLabel;
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, {
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }), xTicks.map(({
+    }, slotProps?.axisLine)), xTicks.map(({
       formattedValue,
       offset,
       labelOffset
@@ -100,26 +106,28 @@ function ChartsXAxis(inProps) {
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, {
+        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, {
+        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
           sx: {
             fontSize: tickFontSize
           },
-          className: classes.tickLabel,
+          className: classes.tickLabel
+        }, slotProps?.axisTickLabel, {
           children: formattedValue
-        })]
+        }))]
       }, index);
     }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
       sx: {
         fontSize: labelFontSize,
         transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps?.axisLabel, {
       children: label
     }))]
   });
@@ -165,6 +173,16 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * Position of the axis.
    */
   position: PropTypes.oneOf(['bottom', 'top']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -175,6 +193,23 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 12
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep: PropTypes.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: PropTypes.number,
   /**
    * The size of the ticks.
    * @default 6

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -8,7 +8,7 @@ import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
-import { Line, Tick, TickLabel, Label, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -60,7 +60,9 @@ function ChartsYAxis(inProps) {
     label,
     labelFontSize,
     tickSize: tickSizeProp,
-    valueFormatter
+    valueFormatter,
+    slots,
+    slotProps
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -83,14 +85,18 @@ function ChartsYAxis(inProps) {
     x: positionSigne * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
+  const Line = slots?.axisLine ?? ChartsLine;
+  const Tick = slots?.axisTick ?? ChartsTick;
+  const TickLabel = slots?.axisTickLabel ?? ChartsTickLabel;
+  const Label = slots?.axisLabel ?? ChartsLabel;
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, {
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       className: classes.line
-    }), yTicks.map(({
+    }, slotProps?.axisLine)), yTicks.map(({
       formattedValue,
       offset,
       labelOffset
@@ -100,19 +106,20 @@ function ChartsYAxis(inProps) {
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(0, ${offset})`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, {
+        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           x2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, {
+        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
           sx: {
             fontSize: tickFontSize
           },
-          className: classes.tickLabel,
+          className: classes.tickLabel
+        }, slotProps?.axisTickLabel, {
           children: formattedValue.toLocaleString()
-        })]
+        }))]
       }, index);
     }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
       sx: {
@@ -120,7 +127,8 @@ function ChartsYAxis(inProps) {
         transform: `rotate(${positionSigne * 90}deg)`,
         transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps?.axisLabel, {
       children: label
     }))]
   });
@@ -166,6 +174,16 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * Position of the axis.
    */
   position: PropTypes.oneOf(['left', 'right']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -176,6 +194,23 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * @default 12
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep: PropTypes.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: PropTypes.number,
   /**
    * The size of the ticks.
    * @default 6

package/modern/LineChart/AreaElement.js

@@ -1,9 +1,10 @@
 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 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, getAreaElementUtilityClass, classes);
 };
-const AreaElementPath = styled('path', {
+export const AreaElementPath = styled('path', {
   name: 'MuiAreaElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -59,7 +60,9 @@ function AreaElement(props) {
       id,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -82,13 +85,19 @@ function AreaElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id
-  })));
+  const Area = slots?.area ?? AreaElementPath;
+  const areaProps = useSlotProps({
+    elementType: Area,
+    externalSlotProps: slotProps?.area,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'line',
+      seriesId: id
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(Area, _extends({}, areaProps));
 }
 process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -99,6 +108,16 @@ process.env.NODE_ENV !== "production" ? AreaElement.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 { AreaElement };

package/modern/LineChart/AreaPlot.js

@@ -1,4 +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 { area as d3Area } from 'd3-shape';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
@@ -6,7 +10,12 @@ import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function AreaPlot() {
+function AreaPlot(props) {
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -24,7 +33,7 @@ export function AreaPlot() {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -50,9 +59,28 @@ export function AreaPlot() {
           id: seriesId,
           d: areaPath.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" ? AreaPlot.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 { AreaPlot };

package/modern/LineChart/LineChart.js

@@ -23,6 +23,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     height,
     margin,
     colors,
+    dataset,
     sx,
     tooltip,
     axisHighlight = {
@@ -33,7 +34,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -49,22 +52,37 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'point',
       data: Array.from({
-        length: Math.max(...series.map(s => s.data.length))
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
       }, (_, index) => index)
     }],
     yAxis: yAxis,
     colors: colors,
+    dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [/*#__PURE__*/_jsxs("g", {
       clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/_jsx(AreaPlot, {}), /*#__PURE__*/_jsx(LinePlot, {})]
+      children: [/*#__PURE__*/_jsx(AreaPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsx(LinePlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(MarkPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(MarkPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -92,8 +110,13 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -102,6 +125,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
@@ -119,8 +143,13 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -137,6 +166,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -159,15 +190,21 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
     area: PropTypes.bool,
     color: PropTypes.string,
     curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
-    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    data: PropTypes.arrayOf(PropTypes.number),
+    dataKey: PropTypes.string,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -182,6 +219,16 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -204,8 +251,13 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -219,44 +271,52 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisId: PropTypes.string,
     classes: PropTypes.object,
     data: PropTypes.array,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), 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({
     axisId: PropTypes.string,
     classes: PropTypes.object,
     data: PropTypes.array,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), 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/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 };