@mui/x-charts 8.0.0-alpha.12 → 8.0.0-alpha.14

package/ChartsXAxis/ChartsXAxis.js

@@ -7,13 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsXAxis = ChartsXAxis;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _clampAngle = require("../internals/clampAngle");
+var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -26,6 +29,7 @@ var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
 var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _useAxis = require("../hooks/useAxis");
+var _invertTextAnchor = require("../internals/invertTextAnchor");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber", "reverse"];
 const useUtilityClasses = ownerState => {
@@ -43,61 +47,88 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
-function addLabelDimension(xTicks, {
+
+/* Returns a set of indices of the tick labels that should be visible.  */
+function getVisibleLabels(xTicks, {
   tickLabelStyle: style,
   tickLabelInterval,
+  tickLabelMinGap,
   reverse,
-  isMounted
+  isMounted,
+  isPointInside
 }) {
-  const withDimension = xTicks.map(tick => {
+  const getTickLabelSize = tick => {
     if (!isMounted || tick.formattedValue === undefined) {
-      return (0, _extends2.default)({}, tick, {
+      return {
         width: 0,
         height: 0
-      });
+      };
     }
     const tickSizes = (0, _getWordsByLines.getWordsByLines)({
       style,
       needsComputation: true,
       text: tick.formattedValue
     });
-    return (0, _extends2.default)({}, tick, {
+    return {
       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)
-    }));
+    return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
   }
 
   // Filter label to avoid overlap
-  let currentTextLimit = 0;
   let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
-  return withDimension.map((item, labelIndex) => {
+  return new Set(xTicks.filter((item, labelIndex) => {
     const {
-      width,
       offset,
-      labelOffset,
-      height
+      labelOffset
     } = 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.
+    if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
+      return false;
+    }
+    if (!isPointInside(textPosition)) {
+      return false;
+    }
 
-    currentTextLimit = textPosition - direction * (gapRatio * distance) / 2;
-    if (labelIndex > 0 && direction * currentTextLimit < direction * previousTextLimit) {
+    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
+    const {
+      width,
+      height
+    } = getTickLabelSize(item);
+    const distance = (0, _geometry.getMinXTranslation)(width, height, style?.angle);
+    const currentTextLimit = textPosition - direction * distance / 2;
+    if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
       // Except for the first label, we skip all label that overlap with the last accepted.
       // Notice that the early return prevents `previousTextLimit` from being updated.
-      return (0, _extends2.default)({}, item, {
-        skipLabel: true
-      });
+      return false;
     }
-    previousTextLimit = textPosition + direction * (gapRatio * distance) / 2;
-    return item;
-  });
+    previousTextLimit = textPosition + direction * distance / 2;
+    return true;
+  }));
+}
+function getDefaultTextAnchor(angle) {
+  const adjustedAngle = (0, _clampAngle.clampAngle)(angle);
+  if (adjustedAngle === 0 || adjustedAngle === 180) {
+    return 'middle';
+  }
+  if (adjustedAngle < 180) {
+    return 'start';
+  }
+  return 'end';
+}
+function getDefaultBaseline(angle, position) {
+  const adjustedAngle = (0, _clampAngle.clampAngle)(angle);
+  if (adjustedAngle === 0) {
+    return position === 'bottom' ? 'hanging' : 'auto';
+  }
+  if (adjustedAngle === 180) {
+    return position === 'bottom' ? 'auto' : 'hanging';
+  }
+  return 'central';
 }
 const XAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   name: 'MuiChartsXAxis',
@@ -105,10 +136,10 @@ const XAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   overridesResolver: (props, styles) => styles.root
 })({});
 const defaultProps = {
-  position: 'bottom',
   disableLine: false,
   disableTicks: false,
-  tickSize: 6
+  tickSize: 6,
+  tickLabelMinGap: 4
 };
 
 /**
@@ -153,12 +184,14 @@ function ChartsXAxis(inProps) {
     tickLabelInterval,
     tickPlacement,
     tickLabelPlacement,
-    sx
+    tickLabelMinGap,
+    sx,
+    offset,
+    height: axisHeight
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
-  const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
-    theme
-  }));
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const classes = useUtilityClasses(defaultizedProps);
   const {
     left,
     top,
@@ -174,14 +207,16 @@ function ChartsXAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
   const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const defaultTextAnchor = getDefaultTextAnchor(tickLabelStyle?.angle ?? 0);
+  const shouldInvertTextAnchor = isRtl && position !== 'top' || !isRtl && position === 'top';
   const axisTickLabelProps = (0, _useSlotProps.default)({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
-      style: (0, _extends2.default)({
+      style: (0, _extends2.default)({}, theme.typography.caption, {
         fontSize: 12,
-        textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
+        textAnchor: shouldInvertTextAnchor ? (0, _invertTextAnchor.invertTextAnchor)(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: getDefaultBaseline(tickLabelStyle?.angle ?? 0, position)
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -195,21 +230,25 @@ function ChartsXAxis(inProps) {
     tickPlacement,
     tickLabelPlacement
   });
-  const xTicksWithDimension = addLabelDimension(xTicks, {
+  const visibleLabels = getVisibleLabels(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
+    tickLabelMinGap,
     reverse,
-    isMounted
+    isMounted,
+    isPointInside: x => instance.isPointInside({
+      x,
+      y: -1
+    }, {
+      direction: 'x'
+    })
   });
-  const labelRefPoint = {
-    x: left + width / 2,
-    y: positionSign * (tickSize + 22)
-  };
   const axisLabelProps = (0, _useSlotProps.default)({
     elementType: Label,
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
-      style: (0, _extends2.default)({
+      style: (0, _extends2.default)({}, theme.typography.body1, {
+        lineHeight: 1,
         fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
@@ -222,44 +261,45 @@ function ChartsXAxis(inProps) {
   // Skip axis rendering if no data is available
   // - The domain is an empty array for band/point scales.
   // - The domains contains Infinity for continuous scales.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity)) {
+  // - The position is set to 'none'.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity) || position === 'none') {
     return null;
   }
+  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * (axisHeight - labelHeight)
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
+    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
     className: classes.root,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
       x1: left,
       x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.map(({
-      formattedValue,
-      offset,
-      labelOffset,
-      skipLabel
-    }, index) => {
+    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+      const {
+        formattedValue,
+        offset: tickOffset,
+        labelOffset
+      } = item;
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
       const showTick = instance.isPointInside({
-        x: offset,
-        y: -1
-      }, {
-        direction: 'x'
-      });
-      const showTickLabel = instance.isPointInside({
-        x: offset + xTickLabel,
+        x: tickOffset,
         y: -1
       }, {
         direction: 'x'
       });
+      const showTickLabel = visibleLabels.has(item);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        transform: `translate(${offset}, 0)`,
+        transform: `translate(${tickOffset}, 0)`,
         className: classes.tickContainer,
         children: [!disableTicks && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && showTickLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+        }, slotProps?.axisTick)), formattedValue !== undefined && showTickLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {
@@ -279,6 +319,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  axis: _propTypes.default.oneOf(['x']),
   /**
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
@@ -311,10 +352,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The style applied to the axis label.
    */
   labelStyle: _propTypes.default.object,
-  /**
-   * Position of the axis.
-   */
-  position: _propTypes.default.oneOf(['bottom', 'top']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -348,6 +385,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 'auto'
    */
   tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap: _propTypes.default.number,
   /**
    * The placement of ticks label. Can be the middle of the band, or the tick position.
    * Only used if scale is 'band'.

package/ChartsYAxis/ChartsYAxis.js

@@ -15,6 +15,7 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -47,7 +48,6 @@ const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   overridesResolver: (props, styles) => styles.root
 })({});
 const defaultProps = {
-  position: 'left',
   disableLine: false,
   disableTicks: false,
   tickSize: 6
@@ -93,13 +93,13 @@ function ChartsYAxis(inProps) {
     tickLabelPlacement,
     tickInterval,
     tickLabelInterval,
-    sx
+    sx,
+    offset,
+    width: axisWidth
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
-  const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
-    theme
-  }));
+  const classes = useUtilityClasses(defaultizedProps);
   const {
     instance
   } = (0, _ChartProvider.useChartContext)();
@@ -120,10 +120,6 @@ function ChartsYAxis(inProps) {
   });
   const positionSign = position === 'right' ? 1 : -1;
   const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
-  const labelRefPoint = {
-    x: positionSign * (tickFontSize + tickSize + 10),
-    y: top + height / 2
-  };
   const Line = slots?.axisLine ?? 'line';
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
@@ -133,7 +129,7 @@ function ChartsYAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
-      style: (0, _extends2.default)({
+      style: (0, _extends2.default)({}, theme.typography.caption, {
         fontSize: tickFontSize,
         textAnchor: revertAnchor ? 'start' : 'end',
         dominantBaseline: 'central'
@@ -146,7 +142,8 @@ function ChartsYAxis(inProps) {
     elementType: Label,
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
-      style: (0, _extends2.default)({
+      style: (0, _extends2.default)({}, theme.typography.body1, {
+        lineHeight: 1,
         fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
@@ -165,14 +162,21 @@ function ChartsYAxis(inProps) {
   });
   const domain = yScale.domain();
   const ordinalAxis = (0, _isBandScale.isBandScale)(yScale);
+
   // Skip axis rendering if no data is available
   // - The domain is an empty array for band/point scales.
   // - The domains contains Infinity for continuous scales.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity)) {
+  // - The position is 'none'.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity) || position === 'none') {
     return null;
   }
+  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
+  const labelRefPoint = {
+    x: positionSign * (axisWidth - labelHeight),
+    y: top + height / 2
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
-    transform: `translate(${position === 'right' ? left + width : left}, 0)`,
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
@@ -181,7 +185,7 @@ function ChartsYAxis(inProps) {
       className: classes.line
     }, lineSlotProps)), yTicks.map(({
       formattedValue,
-      offset,
+      offset: tickOffset,
       labelOffset,
       value
     }, index) => {
@@ -190,7 +194,7 @@ function ChartsYAxis(inProps) {
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
       const showLabel = instance.isPointInside({
         x: -1,
-        y: offset
+        y: tickOffset
       }, {
         direction: 'y'
       });
@@ -198,7 +202,7 @@ function ChartsYAxis(inProps) {
         return null;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        transform: `translate(0, ${offset})`,
+        transform: `translate(0, ${tickOffset})`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           x2: positionSign * tickSize,
@@ -222,6 +226,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  axis: _propTypes.default.oneOf(['y']),
   /**
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
@@ -254,10 +259,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The style applied to the axis label.
    */
   labelStyle: _propTypes.default.object,
-  /**
-   * Position of the axis.
-   */
-  position: _propTypes.default.oneOf(['left', 'right']),
   /**
    * The props used for each component slot.
    * @default {}

package/Gauge/Gauge.js

@@ -104,14 +104,15 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * The radius between circle center and the end of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.

package/Gauge/GaugeContainer.js

@@ -15,6 +15,7 @@ var _styles = require("@mui/material/styles");
 var _ChartsSurface = require("../ChartsSurface");
 var _GaugeProvider = require("./GaugeProvider");
 var _ChartProvider = require("../context/ChartProvider");
+var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
 const GStyled = (0, _styles.styled)('g')(({
@@ -48,12 +49,12 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
     pluginParams: {
       width: inWidth,
       height: inHeight,
-      margin: (0, _extends2.default)({
+      margin: (0, _defaultizeMargin.defaultizeMargin)(margin, {
         left: 10,
         right: 10,
         top: 10,
         bottom: 10
-      }, margin)
+      })
     },
     plugins: [],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
@@ -134,14 +135,15 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * The radius between circle center and the end of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.

package/LineChart/LineChart.d.ts

@@ -21,7 +21,7 @@ export interface LineChartProps extends Omit<ChartContainerProps<'line', LineCha
    * The series to display in the line chart.
    * An array of [[LineSeriesType]] objects.
    */
-  series: MakeOptional<LineSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<LineSeriesType, 'type'>[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

package/LineChart/LineChart.js

@@ -94,12 +94,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -150,12 +144,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: _propTypes.default.string,
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -164,14 +152,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * Callback fired when an area element is clicked.
    */
@@ -197,12 +186,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: _propTypes.default.func,
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The series to display in the line chart.
    * An array of [[LineSeriesType]] objects.
@@ -226,12 +209,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   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]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -242,6 +219,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -264,13 +242,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'top']),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -279,6 +259,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     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]),
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelMinGap: _propTypes.default.number,
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
@@ -294,6 +275,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -322,7 +304,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['left', 'right']),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -338,6 +321,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    width: _propTypes.default.number
   }))
 } : void 0;

package/LineChart/LinePlot.js

@@ -12,6 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _warning = require("@mui/x-internals/warning");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
@@ -79,7 +80,7 @@ const useAggregatedData = () => {
             throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+            (0, _warning.warnOnce)(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
           }
         }
         const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);