@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/legacy/ChartsTooltip/ChartsTooltipTable.js

@@ -1,29 +1,37 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export var ChartsTooltipPaper = styled(Paper, {
+export var ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary,
+    transition: theme.transitions.create('box-shadow'),
+    border: "1px solid ".concat((theme.vars || theme).palette.divider),
+    borderRadius: theme.shape.borderRadius
+  };
+});
 export var ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
-})(function (_ref) {
-  var theme = _ref.theme;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     borderSpacing: 0,
     '& thead td': {
-      borderBottom: "solid ".concat(theme.palette.divider, " 1px")
+      borderBottom: "solid ".concat((theme.vars || theme).palette.divider, " 1px")
     }
   };
 });
 export var ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row'
-})(function (_ref2) {
-  var theme = _ref2.theme;
+})(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     'tr:first-of-type& td': {
       paddingTop: theme.spacing(1)
@@ -36,36 +44,36 @@ export var ChartsTooltipRow = styled('tr', {
 export var ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
-})(function (_ref3) {
-  var _ref4;
-  var theme = _ref3.theme;
-  return _ref4 = {
+})(function (_ref4) {
+  var _ref5;
+  var theme = _ref4.theme;
+  return _ref5 = {
     verticalAlign: 'middle',
-    color: theme.palette.text.secondary
-  }, _defineProperty(_ref4, "&.".concat(tooltipClasses.labelCell), {
+    color: (theme.vars || theme).palette.text.secondary
+  }, _defineProperty(_ref5, "&.".concat(tooltipClasses.labelCell), {
     paddingLeft: theme.spacing(1)
-  }), _defineProperty(_ref4, "&.".concat(tooltipClasses.valueCell), {
+  }), _defineProperty(_ref5, "&.".concat(tooltipClasses.valueCell), {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
-  }), _defineProperty(_ref4, 'td:first-of-type&', {
+    color: (theme.vars || theme).palette.text.primary
+  }), _defineProperty(_ref5, 'td:first-of-type&', {
     paddingLeft: theme.spacing(2)
-  }), _defineProperty(_ref4, 'td:last-of-type&', {
+  }), _defineProperty(_ref5, 'td:last-of-type&', {
     paddingRight: theme.spacing(2)
-  }), _ref4;
+  }), _ref5;
 });
 export var ChartsTooltipMark = styled(Box, {
   name: 'MuiChartsTooltip',
   slot: 'Mark'
-})(function (_ref5) {
-  var theme = _ref5.theme,
-    ownerState = _ref5.ownerState;
+})(function (_ref6) {
+  var theme = _ref6.theme,
+    ownerState = _ref6.ownerState;
   return {
     width: theme.spacing(1),
     height: theme.spacing(1),
     borderRadius: '50%',
     backgroundColor: ownerState.color,
-    borderColor: theme.palette.background.paper,
-    border: "solid ".concat(theme.palette.background.paper, " ").concat(theme.spacing(0.25)),
+    borderColor: (theme.vars || theme).palette.background.paper,
+    border: "solid ".concat((theme.vars || theme).palette.background.paper, " ").concat(theme.spacing(0.25)),
     boxSizing: 'content-box'
   };
 });

package/legacy/ChartsXAxis/ChartsXAxis.js

@@ -1,15 +1,20 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["scale", "ticksNumber"];
+var _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { getMinXTranslation } from '../internals/geometry';
+import { useMounted } from '../hooks/useMounted';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -25,60 +30,162 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
+function addLabelDimension(xTicks, _ref) {
+  var style = _ref.tickLabelStyle,
+    tickLabelInterval = _ref.tickLabelInterval,
+    isMounted = _ref.isMounted;
+  var withDimension = xTicks.map(function (tick) {
+    if (!isMounted || tick.formattedValue === undefined) {
+      return _extends({}, tick, {
+        width: 0,
+        height: 0
+      });
+    }
+    var tickSizes = getWordsByLines({
+      style: style,
+      needsComputation: true,
+      text: tick.formattedValue
+    });
+    return _extends({}, tick, {
+      width: Math.max.apply(Math, _toConsumableArray(tickSizes.map(function (size) {
+        return size.width;
+      }))),
+      height: Math.max(tickSizes.length * tickSizes[0].height)
+    });
+  });
+  if (typeof tickLabelInterval === 'function') {
+    return withDimension.map(function (item, index) {
+      return _extends({}, item, {
+        skipLabel: !tickLabelInterval(item.value, index)
+      });
+    });
+  }
+
+  // Filter label to avoid overlap
+  var textStart = 0;
+  var textEnd = 0;
+  return withDimension.map(function (item, labelIndex) {
+    var width = item.width,
+      offset = item.offset,
+      labelOffset = item.labelOffset,
+      height = item.height;
+    var distance = getMinXTranslation(width, height, style == null ? void 0 : style.angle);
+    var textPosition = offset + labelOffset;
+    var gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
+
+    textStart = textPosition - gapRatio * distance / 2;
+    if (labelIndex > 0 && textStart < textEnd) {
+      // Except for the first label, we skip all label that overlap with the last accepted.
+      // Notice that the early return prevents `textEnd` from being updated.
+      return _extends({}, item, {
+        skipLabel: true
+      });
+    }
+    textEnd = textPosition + gapRatio * distance / 2;
+    return item;
+  });
+}
 var defaultProps = {
   position: 'bottom',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
+
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
+ */
 function ChartsXAxis(inProps) {
-  var _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
+  var _props$axisId, _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
   var props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
   });
   var _React$useContext = React.useContext(CartesianContext),
-    _React$useContext$xAx = _React$useContext.xAxis[props.axisId],
-    xScale = _React$useContext$xAx.scale,
-    ticksNumber = _React$useContext$xAx.ticksNumber,
-    settings = _objectWithoutProperties(_React$useContext$xAx, _excluded);
+    xAxisIds = _React$useContext.xAxisIds;
+  var _React$useContext2 = React.useContext(CartesianContext),
+    _React$useContext2$xA = _React$useContext2.xAxis[(_props$axisId = props.axisId) != null ? _props$axisId : xAxisIds[0]],
+    xScale = _React$useContext2$xA.scale,
+    tickNumber = _React$useContext2$xA.tickNumber,
+    settings = _objectWithoutProperties(_React$useContext2$xA, _excluded);
+  var isMounted = useMounted();
   var defaultizedProps = _extends({}, defaultProps, settings, props);
   var position = defaultizedProps.position,
     disableLine = defaultizedProps.disableLine,
     disableTicks = defaultizedProps.disableTicks,
-    tickFontSize = defaultizedProps.tickFontSize,
+    tickLabelStyle = defaultizedProps.tickLabelStyle,
     label = defaultizedProps.label,
+    labelStyle = defaultizedProps.labelStyle,
+    tickFontSize = defaultizedProps.tickFontSize,
     labelFontSize = defaultizedProps.labelFontSize,
     tickSizeProp = defaultizedProps.tickSize,
     valueFormatter = defaultizedProps.valueFormatter,
     slots = defaultizedProps.slots,
-    slotProps = defaultizedProps.slotProps;
+    slotProps = defaultizedProps.slotProps,
+    tickInterval = defaultizedProps.tickInterval,
+    tickLabelInterval = defaultizedProps.tickLabelInterval;
   var theme = useTheme();
   var classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme: theme
   }));
