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

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) {
@@ -55,45 +57,72 @@ export function BarPlot() {
         var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
         var xAxisConfig = xAxis[xAxisKey];
         var yAxisConfig = yAxis[yAxisKey];
-        if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+        var verticalLayout = series[seriesId].layout === 'vertical';
+        var baseScaleConfig;
+        if (verticalLayout) {
+          if (!isBandScaleConfig(xAxisConfig)) {
+            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          }
+          if (xAxis[xAxisKey].data === undefined) {
+            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          }
+          baseScaleConfig = xAxisConfig;
+        } else {
+          if (!isBandScaleConfig(yAxisConfig)) {
+            throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          }
+          if (yAxis[yAxisKey].data === undefined) {
+            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          }
+          baseScaleConfig = yAxisConfig;
         }
         var xScale = xAxisConfig.scale;
         var yScale = yAxisConfig.scale;
-
-        // Currently assuming all bars are vertical
-        var bandWidth = xScale.bandwidth();
+        var bandWidth = baseScaleConfig.scale.bandwidth();
         var _getBandSize = getBandSize({
             bandWidth: bandWidth,
             numberOfGroups: stackingGroups.length,
-            gapRatio: xAxisConfig.barGapRatio
+            gapRatio: baseScaleConfig.barGapRatio
           }),
           barWidth = _getBandSize.barWidth,
           offset = _getBandSize.offset;
-
-        // @ts-ignore TODO: fix when adding a correct API for customisation
+        var barOffset = groupIndex * (barWidth + offset);
         var _series$seriesId = series[seriesId],
           stackedData = _series$seriesId.stackedData,
           color = _series$seriesId.color;
         return stackedData.map(function (values, dataIndex) {
-          var _xAxis$xAxisKey$data;
+          var _xAxis$xAxisKey$data, _yAxis$yAxisKey$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),
-            y: yScale(value),
-            height: yScale(baseline) - yScale(value),
-            width: barWidth,
+            x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(baseline),
+            y: verticalLayout ? yScale(value) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
+            height: verticalLayout ? Math.abs(yScale(baseline) - yScale(value)) : barWidth,
+            width: verticalLayout ? barWidth : Math.abs(xScale(baseline) - xScale(value)),
             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/BarChart/extremums.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-export var getExtremumX = function getExtremumX(params) {
+var getBaseExtremum = function getBaseExtremum(params) {
   var _axis$data, _axis$data2;
   var axis = params.axis;
   var minX = Math.min.apply(Math, _toConsumableArray((_axis$data = axis.data) != null ? _axis$data : []));
   var maxX = Math.max.apply(Math, _toConsumableArray((_axis$data2 = axis.data) != null ? _axis$data2 : []));
   return [minX, maxX];
 };
-export var getExtremumY = function getExtremumY(params) {
+var getValueExtremum = function getValueExtremum(params) {
   var series = params.series,
     axis = params.axis,
     isDefaultAxis = params.isDefaultAxis;
@@ -22,4 +22,24 @@ export var getExtremumY = function getExtremumY(params) {
       seriesMax = _series$seriesId$stac2[1];
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);
+};
+export var getExtremumX = function getExtremumX(params) {
+  // Notice that bar should be all horizontal or all vertical.
+  // Don't think it's a problem for now
+  var isHorizontal = Object.keys(params.series).some(function (seriesId) {
+    return params.series[seriesId].layout === 'horizontal';
+  });
+  if (isHorizontal) {
+    return getValueExtremum(params);
+  }
+  return getBaseExtremum(params);
+};
+export var getExtremumY = function getExtremumY(params) {
+  var isHorizontal = Object.keys(params.series).some(function (seriesId) {
+    return params.series[seriesId].layout === 'horizontal';
+  });
+  if (isHorizontal) {
+    return getBaseExtremum(params);
+  }
+  return getValueExtremum(params);
 };

package/legacy/BarChart/formatter.js

@@ -38,7 +38,9 @@ var formatter = function formatter(params, dataset) {
     })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
       var dataKey = series[id].dataKey;
-      completedSeries[id] = _extends({}, series[id], {
+      completedSeries[id] = _extends({
+        layout: 'vertical'
+      }, series[id], {
         data: dataKey ? dataset.map(function (d) {
           return d[dataKey];
         }) : series[id].data,

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/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -21,6 +21,7 @@ function ChartsAxisHighlight(props) {
   var _React$useContext2 = React.useContext(InteractionContext),
     axis = _React$useContext2.axis;
   var getXPosition = getValueToPositionMapper(xScale);
+  var getYPosition = getValueToPositionMapper(yScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx("path", {
       d: "M ".concat(xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2, " ").concat(yScale.range()[0], " l ").concat(xScale.step(), " 0 l 0 ").concat(yScale.range()[1] - yScale.range()[0], " l ").concat(-xScale.step(), " 0 Z"),
@@ -29,15 +30,22 @@ function ChartsAxisHighlight(props) {
       style: {
         pointerEvents: 'none'
       }
+    }), yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && /*#__PURE__*/_jsx("path", {
+      d: "M ".concat(xScale.range()[0], " ").concat(yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2, " l 0 ").concat(yScale.step(), " l ").concat(xScale.range()[1] - xScale.range()[0], " 0 l 0 ").concat(-yScale.step(), " Z"),
+      fill: "gray",
+      fillOpacity: 0.1,
+      style: {
+        pointerEvents: 'none'
+      }
     }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/_jsx("path", {
-      d: "M ".concat(getXPosition(axis.x.value), " ").concat(yScale(yScale.domain()[0]), " L ").concat(getXPosition(axis.x.value), " ").concat(yScale(yScale.domain().at(-1))),
+      d: "M ".concat(getXPosition(axis.x.value), " ").concat(yScale.range()[0], " L ").concat(getXPosition(axis.x.value), " ").concat(yScale.range()[1]),
       stroke: "black",
       strokeDasharray: "5 2",
       style: {
         pointerEvents: 'none'
       }
     }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/_jsx("path", {
-      d: "M ".concat(xScale.range()[0], " ").concat(yScale(axis.y.value), " L ").concat(xScale.range()[1], " ").concat(yScale(axis.y.value)),
+      d: "M ".concat(xScale.range()[0], " ").concat(getYPosition(axis.y.value), " L ").concat(xScale.range()[1], " ").concat(getYPosition(axis.y.value)),
       stroke: "black",
       strokeDasharray: "5 2",
       style: {
@@ -52,6 +60,6 @@ process.env.NODE_ENV !== "production" ? ChartsAxisHighlight.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   x: PropTypes.oneOf(['band', 'line', 'none']),
-  y: PropTypes.oneOf(['line', 'none'])
+  y: PropTypes.oneOf(['band', 'line', 'none'])
 } : void 0;
 export { ChartsAxisHighlight };

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));
 }

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

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

package/legacy/ChartsXAxis/ChartsXAxis.js

@@ -9,7 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { Line, Tick, TickLabel, Label, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -34,6 +34,7 @@ var defaultProps = {
   tickSize: 6
 };
 function ChartsXAxis(inProps) {
+  var _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
   var props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
@@ -51,7 +52,9 @@ function ChartsXAxis(inProps) {
     label = defaultizedProps.label,
     labelFontSize = defaultizedProps.labelFontSize,
     tickSizeProp = defaultizedProps.tickSize,
-    valueFormatter = defaultizedProps.valueFormatter;
+    valueFormatter = defaultizedProps.valueFormatter,
+    slots = defaultizedProps.slots,
+    slotProps = defaultizedProps.slotProps;
   var theme = useTheme();
   var classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme: theme
@@ -72,14 +75,18 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
+  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : ChartsLine;
+  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : ChartsTick;
+  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsTickLabel;
+  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsLabel;
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: "translate(0, ".concat(position === 'bottom' ? top + height : top, ")"),
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, {
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }), xTicks.map(function (_ref, index) {
+    }, slotProps == null ? void 0 : slotProps.axisLine)), xTicks.map(function (_ref, index) {
       var formattedValue = _ref.formattedValue,
         offset = _ref.offset,
         labelOffset = _ref.labelOffset;
@@ -88,26 +95,28 @@ function ChartsXAxis(inProps) {
       return /*#__PURE__*/_jsxs("g", {
         transform: "translate(".concat(offset, ", 0)"),
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, {
+        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, {
+        }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": "".concat(xTickLabel, "px ").concat(yTickLabel, "px"),
           sx: {
             fontSize: tickFontSize
           },
-          className: classes.tickLabel,
+          className: classes.tickLabel
+        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
           children: formattedValue
-        })]
+        }))]
       }, index);
     }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
       sx: {
         fontSize: labelFontSize,
         transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps == null ? void 0 : slotProps.axisLabel, {
       children: label
     }))]
   });
@@ -153,6 +162,16 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * Position of the axis.
    */
   position: PropTypes.oneOf(['bottom', 'top']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -163,6 +182,23 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 12
    */
   tickFontSize: PropTypes.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.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.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: PropTypes.number,
   /**
    * The size of the ticks.
    * @default 6