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

package/ChartsLegend/ChartsLegend.js

@@ -8,10 +8,11 @@ exports.ChartsLegend = ChartsLegend;
 exports.ChartsSeriesLegendGroup = exports.ChartsLegendRoot = exports.ChartsLegendMark = exports.ChartsLegendLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _DrawingProvider = require("../context/DrawingProvider");
-var _utils2 = require("./utils");
+var _utils3 = require("./utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,7 +29,7 @@ const useUtilityClasses = ownerState => {
     label: ['label'],
     series: ['series']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _chartsLegendClasses.getChartsLegendUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _chartsLegendClasses.getChartsLegendUtilityClass, classes);
 };
 function getTranslePosition({
   position,
@@ -138,7 +139,7 @@ const ChartsLegendLabel = (0, _styles.styled)('text', {
       calc(0.5 * var(--ChartsLegend-itemMarkSize))
       )`,
   fill: theme.palette.text.primary,
-  alignmentBaseline: 'central'
+  dominantBaseline: 'central'
 }));
 exports.ChartsLegendLabel = ChartsLegendLabel;
 const defaultProps = {
@@ -151,27 +152,20 @@ const defaultProps = {
   itemWidth: 100,
   spacing: 2
 };
-function ChartsLegend(inProps) {
-  const props = (0, _styles.useThemeProps)({
-    props: (0, _extends2.default)({}, defaultProps, inProps),
-    name: 'MuiChartsLegend'
-  });
+function DefaultChartsLegend(props) {
   const {
+    hidden,
     position,
     direction,
     offset,
-    hidden
+    series,
+    seriesToDisplay,
+    drawingArea,
+    classes
   } = props;
-  const theme = (0, _styles.useTheme)();
-  const classes = useUtilityClasses((0, _extends2.default)({}, props, {
-    theme
-  }));
-  const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
-  const series = React.useContext(_SeriesContextProvider.SeriesContext);
   if (hidden) {
     return null;
   }
-  const seriesToDisplay = (0, _utils2.getSeriesToDisplay)(series);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
     ownerState: {
       direction,
@@ -203,4 +197,42 @@ function ChartsLegend(inProps) {
       })]
     }, id))
   });
+}
+function ChartsLegend(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, defaultProps, inProps),
+    name: 'MuiChartsLegend'
+  });
+  const {
+    position,
+    direction,
+    offset,
+    hidden,
+    slots,
+    slotProps
+  } = props;
+  const theme = (0, _styles.useTheme)();
+  const classes = useUtilityClasses((0, _extends2.default)({}, props, {
+    theme
+  }));
+  const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
+  const series = React.useContext(_SeriesContextProvider.SeriesContext);
+  const seriesToDisplay = (0, _utils3.getSeriesToDisplay)(series);
+  const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
+  const chartLegendRenderProps = (0, _utils.useSlotProps)({
+    elementType: ChartLegendRender,
+    externalSlotProps: slotProps?.legend,
+    additionalProps: {
+      position,
+      direction,
+      offset,
+      classes,
+      drawingArea,
+      series,
+      hidden,
+      seriesToDisplay
+    },
+    ownerState: {}
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartLegendRender, (0, _extends2.default)({}, chartLegendRenderProps));
 }

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -80,29 +80,33 @@ function ChartsAxisTooltipContent(props) {
     sx,
     classes
   } = props;
-  const dataIndex = axisData.x && axisData.x.index;
-  const axisValue = axisData.x && axisData.x.value;
+  const isXaxis = (axisData.x && axisData.x.index) !== undefined;
+  const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
+  const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
   const {
     xAxisIds,
-    xAxis
+    xAxis,
+    yAxisIds,
+    yAxis
   } = React.useContext(_CartesianContextProvider.CartesianContext);
   const series = React.useContext(_SeriesContextProvider.SeriesContext);
-  const USED_X_AXIS_ID = xAxisIds[0];
+  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   const relevantSeries = React.useMemo(() => {
     const rep = [];
     Object.keys(series).filter(seriesType => ['bar', 'line', 'scatter'].includes(seriesType)).forEach(seriesType => {
       series[seriesType].seriesOrder.forEach(seriesId => {
-        const axisKey = series[seriesType].series[seriesId].xAxisKey;
-        if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {
+        const item = series[seriesType].series[seriesId];
+        const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
+        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           rep.push(series[seriesType].series[seriesId]);
         }
       });
     });
     return rep;
-  }, [USED_X_AXIS_ID, series]);
+  }, [USED_AXIS_ID, isXaxis, series]);
   const relevantAxis = React.useMemo(() => {
-    return xAxis[USED_X_AXIS_ID];
-  }, [USED_X_AXIS_ID, xAxis]);
+    return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? DefaultChartsAxisContent;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
     axisData: axisData,

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -1,14 +1,7 @@
 /// <reference types="react" />
-export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<Pick<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material/Paper").PaperClasses> | undefined;
-    elevation?: number | undefined;
-    square?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: import("@mui/types").OverridableStringUnion<"elevation" | "outlined", import("@mui/material/Paper").PaperPropsVariantOverrides> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Paper").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "square" | "elevation" | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant">, "hidden" | "color" | "content" | "translate" | "square" | "slot" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "elevation" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "style" | "square" | "className" | "elevation" | "children" | "sx" | "classes" | "variant">, "hidden" | "color" | "content" | "style" | "translate" | "square" | "slot" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "elevation" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "classes" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ChartsTooltipTable: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import("react").ClassAttributes<HTMLTableElement> | keyof import("react").TableHTMLAttributes<HTMLTableElement>>, {}>;
 export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>>, {}>;
 export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;

package/ChartsXAxis/ChartsXAxis.js

@@ -68,7 +68,9 @@ function ChartsXAxis(inProps) {
     label,
     labelFontSize,
     tickSize: tickSizeProp,
-    valueFormatter
+    valueFormatter,
+    slots,
+    slotProps
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -91,14 +93,18 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
+  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
+  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
+  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
+  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.Line, {
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }), xTicks.map(({
+    }, slotProps?.axisLine)), xTicks.map(({
       formattedValue,
       offset,
       labelOffset
@@ -108,26 +114,28 @@ function ChartsXAxis(inProps) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.Tick, {
+        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           y2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.TickLabel, {
+        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           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__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.Label, (0, _extends2.default)({}, labelRefPoint, {
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
       sx: {
         fontSize: labelFontSize,
         transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps?.axisLabel, {
       children: label
     }))]
   });
@@ -173,6 +181,16 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * Position of the axis.
    */
   position: _propTypes.default.oneOf(['bottom', 'top']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -183,6 +201,23 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 12
    */
   tickFontSize: _propTypes.default.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.default.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.default.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: _propTypes.default.number,
   /**
    * The size of the ticks.
    * @default 6

package/ChartsYAxis/ChartsYAxis.js

@@ -68,7 +68,9 @@ function ChartsYAxis(inProps) {
     label,
     labelFontSize,
     tickSize: tickSizeProp,
-    valueFormatter
+    valueFormatter,
+    slots,
+    slotProps
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -91,14 +93,18 @@ function ChartsYAxis(inProps) {
     x: positionSigne * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
+  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
+  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
+  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
+  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.Line, {
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       className: classes.line
-    }), yTicks.map(({
+    }, slotProps?.axisLine)), yTicks.map(({
       formattedValue,
       offset,
       labelOffset
@@ -108,27 +114,29 @@ function ChartsYAxis(inProps) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(0, ${offset})`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.Tick, {
+        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           x2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.TickLabel, {
+        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           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__*/(0, _jsxRuntime.jsx)(_AxisSharedComponents.Label, (0, _extends2.default)({}, labelRefPoint, {
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
       sx: {
         fontSize: labelFontSize,
         transform: `rotate(${positionSigne * 90}deg)`,
         transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps?.axisLabel, {
       children: label
     }))]
   });
@@ -174,6 +182,16 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * Position of the axis.
    */
   position: _propTypes.default.oneOf(['left', 'right']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -184,6 +202,23 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * @default 12
    */
   tickFontSize: _propTypes.default.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.default.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.default.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: _propTypes.default.number,
   /**
    * The size of the ticks.
    * @default 6

package/LineChart/AreaElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentProps } from '@mui/base';
 import { HighlightScope } from '../context/HighlightProvider';
 export interface AreaElementClasses {
     /** Styles applied to the root element. */
@@ -18,8 +19,29 @@ export interface AreaElementOwnerState {
 }
 export declare function getAreaElementUtilityClass(slot: string): string;
 export declare const areaElementClasses: AreaElementClasses;
+export declare const AreaElementPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: AreaElementOwnerState;
+}, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 export type AreaElementProps = Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & {
     highlightScope?: Partial<HighlightScope>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: {
+        area?: SlotComponentProps<'path', {}, AreaElementOwnerState>;
+    };
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: {
+        /**
+         * The component that renders the root.
+         * @default AreaElementPath
+         */
+        area?: React.ElementType;
+    };
 };
 declare function AreaElement(props: AreaElementProps): React.JSX.Element;
 declare namespace AreaElement {

package/LineChart/AreaElement.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AreaElement = AreaElement;
-exports.areaElementClasses = void 0;
+exports.areaElementClasses = exports.AreaElementPath = void 0;
 exports.getAreaElementUtilityClass = getAreaElementUtilityClass;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _utils = require("@mui/base/utils");
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
@@ -19,7 +20,7 @@ var _d3Color = require("d3-color");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "highlightScope"];
+const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
 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 getAreaElementUtilityClass(slot) {
@@ -51,6 +52,7 @@ const AreaElementPath = (0, _styles.styled)('path', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
+exports.AreaElementPath = AreaElementPath;
 AreaElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -71,7 +73,9 @@ function AreaElement(props) {
       id,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -94,13 +98,19 @@ function AreaElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaElementPath, (0, _extends2.default)({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id
-  })));
+  const Area = slots?.area ?? AreaElementPath;
+  const areaProps = (0, _utils.useSlotProps)({
+    elementType: Area,
+    externalSlotProps: slotProps?.area,
+    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+      type: 'line',
+      seriesId: id
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, areaProps));
 }
 process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -111,5 +121,15 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   highlightScope: _propTypes.default.shape({
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  })
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
 } : void 0;

package/LineChart/AreaPlot.d.ts

@@ -1,2 +1,15 @@
 import * as React from 'react';
-export declare function AreaPlot(props: React.SVGAttributes<SVGSVGElement>): React.JSX.Element | null;
+import { AreaElementProps } from './AreaElement';
+export interface AreaPlotSlotsComponent {
+    area?: React.JSXElementConstructor<AreaElementProps>;
+}
+export interface AreaPlotSlotComponentProps {
+    area?: Partial<AreaElementProps>;
+}
+export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps'> {
+}
+declare function AreaPlot(props: AreaPlotProps): React.JSX.Element | null;
+declare namespace AreaPlot {
+    var propTypes: any;
+}
+export { AreaPlot };

package/LineChart/AreaPlot.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AreaPlot = AreaPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
@@ -14,9 +16,15 @@ var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps"];
 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 AreaPlot(props) {
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
@@ -34,7 +42,7 @@ function AreaPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -60,9 +68,27 @@ function AreaPlot(props) {
           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.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;