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

package/hooks/useTicks.d.ts

@@ -1,11 +1,26 @@
 import { D3Scale } from '../models/axis';
-export type TickParams = {
-    maxTicks?: number;
-    minTicks?: number;
-    tickSpacing?: number;
-};
+export interface TickParams {
+    /**
+     * 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?: 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?: number;
+    /**
+     * The number of ticks. This number is not guaranted.
+     * Not supported by categorical axis (band, points).
+     */
+    tickNumber?: number;
+}
 export declare function getTicksNumber(params: TickParams & {
     range: any[];
+    domain: any[];
 }): number;
 declare function useTicks(options: {
     scale: D3Scale;

package/hooks/useTicks.js

@@ -11,13 +11,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 getTicksNumber(params) {
   const {
-    maxTicks = 999,
-    minTicks = 2,
-    tickSpacing = 50,
-    range
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
   } = params;
-  const estimatedTickNumber = Math.floor(Math.abs(range[1] - range[0]) / tickSpacing);
-  return Math.min(maxTicks, Math.max(minTicks, estimatedTickNumber));
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function useTicks(options) {
   const {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.6
+ * @mui/x-charts v6.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/AxisSharedComponents.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
-export declare const Line: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
-export declare const Tick: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
-export declare const TickLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;
-export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const ChartsLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
+export declare const ChartsTick: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
+export declare const ChartsTickLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const ChartsLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;

package/internals/components/AxisSharedComponents.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TickLabel = exports.Tick = exports.Line = exports.Label = exports.AxisRoot = void 0;
+exports.ChartsTickLabel = exports.ChartsTick = exports.ChartsLine = exports.ChartsLabel = exports.AxisRoot = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _axisClasses = require("../../ChartsAxis/axisClasses");
@@ -15,40 +15,40 @@ const AxisRoot = (0, _styles.styled)('g', {
 })({
   [`&.${_axisClasses.axisClasses.directionY}`]: {
     [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'middle'
+      dominantBaseline: 'middle'
     },
     [`.${_axisClasses.axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'auto',
       textAnchor: 'middle'
     }
   },
   [`&.${_axisClasses.axisClasses.left}`]: {
     [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'end'
     }
   },
   [`&.${_axisClasses.axisClasses.right}`]: {
     [`.${_axisClasses.axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'start'
     }
   },
   [`&.${_axisClasses.axisClasses.bottom}`]: {
     [`.${_axisClasses.axisClasses.tickLabel}, .${_axisClasses.axisClasses.label}`]: {
-      alignmentBaseline: 'hanging',
+      dominantBaseline: 'hanging',
       textAnchor: 'middle'
     }
   },
   [`&.${_axisClasses.axisClasses.top}`]: {
     [`.${_axisClasses.axisClasses.tickLabel}, .${_axisClasses.axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'baseline',
       textAnchor: 'middle'
     }
   }
 });
 exports.AxisRoot = AxisRoot;
-const Line = (0, _styles.styled)('line', {
+const ChartsLine = (0, _styles.styled)('line', {
   name: 'MuiChartsAxis',
   slot: 'Line',
   overridesResolver: (props, styles) => styles.line
@@ -59,8 +59,8 @@ const Line = (0, _styles.styled)('line', {
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
-exports.Line = Line;
-const Tick = (0, _styles.styled)('line', {
+exports.ChartsLine = ChartsLine;
+const ChartsTick = (0, _styles.styled)('line', {
   name: 'MuiChartsAxis',
   slot: 'Tick',
   overridesResolver: (props, styles) => styles.tick
@@ -70,8 +70,8 @@ const Tick = (0, _styles.styled)('line', {
   stroke: theme.palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
-exports.Tick = Tick;
-const TickLabel = (0, _styles.styled)('text', {
+exports.ChartsTick = ChartsTick;
+const ChartsTickLabel = (0, _styles.styled)('text', {
   name: 'MuiChartsAxis',
   slot: 'TickLabel',
   overridesResolver: (props, styles) => styles.tickLabel
@@ -80,8 +80,8 @@ const TickLabel = (0, _styles.styled)('text', {
 }) => (0, _extends2.default)({}, theme.typography.caption, {
   fill: theme.palette.text.primary
 }));
-exports.TickLabel = TickLabel;
-const Label = (0, _styles.styled)('text', {
+exports.ChartsTickLabel = ChartsTickLabel;
+const ChartsLabel = (0, _styles.styled)('text', {
   name: 'MuiChartsAxis',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
@@ -90,4 +90,4 @@ const Label = (0, _styles.styled)('text', {
 }) => (0, _extends2.default)({}, theme.typography.body1, {
   fill: theme.palette.text.primary
 }));
-exports.Label = Label;
+exports.ChartsLabel = ChartsLabel;

package/legacy/BarChart/BarChart.js

@@ -30,7 +30,9 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis = props.leftAxis,
     rightAxis = props.rightAxis,
     bottomAxis = props.bottomAxis,
-    children = props.children;
+    children = props.children,
+    slots = props.slots,
+    slotProps = props.slotProps;
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -62,15 +64,26 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [/*#__PURE__*/_jsx("g", {
       clipPath: "url(#".concat(clipPathId, ")"),
-      children: /*#__PURE__*/_jsx(BarPlot, {})
+      children: /*#__PURE__*/_jsx(BarPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
       x: "band"
-    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -98,8 +111,13 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -126,8 +144,13 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -144,6 +167,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -166,8 +191,13 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -188,6 +218,16 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -210,8 +250,13 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -234,15 +279,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -258,15 +305,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/legacy/BarChart/BarElement.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope"];
+var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
 import * as React from 'react';
 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 { color as d3Color } from 'd3-color';
@@ -22,7 +23,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-var BarElementPath = styled('rect', {
+export var BarElementPath = styled('rect', {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
@@ -39,11 +40,14 @@ var BarElementPath = styled('rect', {
   };
 });
 export function BarElement(props) {
+  var _slots$bar;
   var id = props.id,
     dataIndex = props.dataIndex,
     innerClasses = props.classes,
     color = props.color,
     highlightScope = props.highlightScope,
+    slots = props.slots,
+    slotProps = props.slotProps,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -67,12 +71,18 @@ export function BarElement(props) {
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(BarElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'bar',
-    seriesId: id,
-    dataIndex: dataIndex
-  })));
+  var Bar = (_slots$bar = slots == null ? void 0 : slots.bar) != null ? _slots$bar : BarElementPath;
+  var barProps = useSlotProps({
+    elementType: Bar,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.bar,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'bar',
+      seriesId: id,
+      dataIndex: dataIndex
+    }), {
+      className: classes.root
+    }),
+    ownerState: ownerState
+  });
+  return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
 }

package/legacy/BarChart/BarPlot.js

@@ -1,5 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
@@ -32,7 +34,7 @@ function getBandSize(_ref) {
     offset: offset
   };
 }
-export function BarPlot() {
+function BarPlot(props) {
   var seriesData = React.useContext(SeriesContext).bar;
   var axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -82,7 +84,7 @@ export function BarPlot() {
           var _xAxis$xAxisKey$data;
           var baseline = Math.min.apply(Math, _toConsumableArray(values));
           var value = Math.max.apply(Math, _toConsumableArray(values));
-          return /*#__PURE__*/_jsx(BarElement, {
+          return /*#__PURE__*/_jsx(BarElement, _extends({
             id: seriesId,
             dataIndex: dataIndex,
             x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * (barWidth + offset),
@@ -91,9 +93,26 @@ export function BarPlot() {
             width: barWidth,
             color: color,
             highlightScope: series[seriesId].highlightScope
-          }, "".concat(seriesId, "-").concat(dataIndex));
+          }, props), "".concat(seriesId, "-").concat(dataIndex));
         });
       });
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? BarPlot.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 { BarPlot };

package/legacy/ChartsAxis/ChartsAxis.js

@@ -16,11 +16,22 @@ var getAxisId = function getAxisId(propsValue) {
   }
   return propsValue;
 };
+var mergeProps = function mergeProps(axisConfig, slots, slotProps) {
+  return _typeof(axisConfig) === 'object' ? _extends({}, axisConfig, {
+    slots: _extends({}, slots, axisConfig == null ? void 0 : axisConfig.slots),
+    slotProps: _extends({}, slotProps, axisConfig == null ? void 0 : axisConfig.slotProps)
+  }) : {
+    slots: slots,
+    slotProps: slotProps
+  };
+};
 function ChartsAxis(props) {
   var topAxis = props.topAxis,
     leftAxis = props.leftAxis,
     rightAxis = props.rightAxis,
-    bottomAxis = props.bottomAxis;
+    bottomAxis = props.bottomAxis,
+    slots = props.slots,
+    slotProps = props.slotProps;
   var _React$useContext = React.useContext(CartesianContext),
     xAxis = _React$useContext.xAxis,
     xAxisIds = _React$useContext.xAxisIds,
@@ -46,20 +57,24 @@ function ChartsAxis(props) {
   if (bottomId !== null && !xAxis[bottomId]) {
     throw Error("MUI: id used for bottom axis \"".concat(bottomId, "\" is not defined"));
   }
+  var topAxisProps = mergeProps(topAxis, slots, slotProps);
+  var bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
+  var leftAxisProps = mergeProps(leftAxis, slots, slotProps);
+  var rightAxisProps = mergeProps(rightAxis, slots, slotProps);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [topId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({
+    children: [topId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, topAxisProps, {
       position: "top",
       axisId: topId
-    }, _typeof(topAxis) === 'object' ? topAxis : {})), bottomId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({
+    })), bottomId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, bottomAxisProps, {
       position: "bottom",
       axisId: bottomId
-    }, _typeof(bottomAxis) === 'object' ? bottomAxis : {})), leftId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({
+    })), leftId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, leftAxisProps, {
       position: "left",
       axisId: leftId
-    }, _typeof(leftAxis) === 'object' ? leftAxis : {})), rightId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({
+    })), rightId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, rightAxisProps, {
       position: "right",
       axisId: rightId
-    }, _typeof(rightAxis) === 'object' ? rightAxis : {}))]
+    }))]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
@@ -81,8 +96,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
   /**
@@ -99,8 +119,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
   /**
@@ -117,10 +142,25 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -135,8 +175,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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])
 } : void 0;

package/legacy/ChartsLegend/ChartsLegend.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { DrawingContext } from '../context/DrawingProvider';
@@ -123,7 +124,7 @@ export var ChartsLegendLabel = styled('text', {
     color: 'inherit',
     transform: "translate(\n      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),\n      calc(0.5 * var(--ChartsLegend-itemMarkSize))\n      )",
     fill: theme.palette.text.primary,
-    alignmentBaseline: 'central'
+    dominantBaseline: 'central'
   });
 });
 var defaultProps = {
@@ -136,25 +137,18 @@ var defaultProps = {
   itemWidth: 100,
   spacing: 2
 };
-export function ChartsLegend(inProps) {
-  var props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsLegend'
-  });
-  var position = props.position,
+function DefaultChartsLegend(props) {
+  var hidden = props.hidden,
+    position = props.position,
     direction = props.direction,
     offset = props.offset,
-    hidden = props.hidden;
-  var theme = useTheme();
-  var classes = useUtilityClasses(_extends({}, props, {
-    theme: theme
-  }));
-  var drawingArea = React.useContext(DrawingContext);
-  var series = React.useContext(SeriesContext);
+    series = props.series,
+    seriesToDisplay = props.seriesToDisplay,
+    drawingArea = props.drawingArea,
+    classes = props.classes;
   if (hidden) {
     return null;
   }
-  var seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {
       direction: direction,
@@ -187,4 +181,41 @@ export function ChartsLegend(inProps) {
       }, id);
     })
   });
+}
+export function ChartsLegend(inProps) {
+  var _slots$legend;
+  var props = useThemeProps({
+    props: _extends({}, defaultProps, inProps),
+    name: 'MuiChartsLegend'
+  });
+  var position = props.position,
+    direction = props.direction,
+    offset = props.offset,
+    hidden = props.hidden,
+    slots = props.slots,
+    slotProps = props.slotProps;
+  var theme = useTheme();
+  var classes = useUtilityClasses(_extends({}, props, {
+    theme: theme
+  }));
+  var drawingArea = React.useContext(DrawingContext);
+  var series = React.useContext(SeriesContext);
+  var seriesToDisplay = getSeriesToDisplay(series);
+  var ChartLegendRender = (_slots$legend = slots == null ? void 0 : slots.legend) != null ? _slots$legend : DefaultChartsLegend;
+  var chartLegendRenderProps = useSlotProps({
+    elementType: ChartLegendRender,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.legend,
+    additionalProps: {
+      position: position,
+      direction: direction,
+      offset: offset,
+      classes: classes,
+      drawingArea: drawingArea,
+      series: series,
+      hidden: hidden,
+      seriesToDisplay: seriesToDisplay
+    },
+    ownerState: {}
+  });
+  return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
 }