@mui/x-charts 8.9.2 → 8.10.0

package/BarChart/BarChart.js

@@ -271,6 +271,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -322,6 +326,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -704,6 +712,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -754,6 +766,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,

package/CHANGELOG.md

@@ -5,6 +5,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.0
+
+_Aug 8, 2025_
+
+We'd like to extend a big thank you to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 [`FunnelChart`](https://mui.com/x/react-charts/funnel/) marked as stable
+- 📈 [Zoom slider](https://mui.com/x/react-charts/zoom-and-pan/#zoom-slider) and [Preview](https://mui.com/x/react-charts/zoom-and-pan/#preview) marked as stable
+- 📈 Supporting [label groups](https://mui.com/x/react-charts/axis/#grouped-axes) in band and point axis
+- 🌎 Improve Norwegian Nynorsk (nn-NO) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@AnderzL7, @aqeelat, @dwrth, @noobyogi0010, @nusr, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @oliviertassinari, @rita-codes, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.0`
+
+- [DataGrid] Move spread operator in `BaseSelect` to allow `variant` change (#19026) @dwrth
+- [DataGrid] Use `use-sync-external-store` shim (#19063) @romgrk
+- [DataGrid] Allow skipping cache in `dataSource.fetchRows()` API method (#18904) @MBilalShafi
+- [DataGrid] Do not call `preProcessEditCellProps()` if cell is not editable based on `isCellEditable()` (#18405) @nusr
+- [DataGrid] Fix `renderCountry` throwing an error when used in tree data (#19068) @cherniavskii
+- [DataGrid] Fix performance issue for root level "select all" (#19015) @MBilalShafi
+- [DataGrid] Fix pagination `slotProps` being ignored by the grid (#19095) @romgrk
+- [l10n] Improve Norwegian Nynorsk (nn-NO) locale (#19076) @AnderzL7
+
+#### `@mui/x-data-grid-pro@8.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.10.0`, plus:
+
+- [DataGridPro] Fix row reorder not working with column reorder disabled (#19016) @MBilalShafi
+- [DataGridPro] Fix header filters cache sharing issue (#19090) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.10.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.10.0`, plus:
+
+- [DataGridPremium] Allow additional derived columns customization via `valueFormatter` (#18982) @arminmeh
+- [DataGridPremium] Fix complex `singleSelect` columns not working in pivot model (#18971) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+- [pickers] `MuiPickersLayout-toolbar` is overlapping the Calendar in RTL `MobileDatePicker` variant (#18981) @rita-codes
+
+#### `@mui/x-date-pickers-pro@8.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.10.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.10.0`
+
+- [charts] Add `groups` to `band` and `point` axis config (#18766) @JCQuintas
+- [charts] Animation example using `motion` library (#18993) @JCQuintas
+- [charts] Deprecate `Unstable_` radar exports (#19079) @JCQuintas
+- [charts] Improve grouped axis logic (#19069) @JCQuintas
+- [charts] Fix type assertion in axis highlight components (#19060) @sai6855
+- [charts] Remove unnecessary type assertion in tooltip `valueFormatter` in heatmap (#19047) @sai6855
+
+#### `@mui/x-charts-pro@8.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.10.0`, plus:
+
+- [charts-pro] Fix `slotProps.tooltip.trigger` not respected in `ScatterChartPro` and `FunnelChart` (#18902) @bernardobelchior
+- [charts-pro] Fix zoom filtering adjusting axis too soon (#18992) @bernardobelchior
+- [charts-pro] Mark `FunnelChart` as stable (#19048) @JCQuintas
+- [charts-pro] Mark zoom slider and preview as stable (#19049) @JCQuintas
+- [charts-pro] Refactor `createAxisFilterMapper` (#18998) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.10.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add CSS bundler breaking change to migration guide (#17436) @romgrk
+- [docs] `RichTreeViewPro` demo for dragging via custom drag-handle is not working properly (#19008) @rita-codes
+- [docs] Fix broken link to D3 in Charts (#19020) @oliviertassinari
+- [docs] Revise the Charts Animation doc (#18990) @mapache-salvaje
+- [docs] Fix incorrect code in line chart preview (#19023) @noobyogi0010
+- [docs] Improve bundling instructions for the Data Grid (#19065) @romgrk
+- [docs] Reduce image size in the inventory grid demo (#19004) @arminmeh
+
+### Core
+
+- [core] Fix ESLint reference name @oliviertassinari
+
+### Miscellaneous
+
+- [infra] Remove bundle size tracking for subpaths (#19072) @Janpot
+- [infra] Accept `PORT` env on `docs:dev` script (#19014) @JCQuintas
+- [infra] Skip codesandbox iframe demos in regressions tests (#18970) @cherniavskii
+- [infra] Remove package.json `module` field (#18961) @Janpot
+- [internal] Remove peer dependency on `@mui/system` (#19062) @aqeelat
+
 ## 8.9.2
 
 _Jul 31, 2025_
@@ -418,8 +533,8 @@ Same changes as in `@mui/x-tree-view@8.7.0`, plus:
 
 - [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
 - [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
-- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
-- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [code-infra] Migrate to flat ESLint config (#18562) @brijeshb42
+- [code-infra] Refactor ESLint config (#18643) @LukasTy
 - [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
 - [infra] Move pushArgos script to code-infra (#18667) @Janpot
 - [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
@@ -1333,7 +1448,7 @@ Same changes as in `@mui/x-tree-view@8.2.0`.
 - [core] Fix all Vale errors @oliviertassinari
 - [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
 - [core] Remove empty version (#17582) @oliviertassinari
-- [core] Remove eslint from codemod spec files (#17443) @alexfauquette
+- [core] Remove ESLint from codemod spec files (#17443) @alexfauquette
 - [core] Remove unnecessary versions (#17597) @oliviertassinari
 - [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
 - [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
@@ -6827,7 +6942,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`.
 
 ### Core
 
-- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [core] Add ESLint rule to restrict import from `../internals` root (#13633) @JCQuintas
 - [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
 - [license] Allow usage of Charts and Tree View Pro package for old premium licenses (#13619) @flaviendelangle
 
@@ -6965,7 +7080,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`.
 
 - [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
 - [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
-- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Fix ESLint for react compiler (#13444) @alexfauquette
 - [charts] Improve themeAugmentation typing (#13433) @noraleonte
 - [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
 - [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
@@ -7512,7 +7627,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle
 - [code-infra] Change package manager to `pnpm` (#11875) @LukasTy
-- [code-infra] Closer sync with eslint config of codebase (#12864) @oliviertassinari
+- [code-infra] Closer sync with ESLint config of codebase (#12864) @oliviertassinari
 - [support-infra] Add release announcement to GitHub workflows (#11867) (#12843) @michelengelen
 
 ## 7.3.0

package/ChartContainer/ChartContainer.js

@@ -241,6 +241,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
@@ -293,6 +297,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     endAngle: _propTypes.default.number,
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
@@ -714,6 +722,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -765,6 +777,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -1147,6 +1163,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1197,6 +1217,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getValue: _propTypes.default.func.isRequired,
+      tickSize: _propTypes.default.number
+    })),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -47,9 +47,7 @@ var _jsxRuntime = require("react/jsx-runtime");
       }
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
-      // @ts-expect-error, xScale value is checked in the statement above
-      , {
+      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.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/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -48,9 +48,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.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/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/ChartsTooltip/ChartsTooltip.js

@@ -196,9 +196,9 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   transition: _propTypes.default.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.default.oneOf(['axis', 'item', 'none'])

package/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/ChartsTooltip/ChartsTooltipContainer.js

@@ -302,9 +302,9 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
   transition: _propTypes.default.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.default.oneOf(['axis', 'item', 'none'])

package/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/ChartsXAxis/ChartsGroupedXAxis.js

@@ -0,0 +1,142 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsGroupedXAxis = ChartsGroupedXAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _isBandScale = require("../internals/isBandScale");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _utilities = require("./utilities");
+var _useTicksGrouped = require("../hooks/useTicksGrouped");
+var _useAxisProps = require("./useAxisProps");
+var _jsxRuntime = require("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 (0, _extends2.default)({}, 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
+  } = (0, _useAxisProps.useAxisProps)(inProps);
+  if (!(0, _isBandScale.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 = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+  const xTicks = (0, _useTicksGrouped.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__*/(0, _jsxRuntime.jsxs)(_utilities.XAxisRoot, {
+    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)), 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 + _utilities.TICK_LABEL_GAP);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        transform: `translate(${tickOffset}, 0)`,
+        className: classes.tickContainer,
+        "data-group-index": groupIndex,
+        children: [!disableTicks && !ignoreTick && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+          y2: tickYSize,
+          className: classes.tick
+        }, slotProps?.axisTick)), tickLabel !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+          x: xTickLabel,
+          y: labelPositionY
+        }, axisTickLabelProps, {
+          text: tickLabel
+        }))]
+      }, index);
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/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 };

package/ChartsXAxis/ChartsSingleXAxis.js

@@ -0,0 +1,144 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsSingleXAxis = ChartsSingleXAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useIsHydrated = require("../hooks/useIsHydrated");
+var _domUtils = require("../internals/domUtils");
+var _useTicks = require("../hooks/useTicks");
+var _useMounted = require("../hooks/useMounted");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _shortenLabels = require("./shortenLabels");
+var _getVisibleLabels = require("./getVisibleLabels");
+var _utilities = require("./utilities");
+var _useAxisProps = require("./useAxisProps");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */function ChartsSingleXAxis(inProps) {
+  const {
+    xScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    reverse,
+    isRtl
+  } = (0, _useAxisProps.useAxisProps)(inProps);
+  const isMounted = (0, _useMounted.useMounted)();
+  const {
+    position,
+    disableLine,
+    disableTicks,
+    label,
+    tickSize: tickSizeProp,
+    valueFormatter,
+    slotProps,
+    tickInterval,
+    tickLabelInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    tickLabelMinGap,
+    sx,
+    offset,
+    height: axisHeight
+  } = defaultizedProps;
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
+  const tickSize = disableTicks ? 4 : tickSizeProp;
+  const xTicks = (0, _useTicks.useTicks)({
+    scale: xScale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    direction: 'x'
+  });
+  const visibleLabels = (0, _getVisibleLabels.getVisibleLabels)(xTicks, {
+    tickLabelStyle: axisTickLabelProps.style,
+    tickLabelInterval,
+    tickLabelMinGap,
+    reverse,
+    isMounted,
+    isXInside: instance.isXInside
+  });
+
+  // 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;
+  }
+  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+
+  /* If there's an axis title, the tick labels have less space to render  */
+  const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
+  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.XAxisRoot, {
+    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)), xTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset
+      } = item;
+      const xTickLabel = labelOffset ?? 0;
+      const yTickLabel = positionSign * (tickSize + _utilities.TICK_LABEL_GAP);
+      const showTick = instance.isXInside(tickOffset);
+      const tickLabel = tickLabels.get(item);
+      const showTickLabel = visibleLabels.has(item);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        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)), tickLabel !== undefined && showTickLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+          x: xTickLabel,
+          y: yTickLabel
+        }, axisTickLabelProps, {
+          text: tickLabel
+        }))]
+      }, index);
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}