@mui/x-charts 6.0.0-alpha.15 → 6.0.0-alpha.16

package/legacy/BarChart/BarPlot.js

@@ -1,12 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useTransition } from '@react-spring/web';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -16,7 +19,6 @@ import { isBandScaleConfig } from '../models/axis';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize(_ref) {
   var W = _ref.bandWidth,
     N = _ref.numberOfGroups,
@@ -34,12 +36,14 @@ function getBandSize(_ref) {
     offset: offset
   };
 }
-function BarPlot(props) {
-  var seriesData = React.useContext(SeriesContext).bar;
+var useCompletedData = function useCompletedData() {
+  var _React$useContext$bar;
+  var seriesData = (_React$useContext$bar = React.useContext(SeriesContext).bar) != null ? _React$useContext$bar : {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
   var axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
   var series = seriesData.series,
     stackingGroups = seriesData.stackingGroups;
   var xAxis = axisData.xAxis,
@@ -48,64 +52,143 @@ function BarPlot(props) {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(function (_ref2, groupIndex) {
-      var groupIds = _ref2.ids;
-      return groupIds.flatMap(function (seriesId) {
-        var _series$seriesId$xAxi, _series$seriesId$yAxi;
-        var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
-        var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
-        var xAxisConfig = xAxis[xAxisKey];
-        var yAxisConfig = yAxis[yAxisKey];
-        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 data = stackingGroups.flatMap(function (_ref2, groupIndex) {
+    var groupIds = _ref2.ids;
+    return groupIds.flatMap(function (seriesId) {
+      var _series$seriesId$xAxi, _series$seriesId$yAxi;
+      var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
+      var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
+      var xAxisConfig = xAxis[xAxisKey];
+      var yAxisConfig = yAxis[yAxisKey];
+      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, "\""));
         }
-        var xScale = xAxisConfig.scale;
-        var yScale = yAxisConfig.scale;
-        var bandWidth = baseScaleConfig.scale.bandwidth();
-        var _getBandSize = getBandSize({
-            bandWidth: bandWidth,
-            numberOfGroups: stackingGroups.length,
-            gapRatio: baseScaleConfig.barGapRatio
-          }),
-          barWidth = _getBandSize.barWidth,
-          offset = _getBandSize.offset;
-        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, _yAxis$yAxisKey$data;
-          var baseline = Math.min.apply(Math, _toConsumableArray(values));
-          var value = Math.max.apply(Math, _toConsumableArray(values));
-          return /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
-            dataIndex: dataIndex,
-            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
-          }, props), "".concat(seriesId, "-").concat(dataIndex));
-        });
+        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;
+      var bandWidth = baseScaleConfig.scale.bandwidth();
+      var _getBandSize = getBandSize({
+          bandWidth: bandWidth,
+          numberOfGroups: stackingGroups.length,
+          gapRatio: baseScaleConfig.barGapRatio
+        }),
+        barWidth = _getBandSize.barWidth,
+        offset = _getBandSize.offset;
+      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, _yAxis$yAxisKey$data;
+        var bottom = Math.min.apply(Math, _toConsumableArray(values));
+        var top = Math.max.apply(Math, _toConsumableArray(values));
+        return {
+          bottom: bottom,
+          top: top,
+          seriesId: seriesId,
+          dataIndex: dataIndex,
+          layout: series[seriesId].layout,
+          x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(bottom),
+          y: verticalLayout ? yScale(top) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
+          xOrigin: xScale(0),
+          yOrigin: yScale(0),
+          height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth,
+          width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)),
+          color: color,
+          highlightScope: series[seriesId].highlightScope
+        };
       });
+    });
+  });
+  return data;
+};
+var getOutStyle = function getOutStyle(_ref3) {
+  var layout = _ref3.layout,
+    yOrigin = _ref3.yOrigin,
+    x = _ref3.x,
+    width = _ref3.width,
+    y = _ref3.y,
+    xOrigin = _ref3.xOrigin,
+    height = _ref3.height;
+  return _extends({}, layout === 'vertical' ? {
+    y: yOrigin,
+    x: x,
+    height: 0,
+    width: width
+  } : {
+    y: y,
+    x: xOrigin,
+    height: height,
+    width: 0
+  });
+};
+var getInStyle = function getInStyle(_ref4) {
+  var x = _ref4.x,
+    width = _ref4.width,
+    y = _ref4.y,
+    height = _ref4.height;
+  return {
+    y: y,
+    x: x,
+    height: height,
+    width: width
+  };
+};
+
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+ */
+function BarPlot(props) {
+  var completedData = useCompletedData();
+  var skipAnimation = props.skipAnimation,
+    other = _objectWithoutProperties(props, _excluded);
+  var transition = useTransition(completedData, {
+    keys: function keys(bar) {
+      return "".concat(bar.seriesId, "-").concat(bar.dataIndex);
+    },
+    from: getOutStyle,
+    leave: getOutStyle,
+    enter: getInStyle,
+    update: getInStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: transition(function (style, _ref5) {
+      var seriesId = _ref5.seriesId,
+        dataIndex = _ref5.dataIndex,
+        color = _ref5.color,
+        highlightScope = _ref5.highlightScope;
+      return /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        highlightScope: highlightScope,
+        color: color
+      }, other, {
+        style: style
+      }));
     })
   });
 }
