@mui/x-charts 8.9.0 → 8.10.0

package/esm/BarChart/useBarChartProps.d.ts

@@ -8,7 +8,7 @@ import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
 /**
  * A helper function that extracts BarChartProps from the input props

package/esm/ChartContainer/ChartContainer.js

@@ -234,6 +234,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
@@ -286,6 +290,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     endAngle: PropTypes.number,
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
@@ -361,6 +369,54 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }), PropTypes.shape({
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    endAngle: PropTypes.number,
+    fill: PropTypes.string,
+    height: PropTypes.number,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelGap: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    startAngle: PropTypes.number,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
@@ -659,6 +715,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -710,6 +770,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -783,6 +847,53 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    height: PropTypes.number,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -1045,6 +1156,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1095,6 +1210,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    groups: PropTypes.arrayOf(PropTypes.shape({
+      getValue: PropTypes.func.isRequired,
+      tickSize: PropTypes.number
+    })),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1166,6 +1285,52 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -43,9 +43,7 @@ export default function ChartsXHighlight(props) {
       }
     }
     return /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
-      // @ts-expect-error, xScale value is checked in the statement above
-      , {
+      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
         d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
         className: classes.root,
         ownerState: {

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -44,9 +44,7 @@ export default function ChartsYHighlight(props) {
     }
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-        d: `M ${left} ${
-        // @ts-expect-error, yScale value is checked in the statement above
-        yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+        d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
         className: classes.root,
         ownerState: {
           axisHighlight: 'band'

package/esm/ChartsTooltip/ChartsTooltip.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ChartsTooltipContainerProps } from "./ChartsTooltipContainer.js";
-export interface ChartsTooltipProps extends Omit<ChartsTooltipContainerProps, 'children'> {}
+import { TriggerOptions } from "./utils.js";
+export interface ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> extends Omit<ChartsTooltipContainerProps<T>, 'children'> {}
 /**
  * Demos:
  *

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -189,9 +189,9 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   transition: PropTypes.bool,
   /**
    * Select the kind of tooltip to display
-   * - 'item': Shows data about the item below the mouse.
-   * - 'axis': Shows values associated with the hovered x value
-   * - 'none': Does not display tooltip
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
    * @default 'axis'
    */
   trigger: PropTypes.oneOf(['axis', 'item', 'none'])

package/esm/ChartsTooltip/ChartsTooltipContainer.d.ts

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { PopperProps } from '@mui/material/Popper';
 import { TriggerOptions } from "./utils.js";
 import { ChartsTooltipClasses } from "./chartsTooltipClasses.js";
-export interface ChartsTooltipContainerProps extends Partial<PopperProps> {
+export interface ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> extends Partial<PopperProps> {
   /**
    * Select the kind of tooltip to display
-   * - 'item': Shows data about the item below the mouse.
-   * - 'axis': Shows values associated with the hovered x value
-   * - 'none': Does not display tooltip
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
    * @default 'axis'
    */
-  trigger?: TriggerOptions;
+  trigger?: T;
   /**
    * Override or extend the styles applied to the component.
    */

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -295,9 +295,9 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
   transition: PropTypes.bool,
   /**
    * Select the kind of tooltip to display
-   * - 'item': Shows data about the item below the mouse.
-   * - 'axis': Shows values associated with the hovered x value
-   * - 'none': Does not display tooltip
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
    * @default 'axis'
    */
   trigger: PropTypes.oneOf(['axis', 'item', 'none'])

package/esm/{internals/components/ChartsWrapper → ChartsWrapper}/ChartsWrapper.d.ts

@@ -1,9 +1,17 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
-import { Direction } from "../../../ChartsLegend/index.js";
-import { Position } from "../../../models/index.js";
+import { Direction } from "../ChartsLegend/index.js";
+import { Position } from "../models/index.js";
 export interface ChartsWrapperProps {
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
   legendPosition?: Position;
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
   legendDirection?: Direction;
   /**
    * If `true`, the chart wrapper set `height: 100%`.
@@ -14,10 +22,11 @@ export interface ChartsWrapperProps {
   sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Wrapper for the charts components.
  * Its main purpose is to position the HTML legend in the correct place.
  */
 declare function ChartsWrapper(props: ChartsWrapperProps): React.JSX.Element;
+declare namespace ChartsWrapper {
+  var propTypes: any;
+}
 export { ChartsWrapper };

package/esm/{internals/components/ChartsWrapper → ChartsWrapper}/ChartsWrapper.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system/createStyled';
-import { useChartRootRef } from "../../../hooks/useChartRootRef.js";
-import { useStore } from "../../store/useStore.js";
-import { useSelector } from "../../store/useSelector.js";
-import { selectorChartPropsSize } from "../../plugins/corePlugins/useChartDimensions/index.js";
+import { useChartRootRef } from "../hooks/useChartRootRef.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -60,8 +61,6 @@ const Root = styled('div', {
 }));
 
 /**
- * @ignore - internal component.
- *
  * Wrapper for the charts components.
  * Its main purpose is to position the HTML legend in the correct place.
  */
