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

package/legacy/context/CartesianContextProvider.js

@@ -147,7 +147,8 @@ function CartesianContextProvider(_ref) {
       var scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       var extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
       var ticksNumber = getTicksNumber(_extends({}, axis, {
-        range: range
+        range: range,
+        domain: extremums
       }));
       var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       var niceDomain = niceScale.domain();
@@ -202,7 +203,8 @@ function CartesianContextProvider(_ref) {
       var scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
       var extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
       var ticksNumber = getTicksNumber(_extends({}, axis, {
-        range: range
+        range: range,
+        domain: extremums
       }));
       var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       var niceDomain = niceScale.domain();
@@ -253,15 +255,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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({
@@ -277,15 +281,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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/hooks/useTicks.js

@@ -2,15 +2,15 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
-  var _params$maxTicks = params.maxTicks,
-    maxTicks = _params$maxTicks === void 0 ? 999 : _params$maxTicks,
-    _params$minTicks = params.minTicks,
-    minTicks = _params$minTicks === void 0 ? 2 : _params$minTicks,
-    _params$tickSpacing = params.tickSpacing,
-    tickSpacing = _params$tickSpacing === void 0 ? 50 : _params$tickSpacing,
-    range = params.range;
-  var estimatedTickNumber = Math.floor(Math.abs(range[1] - range[0]) / tickSpacing);
-  return Math.min(maxTicks, Math.max(minTicks, estimatedTickNumber));
+  var tickMaxStep = params.tickMaxStep,
+    tickMinStep = params.tickMinStep,
+    tickNumber = params.tickNumber,
+    range = params.range,
+    domain = params.domain;
+  var maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  var minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  var defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function useTicks(options) {
   var scale = options.scale,

package/legacy/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/legacy/internals/components/AxisSharedComponents.js

@@ -10,24 +10,24 @@ export var AxisRoot = styled('g', {
     return styles.root;
   }
 })((_styled = {}, _defineProperty(_styled, "&.".concat(axisClasses.directionY), (_$concat = {}, _defineProperty(_$concat, ".".concat(axisClasses.tickLabel), {
-  alignmentBaseline: 'middle'
+  dominantBaseline: 'middle'
 }), _defineProperty(_$concat, ".".concat(axisClasses.label), {
-  alignmentBaseline: 'baseline',
+  dominantBaseline: 'auto',
   textAnchor: 'middle'
 }), _$concat)), _defineProperty(_styled, "&.".concat(axisClasses.left), _defineProperty({}, ".".concat(axisClasses.tickLabel), {
-  alignmentBaseline: 'central',
+  dominantBaseline: 'central',
   textAnchor: 'end'
 })), _defineProperty(_styled, "&.".concat(axisClasses.right), _defineProperty({}, ".".concat(axisClasses.tickLabel), {
-  alignmentBaseline: 'central',
+  dominantBaseline: 'central',
   textAnchor: 'start'
 })), _defineProperty(_styled, "&.".concat(axisClasses.bottom), _defineProperty({}, ".".concat(axisClasses.tickLabel, ", .").concat(axisClasses.label), {
-  alignmentBaseline: 'hanging',
+  dominantBaseline: 'hanging',
   textAnchor: 'middle'
 })), _defineProperty(_styled, "&.".concat(axisClasses.top), _defineProperty({}, ".".concat(axisClasses.tickLabel, ", .").concat(axisClasses.label), {
-  alignmentBaseline: 'baseline',
+  dominantBaseline: 'baseline',
   textAnchor: 'middle'
 })), _styled));
-export var Line = styled('line', {
+export var ChartsLine = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Line',
   overridesResolver: function overridesResolver(props, styles) {
@@ -41,7 +41,7 @@ export var Line = styled('line', {
     strokeWidth: 1
   };
 });
-export var Tick = styled('line', {
+export var ChartsTick = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Tick',
   overridesResolver: function overridesResolver(props, styles) {
@@ -54,7 +54,7 @@ export var Tick = styled('line', {
     shapeRendering: 'crispEdges'
   };
 });
-export var TickLabel = styled('text', {
+export var ChartsTickLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'TickLabel',
   overridesResolver: function overridesResolver(props, styles) {
@@ -66,7 +66,7 @@ export var TickLabel = styled('text', {
     fill: theme.palette.text.primary
   });
 });
-export var Label = styled('text', {
+export var ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'Label',
   overridesResolver: function overridesResolver(props, styles) {

package/models/axis.d.ts

@@ -1,9 +1,22 @@
+/// <reference types="react" />
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 export type D3Scale = ScaleBand<any> | ScaleLogarithmic<any, any> | ScalePoint<any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
 export type D3ContinuouseScale = ScaleLogarithmic<any, any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
-export interface ChartsAxisProps {
+export interface ChartsAxisSlotsComponent {
+    axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+    axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+    axisTickLabel?: React.JSXElementConstructor<React.SVGAttributes<SVGTextElement>>;
+    axisLabel?: React.JSXElementConstructor<React.SVGAttributes<SVGTextElement>>;
+}
+export interface ChartsAxisSlotComponentProps {
+    axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+    axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+    axisTickLabel?: Partial<React.SVGAttributes<SVGTextElement>>;
+    axisLabel?: Partial<React.SVGAttributes<SVGTextElement>>;
+}
+export interface ChartsAxisProps extends TickParams {
     /**
      * Id of the axis to render.
      */
@@ -51,6 +64,16 @@ export interface ChartsAxisProps {
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ChartsAxisClasses>;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: Partial<ChartsAxisSlotsComponent>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: Partial<ChartsAxisSlotComponentProps>;
 }
 export interface ChartsYAxisProps extends ChartsAxisProps {
     /**

package/modern/BarChart/BarChart.js

@@ -30,7 +30,9 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -56,15 +58,26 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [/*#__PURE__*/_jsx("g", {
       clipPath: `url(#${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]
   });
@@ -92,8 +105,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,
@@ -120,8 +138,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({
@@ -138,6 +161,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({
@@ -160,8 +185,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({
@@ -182,6 +212,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({
@@ -204,8 +244,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({
@@ -228,15 +273,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({
@@ -252,15 +299,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/modern/BarChart/BarElement.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope"];
+const _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';
@@ -24,7 +25,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-const BarElementPath = styled('rect', {
+export const BarElementPath = styled('rect', {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -43,7 +44,9 @@ export function BarElement(props) {
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -69,12 +72,18 @@ export function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(BarElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  })));
+  const Bar = slots?.bar ?? BarElementPath;
+  const barProps = useSlotProps({
+    elementType: Bar,
+    externalSlotProps: slotProps?.bar,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'bar',
+      seriesId: id,
+      dataIndex
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
 }

package/modern/BarChart/BarPlot.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
@@ -32,7 +34,7 @@ function getBandSize({
     offset
   };
 }
-export function BarPlot() {
+function BarPlot(props) {
   const seriesData = React.useContext(SeriesContext).bar;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -87,7 +89,7 @@ export function BarPlot() {
         return stackedData.map((values, dataIndex) => {
           const baseline = Math.min(...values);
           const value = Math.max(...values);
-          return /*#__PURE__*/_jsx(BarElement, {
+          return /*#__PURE__*/_jsx(BarElement, _extends({
             id: seriesId,
             dataIndex: dataIndex,
             x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * (barWidth + offset),
@@ -96,9 +98,26 @@ export function BarPlot() {
             width: barWidth,
             color: color,
             highlightScope: series[seriesId].highlightScope
-          }, `${seriesId}-${dataIndex}`);
+          }, props), `${seriesId}-${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/modern/ChartsAxis/ChartsAxis.js

@@ -15,12 +15,23 @@ const getAxisId = propsValue => {
   }
   return propsValue;
 };
+const mergeProps = (axisConfig, slots, slotProps) => {
+  return typeof axisConfig === 'object' ? _extends({}, axisConfig, {
+    slots: _extends({}, slots, axisConfig?.slots),
+    slotProps: _extends({}, slotProps, axisConfig?.slotProps)
+  }) : {
+    slots,
+    slotProps
+  };
+};
 function ChartsAxis(props) {
   const {
     topAxis,
     leftAxis,
     rightAxis,
-    bottomAxis
+    bottomAxis,
+    slots,
+    slotProps
   } = props;
   const {
     xAxis,
@@ -48,20 +59,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__*/_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 = {
@@ -83,8 +98,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]),
   /**
@@ -101,8 +121,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]),
   /**
@@ -119,10 +144,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`.
@@ -137,8 +177,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;