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

package/ChartContainer/index.js

@@ -25,6 +25,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     xAxis,
     yAxis,
     colors,
+    dataset,
     sx,
     title,
     desc,
@@ -41,9 +42,11 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
       series: series,
       colors: colors,
+      dataset: dataset,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianContextProvider.CartesianContextProvider, {
         xAxis: xAxis,
         yAxis: yAxis,
+        dataset: dataset,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightProvider.HighlightProvider, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {

package/ChartsAxis/ChartsAxis.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
+import { ChartsAxisSlotComponentProps, ChartsAxisSlotsComponent, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 export interface ChartsAxisProps {
     /**
      * Indicate which axis to display the top of the charts.
@@ -25,6 +25,16 @@ export interface ChartsAxisProps {
      * @default null
      */
     rightAxis?: null | string | ChartsYAxisProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: ChartsAxisSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: ChartsAxisSlotComponentProps;
 }
 declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
 declare namespace ChartsAxis {

package/ChartsAxis/ChartsAxis.js

@@ -23,12 +23,23 @@ const getAxisId = propsValue => {
   }
   return propsValue;
 };
+const mergeProps = (axisConfig, slots, slotProps) => {
+  return typeof axisConfig === 'object' ? (0, _extends2.default)({}, axisConfig, {
+    slots: (0, _extends2.default)({}, slots, axisConfig?.slots),
+    slotProps: (0, _extends2.default)({}, slotProps, axisConfig?.slotProps)
+  }) : {
+    slots,
+    slotProps
+  };
+};
 function ChartsAxis(props) {
   const {
     topAxis,
     leftAxis,
     rightAxis,
-    bottomAxis
+    bottomAxis,
+    slots,
+    slotProps
   } = props;
   const {
     xAxis,
@@ -56,20 +67,24 @@ function ChartsAxis(props) {
   if (bottomId !== null && !xAxis[bottomId]) {
     throw Error(`MUI: id used for bottom axis "${bottomId}" is not defined`);
   }
+  const topAxisProps = mergeProps(topAxis, slots, slotProps);
+  const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
+  const leftAxisProps = mergeProps(leftAxis, slots, slotProps);
+  const rightAxisProps = mergeProps(rightAxis, slots, slotProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [topId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({
+    children: [topId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({}, topAxisProps, {
       position: "top",
       axisId: topId
-    }, typeof topAxis === 'object' ? topAxis : {})), bottomId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({
+    })), bottomId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({}, bottomAxisProps, {
       position: "bottom",
       axisId: bottomId
-    }, typeof bottomAxis === 'object' ? bottomAxis : {})), leftId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({
+    })), leftId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({}, leftAxisProps, {
       position: "left",
       axisId: leftId
-    }, typeof leftAxis === 'object' ? leftAxis : {})), rightId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({
+    })), rightId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({}, rightAxisProps, {
       position: "right",
       axisId: rightId
-    }, typeof rightAxis === 'object' ? rightAxis : {}))]
+    }))]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
@@ -91,8 +106,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
   /**
@@ -109,8 +129,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
   /**
@@ -127,10 +152,25 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -145,8 +185,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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])
 } : void 0;

package/ChartsLegend/ChartsLegend.d.ts

@@ -2,9 +2,16 @@ import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { DrawingArea } from '../context/DrawingProvider';
 import { AnchorPosition, SizingParams } from './utils';
+import { FormattedSeries } from '../context/SeriesContextProvider';
 import { ChartsLegendClasses } from './chartsLegendClasses';
 import { DefaultizedProps } from '../models/helpers';
-import { ChartSeriesDefaultized } from '../models/seriesType/config';
+import { ChartSeriesDefaultized, LegendParams } from '../models/seriesType/config';
+export interface ChartsLegendSlotsComponent {
+    legend?: React.JSXElementConstructor<LegendRendererProps>;
+}
+export interface ChartsLegendSlotComponentProps {
+    legend?: Partial<LegendRendererProps>;
+}
 export type ChartsLegendProps = {
     position?: AnchorPosition;
     offset?: Partial<{
@@ -19,6 +26,16 @@ export type ChartsLegendProps = {
      * Set to true to hide the legend.
      */
     hidden?: boolean;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: ChartsLegendSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: ChartsLegendSlotComponentProps;
 } & SizingParams;
 type DefaultizedChartsLegendProps = DefaultizedProps<ChartsLegendProps, 'direction' | 'position'>;
 type SeriesLegendOwnerState = ChartSeriesDefaultized<any> & Pick<DefaultizedChartsLegendProps, 'direction'> & {
@@ -44,5 +61,11 @@ export declare const ChartsLegendMark: import("@emotion/styled").StyledComponent
     };
 }, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;
 export declare const ChartsLegendLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
-export declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element | null;
+export interface LegendRendererProps extends Omit<DefaultizedChartsLegendProps, 'slots' | 'slotProps'> {
+    series: FormattedSeries;
+    seriesToDisplay: LegendParams[];
+    drawingArea: DrawingArea;
+    classes: Record<'label' | 'mark' | 'series' | 'root', string>;
+}
+export declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
 export {};

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

@@ -32,7 +32,7 @@ function DefaultChartsAxisContent(props) {
     variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
-      children: [axisValue != null && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             colSpan: 3,

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 {