-  var _React$useContext2 = React.useContext(DrawingContext),
-    left = _React$useContext2.left,
-    top = _React$useContext2.top,
-    width = _React$useContext2.width,
-    height = _React$useContext2.height;
+  var _React$useContext3 = React.useContext(DrawingContext),
+    left = _React$useContext3.left,
+    top = _React$useContext3.top,
+    width = _React$useContext3.width,
+    height = _React$useContext3.height;
   var tickSize = disableTicks ? 4 : tickSizeProp;
+  var positionSign = position === 'bottom' ? 1 : -1;
+  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
+  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
+  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
+  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  var axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
+    additionalProps: {
+      style: _extends({
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+        fontSize: tickFontSize != null ? tickFontSize : 12
+      }, tickLabelStyle),
+      className: classes.tickLabel
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
   var xTicks = useTicks({
     scale: xScale,
-    ticksNumber: ticksNumber,
-    valueFormatter: valueFormatter
+    tickNumber: tickNumber,
+    valueFormatter: valueFormatter,
+    tickInterval: tickInterval
+  });
+  var xTicksWithDimension = addLabelDimension(xTicks, {
+    tickLabelStyle: axisTickLabelProps.style,
+    tickLabelInterval: tickLabelInterval,
+    isMounted: isMounted
   });
-  var positionSigne = position === 'bottom' ? 1 : -1;
   var labelRefPoint = {
     x: left + width / 2,
-    y: positionSigne * (tickFontSize + tickSize + 10)
+    y: positionSign * (tickSize + 22)
   };
-  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;
+  var axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
+    additionalProps: {
+      style: _extends({
+        fontSize: labelFontSize != null ? labelFontSize : 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
+      }, labelStyle)
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: "translate(0, ".concat(position === 'bottom' ? top + height : top, ")"),
     className: classes.root,
@@ -86,39 +193,32 @@ function ChartsXAxis(inProps) {
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }, slotProps == null ? void 0 : slotProps.axisLine)), xTicks.map(function (_ref, index) {
-      var formattedValue = _ref.formattedValue,
-        offset = _ref.offset,
-        labelOffset = _ref.labelOffset;
+    }, slotProps == null ? void 0 : slotProps.axisLine)), xTicksWithDimension.map(function (_ref2, index) {
+      var formattedValue = _ref2.formattedValue,
+        offset = _ref2.offset,
+        labelOffset = _ref2.labelOffset,
+        skipLabel = _ref2.skipLabel;
       var xTickLabel = labelOffset != null ? labelOffset : 0;
-      var yTickLabel = positionSigne * (tickSize + 3);
+      var yTickLabel = positionSign * (tickSize + 3);
       return /*#__PURE__*/_jsxs("g", {
         transform: "translate(".concat(offset, ", 0)"),
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
-          y2: positionSigne * tickSize,
+          y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
-          y: yTickLabel,
-          "transform-origin": "".concat(xTickLabel, "px ").concat(yTickLabel, "px"),
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
-          children: formattedValue
+          y: yTickLabel
+        }, axisTickLabelProps, {
+          text: formattedValue.toString()
         }))]
       }, index);
