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

package/ChartsXAxis/ChartsXAxis.js

@@ -9,17 +9,21 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _ChartsText = require("../internals/components/ChartsText");
+var _geometry = require("../internals/geometry");
+var _useMounted = require("../hooks/useMounted");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "ticksNumber"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-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; }
+const _excluded = ["scale", "tickNumber"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,16 +37,78 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
+function addLabelDimension(xTicks, {
+  tickLabelStyle: style,
+  tickLabelInterval,
+  isMounted
+}) {
+  const withDimension = xTicks.map(tick => {
+    if (!isMounted || tick.formattedValue === undefined) {
+      return (0, _extends2.default)({}, tick, {
+        width: 0,
+        height: 0
+      });
+    }
+    const tickSizes = (0, _ChartsText.getWordsByLines)({
+      style,
+      needsComputation: true,
+      text: tick.formattedValue
+    });
+    return (0, _extends2.default)({}, tick, {
+      width: Math.max(...tickSizes.map(size => size.width)),
+      height: Math.max(tickSizes.length * tickSizes[0].height)
+    });
+  });
+  if (typeof tickLabelInterval === 'function') {
+    return withDimension.map((item, index) => (0, _extends2.default)({}, item, {
+      skipLabel: !tickLabelInterval(item.value, index)
+    }));
+  }
+
+  // Filter label to avoid overlap
+  let textStart = 0;
+  let textEnd = 0;
+  return withDimension.map((item, labelIndex) => {
+    const {
+      width,
+      offset,
+      labelOffset,
+      height
+    } = item;
+    const distance = (0, _geometry.getMinXTranslation)(width, height, style?.angle);
+    const textPosition = offset + labelOffset;
+    const 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 (0, _extends2.default)({}, item, {
+        skipLabel: true
+      });
+    }
+    textEnd = textPosition + gapRatio * distance / 2;
+    return item;
+  });
+}
 const 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) {
   const props = (0, _styles.useThemeProps)({
     props: (0, _extends2.default)({}, defaultProps, inProps),
@@ -54,23 +120,28 @@ function ChartsXAxis(inProps) {
       xAxis: {
         [_props$axisId]: {
           scale: xScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
     settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.xAxis[_props$axisId], _excluded);
+  const isMounted = (0, _useMounted.useMounted)();
   const defaultizedProps = (0, _extends2.default)({}, defaultProps, settings, props);
   const {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
+    tickLabelStyle,
     label,
+    labelStyle,
+    tickFontSize,
     labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
-    slotProps
+    slotProps,
+    tickInterval,
+    tickLabelInterval
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -83,20 +154,52 @@ function ChartsXAxis(inProps) {
     height
   } = React.useContext(_DrawingProvider.DrawingContext);
   const tickSize = disableTicks ? 4 : tickSizeProp;
+  const positionSign = position === 'bottom' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const axisTickLabelProps = (0, _utils.useSlotProps)({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      style: (0, _extends2.default)({
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+        fontSize: tickFontSize ?? 12
+      }, tickLabelStyle),
+      className: classes.tickLabel
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
   const xTicks = (0, _useTicks.default)({
     scale: xScale,
-    ticksNumber,
-    valueFormatter
+    tickNumber,
+    valueFormatter,
+    tickInterval
+  });
+  const xTicksWithDimension = addLabelDimension(xTicks, {
+    tickLabelStyle: axisTickLabelProps.style,
+    tickLabelInterval,
+    isMounted
   });
-  const positionSigne = position === 'bottom' ? 1 : -1;
   const labelRefPoint = {
     x: left + width / 2,
-    y: positionSigne * (tickFontSize + tickSize + 10)
+    y: positionSign * (tickSize + 22)
   };
-  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
-  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
-  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
+  const axisLabelProps = (0, _utils.useSlotProps)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: (0, _extends2.default)({
+        fontSize: labelFontSize ?? 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
+      }, labelStyle)
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
@@ -104,40 +207,33 @@ function ChartsXAxis(inProps) {
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }, slotProps?.axisLine)), xTicks.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.map(({
       formattedValue,
       offset,
-      labelOffset
+      labelOffset,
+      skipLabel
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
-      const yTickLabel = positionSigne * (tickSize + 3);
+      const yTickLabel = positionSign * (tickSize + 3);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
-          y2: positionSigne * tickSize,
+          y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
-          y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue
+          y: yTickLabel
+        }, axisTickLabelProps, {
+          text: formattedValue.toString()
         }))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
@@ -175,8 +271,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.default.number,
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle: _propTypes.default.object,
   /**
    * Position of the axis.
    */
@@ -199,8 +300,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.default.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.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.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.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle: _propTypes.default.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.

package/ChartsYAxis/ChartsYAxis.d.ts

@@ -1,5 +1,14 @@
 import * as React from 'react';
 import { ChartsYAxisProps } from '../models/axis';
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+ */
 declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element;
 declare namespace ChartsYAxis {
     var propTypes: any;

package/ChartsYAxis/ChartsYAxis.js

@@ -9,17 +9,19 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _ChartsText = require("../internals/components/ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "ticksNumber"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-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; }
+const _excluded = ["scale", "tickNumber"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,7 +35,7 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
 const defaultProps = {
   position: 'left',
@@ -43,6 +45,16 @@ const 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) {
   const props = (0, _styles.useThemeProps)({
     props: (0, _extends2.default)({}, defaultProps, inProps),
@@ -54,7 +66,7 @@ function ChartsYAxis(inProps) {
       yAxis: {
         [_props$axisId]: {
           scale: yScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
@@ -85,18 +97,44 @@ function ChartsYAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.default)({
     scale: yScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
-  const positionSigne = position === 'right' ? 1 : -1;
+  const positionSign = position === 'right' ? 1 : -1;
   const labelRefPoint = {
-    x: positionSigne * (tickFontSize + tickSize + 10),
+    x: positionSign * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
-  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
-  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const axisTickLabelProps = (0, _utils.useSlotProps)({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      style: {
+        fontSize: tickFontSize,
+        textAnchor: position === 'right' ? 'start' : 'end',
+        dominantBaseline: 'central'
+      },
+      className: classes.tickLabel
+    },
+    ownerState: {}
+  });
+  const axisLabelProps = (0, _utils.useSlotProps)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: {
+        fontSize: labelFontSize,
+        angle: positionSign * 90,
+        textAnchor: 'middle',
+        dominantBaseline: 'auto'
+      }
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
@@ -109,36 +147,26 @@ function ChartsYAxis(inProps) {
       offset,
       labelOffset
     }, index) => {
-      const xTickLabel = positionSigne * (tickSize + 2);
+      const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(0, ${offset})`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
-          x2: positionSigne * tickSize,
+          x2: positionSign * tickSize,
           className: classes.tick
         }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue.toLocaleString()
-        }))]
+          text: formattedValue.toString()
+        }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transform: `rotate(${positionSigne * 90}deg)`,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
@@ -176,8 +204,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.default.number,
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle: _propTypes.default.object,
   /**
    * Position of the axis.
    */
@@ -200,8 +233,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.default.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.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.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.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle: _propTypes.default.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.

package/LineChart/AreaElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base';
+import { SlotComponentProps } from '@mui/base/utils';
 import { HighlightScope } from '../context/HighlightProvider';
 export interface AreaElementClasses {
     /** Styles applied to the root element. */
@@ -10,7 +10,7 @@ export interface AreaElementClasses {
     faded: string;
 }
 export type AreaElementClassKey = keyof AreaElementClasses;
-export interface AreaElementOwnerState {
+interface AreaElementOwnerState {
     id: string;
     color: string;
     isFaded: boolean;
@@ -43,6 +43,16 @@ export type AreaElementProps = Omit<AreaElementOwnerState, 'isFaded' | 'isHighli
         area?: React.ElementType;
     };
 };
+/**
+ * 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/)
+ */
 declare function AreaElement(props: AreaElementProps): React.JSX.Element;
 declare namespace AreaElement {
     var propTypes: any;

package/LineChart/AreaElement.js

@@ -21,13 +21,12 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getAreaElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
 }
-const areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded']);
-exports.areaElementClasses = areaElementClasses;
+const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,7 +39,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getAreaElementUtilityClass, classes);
 };
-const AreaElementPath = (0, _styles.styled)('path', {
+const AreaElementPath = exports.AreaElementPath = (0, _styles.styled)('path', {
   name: 'MuiAreaElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -52,7 +51,6 @@ const AreaElementPath = (0, _styles.styled)('path', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
-exports.AreaElementPath = AreaElementPath;
 AreaElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -68,6 +66,16 @@ AreaElementPath.propTypes = {
   }).isRequired,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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) {
   const {
       id,

package/LineChart/AreaPlot.d.ts

@@ -8,6 +8,17 @@ export interface AreaPlotSlotComponentProps {
 }
 export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps'> {
 }
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+ */
 declare function AreaPlot(props: AreaPlotProps): React.JSX.Element | null;
 declare namespace AreaPlot {
     var propTypes: any;