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

package/esm/ChartsAxis/ChartsAxis.js

@@ -1,31 +1,11 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartsXAxis } from "../ChartsXAxis/index.js";
 import { ChartsYAxis } from "../ChartsYAxis/index.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getAxisId = (propsValue, defaultAxisId) => {
-  if (propsValue == null) {
-    return null;
-  }
-  if (typeof propsValue === 'object') {
-    return propsValue.axisId ?? defaultAxisId ?? null;
-  }
-  return propsValue;
-};
-const mergeProps = (axisConfig, slots, slotProps) => {
-  return typeof axisConfig === 'object' ? _extends({}, axisConfig, {
-    slots: _extends({}, slots, axisConfig?.slots),
-    slotProps: _extends({}, slotProps, axisConfig?.slotProps)
-  }) : {
-    slots,
-    slotProps
-  };
-};
-
 /**
  * Demos:
  *
@@ -37,55 +17,37 @@ const mergeProps = (axisConfig, slots, slotProps) => {
  */
 function ChartsAxis(props) {
   const {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   } = props;
   const {
-    xAxis,
-    xAxisIds
+    xAxisIds,
+    xAxis
   } = useXAxes();
   const {
-    yAxis,
-    yAxisIds
+    yAxisIds,
+    yAxis
   } = useYAxes();
-  const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
-  const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
-  const topId = getAxisId(topAxis, xAxisIds[0]);
-  const rightId = getAxisId(rightAxis, yAxisIds[0]);
-  if (topId !== null && !xAxis[topId]) {
-    throw new Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (leftId !== null && !yAxis[leftId]) {
-    throw new Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (rightId !== null && !yAxis[rightId]) {
-    throw new Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
-  }
-  if (bottomId !== null && !xAxis[bottomId]) {
-    throw new Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
-  }
-  const topAxisProps = mergeProps(topAxis, slots, slotProps);
-  const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
-  const leftAxisProps = mergeProps(leftAxis, slots, slotProps);
-  const rightAxisProps = mergeProps(rightAxis, slots, slotProps);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [topId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, topAxisProps, {
-      position: "top",
-      axisId: topId
-    })), bottomId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, bottomAxisProps, {
-      position: "bottom",
-      axisId: bottomId
-    })), leftId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, leftAxisProps, {
-      position: "left",
-      axisId: leftId
-    })), rightId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, rightAxisProps, {
-      position: "right",
-      axisId: rightId
-    }))]
+    children: [xAxisIds.map(axisId => {
+      if (!xAxis[axisId].position || xAxis[axisId].position === 'none') {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(ChartsXAxis, {
+        slots: slots,
+        slotProps: slotProps,
+        axisId: axisId
+      }, axisId);
+    }), yAxisIds.map(axisId => {
+      if (!yAxis[axisId].position || yAxis[axisId].position === 'none') {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(ChartsYAxis, {
+        slots: slots,
+        slotProps: slotProps,
+        axisId: axisId
+      }, axisId);
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
@@ -93,24 +55,6 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * 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.oneOfType([PropTypes.object, PropTypes.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.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * 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.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The props used for each component slot.
    * @default {}
@@ -120,12 +64,6 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: PropTypes.object,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+  slots: PropTypes.object
 } : void 0;
 export { ChartsAxis };

package/esm/ChartsAxis/axisClasses.d.ts

@@ -7,7 +7,11 @@ export interface ChartsAxisClasses {
   tickContainer: string;
   /** Styles applied to ticks. */
   tick: string;
-  /** Styles applied to ticks label. */
+  /** Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
   tickLabel: string;
   /** Styles applied to the group containing the axis label. */
   label: string;

package/esm/ChartsLabel/ChartsLabelMark.d.ts

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { ChartsLabelMarkClasses } from "./labelMarkClasses.js";
+export interface ChartsLabelCustomMarkProps {
+  className?: string;
+  /** Color of the series this mark refers to. */
+  color?: string;
+}
 export interface ChartsLabelMarkProps {
   /**
    * The type of the mark.
    * @default 'square'
    */
-  type?: 'square' | 'circle' | 'line';
+  type?: 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
   /**
    * The color of the mark.
    */

package/esm/ChartsLabel/ChartsLabelMark.js

@@ -20,8 +20,11 @@ const Root = styled('div', {
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
+    width: 14,
+    height: 14,
     [`&.${labelMarkClasses.line}`]: {
       width: 16,
+      height: 'unset',
       display: 'flex',
       alignItems: 'center',
       [`.${labelMarkClasses.mask}`]: {
@@ -44,7 +47,13 @@ const Root = styled('div', {
       overflow: 'hidden'
     },
     svg: {
-      display: 'block',
+      display: 'block'
+    },
+    [`& .${labelMarkClasses.mask} > *`]: {
+      height: '100%',
+      width: '100%'
+    },
+    [`& .${labelMarkClasses.mask}`]: {
       height: '100%',
       width: '100%'
     }
@@ -68,6 +77,7 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
       classes
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const Component = type;
   return /*#__PURE__*/_jsx(Root, _extends({
     className: clsx(classes?.root, className),
     ownerState: props,
@@ -76,7 +86,10 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
   }, other, {
     children: /*#__PURE__*/_jsx("div", {
       className: classes?.mask,
-      children: /*#__PURE__*/_jsx("svg", {
+      children: typeof Component === 'function' ? /*#__PURE__*/_jsx(Component, {
+        className: classes?.fill,
+        color: color
+      }) : /*#__PURE__*/_jsx("svg", {
         viewBox: "0 0 24 24",
         preserveAspectRatio: type === 'line' ? 'none' : undefined,
         children: /*#__PURE__*/_jsx("rect", {

package/esm/ChartsLabel/index.d.ts

@@ -1,4 +1,4 @@
-export type { ChartsLabelMarkProps } from './ChartsLabelMark';
+export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from './ChartsLabelMark';
 export { labelClasses } from "./labelClasses.js";
 export type { ChartsLabelClasses } from './labelClasses';
 export { labelMarkClasses } from "./labelMarkClasses.js";

package/esm/ChartsLabel/index.js

@@ -1,6 +1,3 @@
-// export * from './ChartsLabel';
-
-// export * from './ChartsLabelGradient';
 export { labelClasses } from "./labelClasses.js";
 export { labelMarkClasses } from "./labelMarkClasses.js";
 export { labelGradientClasses } from "./labelGradientClasses.js";

package/esm/ChartsLabel/labelGradientClasses.d.ts

@@ -13,4 +13,4 @@ export interface ChartsLabelGradientClasses {
 }
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"fill" | "mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;

package/esm/ChartsLabel/labelMarkClasses.d.ts

@@ -15,4 +15,4 @@ export interface ChartsLabelMarkClasses {
 }
 export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"fill" | "mask" | "root", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;

package/esm/ChartsLabel/labelMarkClasses.js

@@ -10,7 +10,7 @@ export const useUtilityClasses = props => {
     type
   } = props;
   const slots = {
-    root: ['root', type],
+    root: typeof type === 'function' ? ['root'] : ['root', type],
     mask: ['mask'],
     fill: ['fill']
   };

package/esm/ChartsLegend/chartsLegendClasses.d.ts

@@ -14,5 +14,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "series", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "series", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/esm/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -22,5 +22,5 @@ export interface ContinuousColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "minLabel" | "maxLabel" | "gradient", string>;
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
 export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/esm/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -24,5 +24,5 @@ export interface PiecewiseColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "item" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
 export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/esm/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
    */
   x: TValue;
 };
-export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "label" | "root", string>;
+export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
 export { ChartsXReferenceLine };

package/esm/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -8,6 +8,6 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
    */
   y: TValue;
 };
-export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "label" | "root", string>;
+export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
 export { ChartsYReferenceLine };

package/esm/ChartsTooltip/ChartsTooltipTable.js

@@ -13,7 +13,7 @@ export const ChartsTooltipPaper = styled('div', {
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape?.borderRadius,
   border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 

package/esm/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -23,4 +23,4 @@ export interface ChartsTooltipClasses {
 export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
 export declare function getChartsTooltipUtilityClass(slot: string): string;
 export declare const chartsTooltipClasses: ChartsTooltipClasses;
-export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"mark" | "table" | "root" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["scale", "tickNumber", "reverse"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -36,61 +36,68 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, 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 _extends({}, tick, {
+      return {
         width: 0,
         height: 0
-      });
+      };
     }
     const tickSizes = getWordsByLines({
       style,
       needsComputation: true,
       text: tick.formattedValue
     });
-    return _extends({}, 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) => _extends({}, 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 = 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 = 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 _extends({}, item, {
-        skipLabel: true
-      });
+      return false;
     }
-    previousTextLimit = textPosition + direction * (gapRatio * distance) / 2;
-    return item;
-  });
+    previousTextLimit = textPosition + direction * distance / 2;
+    return true;
+  }));
 }
 const XAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsXAxis',
@@ -98,10 +105,10 @@ const XAxisRoot = styled(AxisRoot, {
   overridesResolver: (props, styles) => styles.root
 })({});
 const defaultProps = {
-  position: 'bottom',
   disableLine: false,
   disableTicks: false,
-  tickSize: 6
+  tickSize: 6,
+  tickLabelMinGap: 4
 };
 
 /**
@@ -146,12 +153,12 @@ function ChartsXAxis(inProps) {
     tickLabelInterval,
     tickPlacement,
     tickLabelPlacement,
-    sx
+    tickLabelMinGap,
+    sx,
+    offset
   } = defaultizedProps;
   const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
-    theme
-  }));
+  const classes = useUtilityClasses(defaultizedProps);
   const {
     left,
     top,
@@ -171,7 +178,7 @@ function ChartsXAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
-      style: _extends({
+      style: _extends({}, theme.typography.caption, {
         fontSize: 12,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
@@ -188,11 +195,18 @@ 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,
@@ -215,44 +229,40 @@ 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)) {
+  // - The position is set to 'none'.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity) || position === 'none') {
     return null;
   }
   return /*#__PURE__*/_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__*/_jsx(Line, _extends({
       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__*/_jsxs("g", {
-        transform: `translate(${offset}, 0)`,
+        transform: `translate(${tickOffset}, 0)`,
         className: classes.tickContainer,
         children: [!disableTicks && showTick && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {
@@ -272,6 +282,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.oneOf(['x']),
   /**
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
@@ -304,10 +315,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The style applied to the axis label.
    */
   labelStyle: PropTypes.object,
-  /**
-   * Position of the axis.
-   */
-  position: PropTypes.oneOf(['bottom', 'top']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -341,6 +348,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 'auto'
    */
   tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.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.number,
   /**
    * The placement of ticks label. Can be the middle of the band, or the tick position.
    * Only used if scale is 'band'.