-    }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
-      },
-      className: classes.label
-    }, slotProps == null ? void 0 : slotProps.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
@@ -127,9 +227,10 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.string.isRequired,
+  axisId: PropTypes.string,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -156,8 +257,13 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   /**
    * The font size of the axis label.
    * @default 14
+   * @deprecated Consider using `labelStyle.fontSize` instead.
    */
   labelFontSize: PropTypes.number,
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle: PropTypes.object,
   /**
    * Position of the axis.
    */
@@ -180,8 +286,28 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   /**
    * The font size of the axis ticks text.
    * @default 12
+   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Defines which ticks are displayed. Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   */
+  tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle: PropTypes.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.

package/legacy/ChartsYAxis/ChartsYAxis.js

@@ -1,14 +1,16 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["scale", "ticksNumber"];
+var _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
-import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsText } from '../internals/components/ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,17 +35,29 @@ var defaultProps = {
   labelFontSize: 14,
   tickSize: 6
 };
+
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+ */
 function ChartsYAxis(inProps) {
-  var _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
+  var _props$axisId, _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
   var props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsYAxis'
   });
   var _React$useContext = React.useContext(CartesianContext),
-    _React$useContext$yAx = _React$useContext.yAxis[props.axisId],
-    yScale = _React$useContext$yAx.scale,
-    ticksNumber = _React$useContext$yAx.ticksNumber,
-    settings = _objectWithoutProperties(_React$useContext$yAx, _excluded);
+    yAxisIds = _React$useContext.yAxisIds;
+  var _React$useContext2 = React.useContext(CartesianContext),
+    _React$useContext2$yA = _React$useContext2.yAxis[(_props$axisId = props.axisId) != null ? _props$axisId : yAxisIds[0]],
+    yScale = _React$useContext2$yA.scale,
+    tickNumber = _React$useContext2$yA.tickNumber,
+    settings = _objectWithoutProperties(_React$useContext2$yA, _excluded);
   var defaultizedProps = _extends({}, defaultProps, settings, props);
   var position = defaultizedProps.position,
     disableLine = defaultizedProps.disableLine,
