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

package/esm/internals/components/AxisSharedComponents.js

@@ -8,39 +8,39 @@ export const AxisRoot = styled('g', {
 })({
   [`&.${axisClasses.directionY}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'middle'
+      dominantBaseline: 'middle'
     },
     [`.${axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'auto',
       textAnchor: 'middle'
     }
   },
   [`&.${axisClasses.left}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'end'
     }
   },
   [`&.${axisClasses.right}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'start'
     }
   },
   [`&.${axisClasses.bottom}`]: {
     [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      alignmentBaseline: 'hanging',
+      dominantBaseline: 'hanging',
       textAnchor: 'middle'
     }
   },
   [`&.${axisClasses.top}`]: {
     [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'baseline',
       textAnchor: 'middle'
     }
   }
 });
-export const Line = styled('line', {
+export const ChartsLine = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Line',
   overridesResolver: (props, styles) => styles.line
@@ -51,7 +51,7 @@ export const Line = styled('line', {
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
-export const Tick = styled('line', {
+export const ChartsTick = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Tick',
   overridesResolver: (props, styles) => styles.tick
@@ -61,7 +61,7 @@ export const Tick = styled('line', {
   stroke: theme.palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
-export const TickLabel = styled('text', {
+export const ChartsTickLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'TickLabel',
   overridesResolver: (props, styles) => styles.tickLabel
@@ -70,7 +70,7 @@ export const TickLabel = styled('text', {
 }) => _extends({}, theme.typography.caption, {
   fill: theme.palette.text.primary
 }));
-export const Label = styled('text', {
+export const ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label

package/hooks/useAxisEvents.js

@@ -41,66 +41,49 @@ const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdateY = y => {
-      if (usedYAxis === null) {
-        return null;
-      }
-      const {
-        scale: yScale,
-        data: yAxisData
-      } = yAxis[usedYAxis];
-      if (!(0, _isBandScale.isBandScale)(yScale)) {
-        return {
-          value: yScale.invert(y)
-        };
-      }
-      const dataIndex = Math.floor((y - yScale.range()[0]) / yScale.step());
-      if (dataIndex < 0 || dataIndex >= yAxisData.length) {
-        return null;
-      }
-      return {
-        index: dataIndex,
-        value: yAxisData[dataIndex]
-      };
-    };
-    const getUpdateX = x => {
+    const getUpdate = (axisConfig, mouseValue) => {
       if (usedXAxis === null) {
         return null;
       }
       const {
-        scale: xScale,
-        data: xAxisData
-      } = xAxis[usedXAxis];
-      if (!(0, _isBandScale.isBandScale)(xScale)) {
-        const value = xScale.invert(x);
-        const closestIndex = xAxisData?.findIndex((v, index) => {
+        scale,
+        data: axisData
+      } = axisConfig;
+      if (!(0, _isBandScale.isBandScale)(scale)) {
+        const value = scale.invert(mouseValue);
+        if (axisData === undefined) {
+          return {
+            value
+          };
+        }
+        const closestIndex = axisData?.findIndex((v, index) => {
           if (v > value) {
             // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - xAxisData[index - 1])) {
+            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
               return true;
             }
           }
           if (v <= value) {
-            if (index === xAxisData.length - 1 ||
+            if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - xAxisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
               return true;
             }
           }
           return false;
         });
         return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? xAxisData[closestIndex] : value,
+          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
           index: closestIndex
         };
       }
-      const dataIndex = xScale.bandwidth() === 0 ? Math.floor((x - xScale.range()[0] + xScale.step() / 2) / xScale.step()) : Math.floor((x - xScale.range()[0]) / xScale.step());
-      if (dataIndex < 0 || dataIndex >= xAxisData.length) {
+      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
+      if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
       return {
         index: dataIndex,
-        value: xAxisData[dataIndex]
+        value: axisData[dataIndex]
       };
     };
     const handleMouseOut = () => {
@@ -138,8 +121,8 @@ const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(svgPt.x);
-      const newStateY = getUpdateY(svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

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 {
@@ -31,9 +34,9 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map((value, index) => ({
+        return [...domain.map(value => ({
           formattedValue: valueFormatter?.(value) ?? value,
-          offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
           labelOffset: scale.step() / 2
         })), {
           formattedValue: undefined,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.6
+ * @mui/x-charts v6.0.0-alpha.8
  *
  * @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/internals/defaultizeColor.d.ts

@@ -39,6 +39,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     data?: number[] | undefined;
     dataKey?: string | undefined;
     label?: string | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
     id?: string | undefined;
     color: string;
     valueFormatter?: ((value: number) => string) | undefined;

package/legacy/BarChart/BarChart.js

@@ -1,12 +1,12 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import PropTypes from 'prop-types';
 import { BarPlot } from './BarPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
@@ -23,6 +23,7 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     colors = props.colors,
     dataset = props.dataset,
     sx = props.sx,
+    layout = props.layout,
     tooltip = props.tooltip,
     axisHighlight = props.axisHighlight,
     legend = props.legend,
@@ -30,47 +31,72 @@ 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");
+  var hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(function (item) {
+    return item.layout === 'horizontal';
+  });
+  var defaultAxisConfig = {
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
+        var _ref, _s$data;
+        return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
+      })))
+    }, function (_, index) {
+      return index;
+    })
+  };
+  var defaultizedAxisHighlight = _extends({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
     series: series.map(function (s) {
       return _extends({
         type: 'bar'
-      }, s);
+      }, s, {
+        layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+      });
     }),
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis != null ? xAxis : [{
-      id: DEFAULT_X_AXIS_KEY,
-      scaleType: 'band',
-      data: Array.from({
-        length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
-          var _ref, _s$data;
-          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
-        })))
-      }, function (_, index) {
-        return index;
-      })
-    }],
-    yAxis: yAxis,
+    xAxis: xAxis != null ? xAxis : hasHorizontalSeries ? undefined : [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)],
+    yAxis: yAxis != null ? yAxis : hasHorizontalSeries ? [_extends({
+      id: DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined,
     colors: colors,
     dataset: dataset,
     sx: sx,
     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({
-      x: "band"
-    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -82,7 +108,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
-    y: PropTypes.oneOf(['line', 'none'])
+    y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
@@ -98,8 +124,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,
@@ -112,6 +143,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -126,8 +158,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 +181,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 +205,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({
@@ -180,6 +224,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     }),
     id: PropTypes.string,
     label: PropTypes.string,
+    layout: PropTypes.oneOf(['horizontal', 'vertical']),
     stack: PropTypes.string,
     stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
     stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
@@ -188,6 +233,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 +265,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 +294,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 +320,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;