@@ -84,4 +83,30 @@ function ChartsWrapper(props) {
     children: children
   });
 }
+process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically: PropTypes.bool,
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
+  legendDirection: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
+  legendPosition: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['center', 'end', 'start']),
+    vertical: PropTypes.oneOf(['bottom', 'middle', 'top'])
+  }),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export { ChartsWrapper };

package/esm/ChartsXAxis/ChartsGroupedXAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsXAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsGroupedXAxis(inProps: ChartsXAxisProps): React.JSX.Element | null;
+export { ChartsGroupedXAxis };

package/esm/ChartsXAxis/ChartsGroupedXAxis.js

@@ -0,0 +1,136 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
+import { TICK_LABEL_GAP, XAxisRoot } from "./utilities.js";
+import { useTicksGrouped } from "../hooks/useTicksGrouped.js";
+import { useAxisProps } from "./useAxisProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_GROUPING_CONFIG = {
+  tickSize: 6
+};
+const getGroupingConfig = (groups, groupIndex, tickSize) => {
+  const config = groups[groupIndex] ?? {};
+  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
+  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
+  return _extends({}, DEFAULT_GROUPING_CONFIG, config, {
+    tickSize: config.tickSize ?? calculatedTickSize
+  });
+};
+
+/**
+ * @ignore - internal component.
+ */
+function ChartsGroupedXAxis(inProps) {
+  const {
+    xScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps
+  } = useAxisProps(inProps);
+  if (!isBandScale(xScale)) {
+    throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
+  }
+  const {
+    position,
+    disableLine,
+    disableTicks,
+    label,
+    tickSize,
+    valueFormatter,
+    slotProps,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    sx,
+    offset,
+    height: axisHeight
+  } = defaultizedProps;
+  const groups = defaultizedProps.groups;
+  const drawingArea = useDrawingArea();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = useChartContext();
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+  const xTicks = useTicksGrouped({
+    scale: xScale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    direction: 'x',
+    groups
+  });
+
+  // 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.
+  // - The position is set to 'none'.
+  if (skipAxisRendering) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(XAxisRoot, {
+    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)), xTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset
+      } = item;
+      const xTickLabel = labelOffset ?? 0;
+      const showTick = instance.isXInside(tickOffset);
+      const tickLabel = item.formattedValue;
+      const ignoreTick = item.ignoreTick ?? false;
+      const groupIndex = item.groupIndex ?? 0;
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const tickYSize = positionSign * groupConfig.tickSize;
+      const labelPositionY = positionSign * (groupConfig.tickSize + TICK_LABEL_GAP);
+      return /*#__PURE__*/_jsxs("g", {
+        transform: `translate(${tickOffset}, 0)`,
+        className: classes.tickContainer,
+        "data-group-index": groupIndex,
+        children: [!disableTicks && !ignoreTick && showTick && /*#__PURE__*/_jsx(Tick, _extends({
+          y2: tickYSize,
+          className: classes.tick
+        }, slotProps?.axisTick)), tickLabel !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
+          x: xTickLabel,
+          y: labelPositionY
+        }, axisTickLabelProps, {
+          text: tickLabel
+        }))]
+      }, index);
+    }), label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}
+export { ChartsGroupedXAxis };

package/esm/ChartsXAxis/ChartsSingleXAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsXAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsSingleXAxis(inProps: ChartsXAxisProps): React.JSX.Element | null;
+export { ChartsSingleXAxis };