@@ -59,26 +73,52 @@ function ChartsYAxis(inProps) {
   var classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme: theme
   }));
-  var _React$useContext2 = React.useContext(DrawingContext),
-    left = _React$useContext2.left,
-    top = _React$useContext2.top,
-    width = _React$useContext2.width,
-    height = _React$useContext2.height;
+  var _React$useContext3 = React.useContext(DrawingContext),
+    left = _React$useContext3.left,
+    top = _React$useContext3.top,
+    width = _React$useContext3.width,
+    height = _React$useContext3.height;
   var tickSize = disableTicks ? 4 : tickSizeProp;
   var yTicks = useTicks({
     scale: yScale,
-    ticksNumber: ticksNumber,
+    tickNumber: tickNumber,
     valueFormatter: valueFormatter
   });
-  var positionSigne = position === 'right' ? 1 : -1;
+  var positionSign = position === 'right' ? 1 : -1;
   var labelRefPoint = {
-    x: positionSigne * (tickFontSize + tickSize + 10),
+    x: positionSign * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  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;
+  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
+  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
+  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
+  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  var axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
+    additionalProps: {
+      style: {
+        fontSize: tickFontSize,
+        textAnchor: position === 'right' ? 'start' : 'end',
+        dominantBaseline: 'central'
+      },
+      className: classes.tickLabel
+    },
+    ownerState: {}
+  });
+  var axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
+    additionalProps: {
+      style: {
+        fontSize: labelFontSize,
+        angle: positionSign * 90,
+        textAnchor: 'middle',
+        dominantBaseline: 'auto'
+      }
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: "translate(".concat(position === 'right' ? left + width : left, ", 0)"),
     className: classes.root,
@@ -90,36 +130,26 @@ function ChartsYAxis(inProps) {
       var formattedValue = _ref.formattedValue,
         offset = _ref.offset,
         labelOffset = _ref.labelOffset;
-      var xTickLabel = positionSigne * (tickSize + 2);
+      var xTickLabel = positionSign * (tickSize + 2);
       var yTickLabel = labelOffset;
       return /*#__PURE__*/_jsxs("g", {
         transform: "translate(0, ".concat(offset, ")"),
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
-          x2: positionSigne * tickSize,
+          x2: positionSign * tickSize,
           className: classes.tick
         }, 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
-        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
-          children: formattedValue.toLocaleString()
-        }))]
+          text: formattedValue.toString()
+        }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transform: "rotate(".concat(positionSigne * 90, "deg)"),
-        transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
-      },
-      className: classes.label
-    }, slotProps == null ? void 0 : slotProps.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
@@ -128,9 +158,10 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.string.isRequired,
+  axisId: PropTypes.string,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -157,8 +188,13 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   /**
    * The font size of the axis label.
    * @default 14
+   * @deprecated Consider using `labelStyle.fontSize` instead.
    */
   labelFontSize: PropTypes.number,
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle: PropTypes.object,
   /**
    * Position of the axis.
    */
@@ -181,8 +217,28 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   /**
    * The font size of the axis ticks text.
    * @default 12
+   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Defines which ticks are displayed. Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   */
+  tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle: PropTypes.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.

package/legacy/LineChart/AreaElement.js

@@ -56,6 +56,16 @@ AreaElementPath.propTypes = {
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ *
+ * API:
+ *
+ * - [AreaElement API](https://mui.com/x/api/charts/area-element/)
+ */
 function AreaElement(props) {
   var _slots$area;
   var id = props.id,