@@ -114,6 +197,11 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/legacy/ChartContainer/index.js

@@ -3,6 +3,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
+import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
@@ -23,6 +24,8 @@ export var ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContaine
     children = props.children;
   var svgRef = React.useRef(null);
   var handleRef = useForkRef(ref, svgRef);
+  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,

package/legacy/ChartsAxis/ChartsAxis.js

@@ -95,11 +95,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -118,11 +122,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -141,11 +149,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -174,11 +186,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/legacy/ChartsLegend/ChartsLegend.js

@@ -1,7 +1,8 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["label"];
+var _excluded = ["rotate", "dominantBaseline"],
+  _excluded2 = ["label"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import { NoSsr } from '@mui/base/NoSsr';
@@ -80,14 +81,22 @@ function DefaultChartsLegend(props) {
   var labelStyle = React.useMemo(function () {
     return _extends({}, theme.typography.subtitle1, {
       color: 'inherit',
+      dominantBaseline: 'central',
+      textAnchor: 'start',
       fill: (theme.vars || theme).palette.text.primary,
       lineHeight: 1
     }, inLabelStyle);
-  }, [inLabelStyle, theme]);
+  },
+  // To say to TS that the dominantBaseline and textAnchor are correct
+  [inLabelStyle, theme]);
   var padding = React.useMemo(function () {
     return getStandardizedPadding(paddingProps);
   }, [paddingProps]);
-  var getItemSpace = React.useCallback(function (label, style) {
+  var getItemSpace = React.useCallback(function (label) {
+    var inStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var rotate = inStyle.rotate,
+      dominantBaseline = inStyle.dominantBaseline,
+      style = _objectWithoutProperties(inStyle, _excluded);
     var linesSize = getWordsByLines({
       style: style,
       needsComputation: true,
@@ -120,7 +129,7 @@ function DefaultChartsLegend(props) {
     var rowMaxHeight = [0];
     var seriesWithRawPosition = seriesToDisplay.map(function (_ref) {
       var label = _ref.label,
-        other = _objectWithoutProperties(_ref, _excluded);
+        other = _objectWithoutProperties(_ref, _excluded2);
       var itemSpace = getItemSpace(label, labelStyle);
       var rep = _extends({}, other, {
         label: label,
@@ -229,8 +238,6 @@ function DefaultChartsLegend(props) {
             fill: color
           }), /*#__PURE__*/_jsx(ChartsText, {
             style: labelStyle,
-            dominantBaseline: "central",
-            textAnchor: "start",
             text: label,
             x: itemMarkWidth + markGap,
             y: 0

package/legacy/ChartsXAxis/ChartsXAxis.js

@@ -1,4 +1,5 @@
 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", "tickNumber"];
 import * as React from 'react';
@@ -11,7 +12,9 @@ import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../internals/components/ChartsText';
+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) {
@@ -27,12 +30,65 @@ 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
 };
 function ChartsXAxis(inProps) {
@@ -46,17 +102,22 @@ function ChartsXAxis(inProps) {
     xScale = _React$useContext$xAx.scale,
     tickNumber = _React$useContext$xAx.tickNumber,
     settings = _objectWithoutProperties(_React$useContext$xAx, _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
@@ -67,16 +128,7 @@ function ChartsXAxis(inProps) {
     width = _React$useContext2.width,
     height = _React$useContext2.height;
   var tickSize = disableTicks ? 4 : tickSizeProp;
-  var xTicks = useTicks({
-    scale: xScale,
-    tickNumber: tickNumber,
-    valueFormatter: valueFormatter
-  });
-  var positionSigne = position === 'bottom' ? 1 : -1;
-  var labelRefPoint = {
-    x: left + width / 2,
-    y: positionSigne * (tickFontSize + tickSize + 10)
-  };
+  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;
@@ -85,27 +137,40 @@ function ChartsXAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
     additionalProps: {
-      textAnchor: 'middle',
-      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-      style: {
-        fontSize: tickFontSize
-      },
+      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,
+    tickNumber: tickNumber,
+    valueFormatter: valueFormatter,
+    tickInterval: tickInterval
+  });
+  var xTicksWithDimension = addLabelDimension(xTicks, {
+    tickLabelStyle: axisTickLabelProps.style,
+    tickLabelInterval: tickLabelInterval,
+    isMounted: isMounted
+  });
+  var labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * (tickSize + 22)
+  };
   var axisLabelProps = useSlotProps({
     elementType: Label,
     externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
     additionalProps: {
-      textAnchor: 'middle',
-      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-      style: {
-        fontSize: labelFontSize,
-        transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
-      },
-      className: classes.label
+      style: _extends({
+        fontSize: labelFontSize != null ? labelFontSize : 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
+      }, labelStyle)
     },
     ownerState: {}
   });
@@ -116,22 +181,22 @@ 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")
+          y: yTickLabel
         }, axisTickLabelProps, {
           text: formattedValue.toString()
         }))]
@@ -179,8 +244,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.
    */
@@ -203,8 +273,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.