@mui/x-charts 9.7.0 → 9.8.0

package/CHANGELOG.md

@@ -1,5 +1,135 @@
 # Changelog
 
+## 9.8.0
+
+_Jul 2, 2026_
+
+We'd like to extend a big thank you to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🗺️ New [`MapImagePlot`](https://mui.com/x/react-charts/map/) for rendering raster base maps, with `onItemClick` support on map shapes (Premium)
+- 📊 New [`usePolarGeometry`](https://mui.com/x/react-charts/hooks/use-polar-geometry/) hook to build custom radial overlays
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @aromanio, @greymoth-jp, @mustafajw07, @timbuckley, @voidmatcha
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @joserodolfofreitas, @LukasTy, @mapache-salvaje, @michelengelen, @rita-codes, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.8.0`
+
+- [DataGrid] Prevent cell editing from resurrecting a deleted row (#22958) @Anexus5919
+- [DataGrid] Avoid reading `type` of `undefined` in `gridRowUtils` (#21808) @timbuckley
+- [DataGrid] Improved get started tutorial (#22911) @joserodolfofreitas
+- [l10n] Improve Japanese (ja-JP) locale (#23001) @greymoth-jp
+
+#### `@mui/x-data-grid-pro@9.8.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@9.8.0`.
+
+#### `@mui/x-data-grid-premium@9.8.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@9.8.0`, plus:
+
+- [DataGridPremium] Escape `singleSelect` values in Excel export with `escapeFormulas` enabled (#22851) @Anexus5919
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.8.0`
+
+- [pickers] Fix localized digit crash (#22995) @alexfauquette
+- [pickers] Flag the first and last visible day cell across year boundaries (#22981) @Anexus5919
+- [pickers] Use calendar day tokens in `AdapterMomentHijri` and `AdapterMomentJalaali` formats (#22974) @Anexus5919
+- [pickers] Use the Hijri day token in `AdapterMomentHijri` `normalDateWithWeekday` (#22972) @Anexus5919
+- [l10n] Improve Romanian (ro-RO) locale (#22969) @aromanio
+
+#### `@mui/x-date-pickers-pro@9.8.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@9.8.0`, plus:
+
+- [DateRangeCalendar] Fix auto month-switch across the year boundary (#22987) @Anexus5919
+
+### Charts
+
+#### `@mui/x-charts@9.8.0`
+
+- [charts] Decouple `d3-geo` from the universal tooltip (#23011) @sai6855
+- [charts] Deduplicate `getGroupingConfig` (#22889) @sai6855
+- [charts] Expose `usePolarGeometry` hook for radial overlays (#22892) @mustafajw07
+
+#### `@mui/x-charts-pro@9.8.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@9.8.0`.
+
+#### `@mui/x-charts-premium@9.8.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-charts-pro@9.8.0`, plus:
+
+- [charts-premium] Add `onItemClick` support for the Map shapes (#22876) @sai6855
+- [charts-premium] Replace `dataIndex` with `name` in map identifier (#22891) @sai6855
+- [charts-premium] Share helper function (#23030) @alexfauquette
+- [charts-premium] Extract shared WebGL utilities across bar/scatter/heatmap renderers (#22466) @sai6855
+- [charts-premium] Add `MapImagePlot` for raster base maps (#22977) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.8.0`
+
+- [TreeView] Fix extra selection event when clicking a collapsed parent item (#22249) @michelengelen
+- [TreeView] Enforce top-level type imports (#23034) @Janpot
+
+#### `@mui/x-tree-view-pro@9.8.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@9.8.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.4`
+
+- [scheduler] Enforce top-level type imports (#22931) @Janpot
+- [scheduler] Keep the occurrence date when editing only one recurring event (#23007) @Anexus5919
+- [scheduler] Track bundle size of scheduler packages (#22682) @flaviendelangle
+- [scheduler] Add `viewConfig` prop to limit displayed hours in the day and week views (#22929) @flaviendelangle
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.4`, plus:
+
+- [scheduler] Collapsible resources in the timeline (#22920) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.8.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add recipe for conditional master-detail panels (#22971) @michelengelen
+- [docs] Add recipe for describing active filters in the toolbar (#22970) @michelengelen
+- [docs] Add recipe for triggering clipboard copy from a button (#22967) @michelengelen
+- [docs] Clarify that `fieldRef.current.focusField()` is the canonical way to focus a field (#22937) @michelengelen
+- [docs][scheduler] Another copyediting pass across the Scheduler docs (#22619) @mapache-salvaje
+- [docs][charts] Add map example for arbitrary GeoJSON shapes (#22976) @JCQuintas
+- [docs][charts] Double point count in `ScatterAsyncRenderer` demo (#22906) @JCQuintas
+
+### Core
+
+- [code-infra] Fix tracking branch bug in release script (#22956) @michelengelen
+- [code-infra] Remove mark-duplicate workflow (#22994) @cherniavskii
+- [code-infra] Revert `nanoid@3.3.15` `minimumReleaseAge` exemption (#22953) @LukasTy
+
+### Miscellaneous
+
+- [internals] Fix `ERR_UNSUPPORTED_DIR_IMPORT` for `core-js-pure` in Node ESM (#22985) @michelengelen
+- [internals] Harden `useDisposable` React internals read with safeReact (#22986) @rita-codes
+- [internals] Replace core-js `DisposableStack` ponyfill with a minimal fallback (#23002) @sai6855
+- [test] Assert the edited `dateTime` cell value in the e2e edit test (#22982) @voidmatcha
+- [virtualizer] Remeasure scrollbars when layout changes (#22914) @arminmeh
+
 ## 9.7.0
 
 _Jun 25, 2026_
@@ -178,7 +308,6 @@ Same changes as in `@mui/x-charts-pro@9.6.0`, plus:
 - [charts-premium] Support maps tooltip positioned on items (#22648) @alexfauquette
 - [docs] Show how to export maps (#22837) @alexfauquette
 
-
 ### Tree View
 
 #### `@mui/x-tree-view@9.6.0`

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -25,6 +25,7 @@ var _warning = require("@mui/x-internals/warning");
 var _utils = require("./utils");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useStore = require("../internals/store/useStore");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartCartesianTooltip = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors");
@@ -56,10 +57,13 @@ const defaultAnchorByTrigger = {
   axis: 'chart',
   none: 'pointer'
 };
-const getPositionSelectorByAnchor = anchor => {
+
+// The axis and null selectors take a state the item selector's state is
+// assignable to, so they all converge to `TooltipItemPositionSelector`.
+const getPositionSelectorByAnchor = (anchor, selectorItemPosition) => {
   switch (anchor) {
     case 'node':
-      return _useChartTooltip.selectorChartsTooltipItemPosition;
+      return selectorItemPosition;
     case 'chart':
       return _useChartCartesianTooltip.selectorChartsTooltipAxisPosition;
     default:
@@ -125,7 +129,14 @@ function ChartsTooltipContainer(inProps) {
   const lastInteraction = store.use(_useChartInteraction.selectorChartsLastInteraction);
   const pointerAnchorUnavailable = lastInteraction === 'keyboard' || pointerType === null;
   const computedAnchor = pointerAnchorUnavailable ? defaultAnchorByTrigger[trigger] : anchor;
-  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor), props.position);
+
+  // A series type can override how its item tooltip is positioned (e.g. map
+  // shapes position from the geo projection); otherwise the generic item
+  // selector is used.
+  const tooltipItem = store.use(_useChartTooltip.selectorChartsTooltipItem);
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
+  const selectorItemPosition = tooltipItem && seriesConfig[tooltipItem.type]?.selectorTooltipItemPosition || _useChartTooltip.selectorChartsTooltipItemPosition;
+  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor, selectorItemPosition), props.position);
   const isTooltipNodeAnchored = itemPosition !== null;
   React.useEffect(() => {
     const svgElement = chartsLayerContainerRef.current;

package/ChartsTooltip/ChartsTooltipContainer.mjs

@@ -18,8 +18,9 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { useIsFineMainPointer } from "./utils.mjs";
 import { useUtilityClasses } from "./chartsTooltipClasses.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 import { selectorChartsLastInteraction, selectorChartsPointerType } from "../internals/plugins/featurePlugins/useChartInteraction/index.mjs";
-import { selectorChartsTooltipItemIsDefined, selectorChartsTooltipItemPosition } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
+import { selectorChartsTooltipItem, selectorChartsTooltipItemIsDefined, selectorChartsTooltipItemPosition } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
 import { selectorChartsInteractionAxisTooltip, selectorChartsTooltipAxisPosition } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors.mjs";
 import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 import { useAxisSystem } from "../hooks/useAxisSystem.mjs";
@@ -49,10 +50,13 @@ const defaultAnchorByTrigger = {
   axis: 'chart',
   none: 'pointer'
 };
-const getPositionSelectorByAnchor = anchor => {
+
+// The axis and null selectors take a state the item selector's state is
+// assignable to, so they all converge to `TooltipItemPositionSelector`.
+const getPositionSelectorByAnchor = (anchor, selectorItemPosition) => {
   switch (anchor) {
     case 'node':
-      return selectorChartsTooltipItemPosition;
+      return selectorItemPosition;
     case 'chart':
       return selectorChartsTooltipAxisPosition;
     default:
@@ -118,7 +122,14 @@ function ChartsTooltipContainer(inProps) {
   const lastInteraction = store.use(selectorChartsLastInteraction);
   const pointerAnchorUnavailable = lastInteraction === 'keyboard' || pointerType === null;
   const computedAnchor = pointerAnchorUnavailable ? defaultAnchorByTrigger[trigger] : anchor;
-  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor), props.position);
+
+  // A series type can override how its item tooltip is positioned (e.g. map
+  // shapes position from the geo projection); otherwise the generic item
+  // selector is used.
+  const tooltipItem = store.use(selectorChartsTooltipItem);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
+  const selectorItemPosition = tooltipItem && seriesConfig[tooltipItem.type]?.selectorTooltipItemPosition || selectorChartsTooltipItemPosition;
+  const itemPosition = store.use(getPositionSelectorByAnchor(computedAnchor, selectorItemPosition), props.position);
   const isTooltipNodeAnchored = itemPosition !== null;
   React.useEffect(() => {
     const svgElement = chartsLayerContainerRef.current;

package/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsGroupedXAxisTicks = ChartsGroupedXAxisTicks;
-var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _scaleGuards = require("../internals/scaleGuards");
 var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
@@ -17,18 +17,8 @@ var _useTicksGrouped = require("../hooks/useTicksGrouped");
 var _useAxisTicksProps = require("./useAxisTicksProps");
 var _useStore = require("../internals/store/useStore");
 var _useChartAxisAutoSize = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors");
+var _getGroupingConfig = require("../internals/getGroupingConfig");
 var _jsxRuntime = require("react/jsx-runtime");
-const DEFAULT_GROUPING_CONFIG = {
-  tickSize: 6
-};
-const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
-  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: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
-  });
-};
 /**
  * @ignore - internal component.
  */
@@ -87,7 +77,7 @@ function ChartsGroupedXAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
+      const groupConfig = (0, _getGroupingConfig.getGroupingConfig)(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickYSize = positionSign * groupConfig.tickSize;
       const labelPositionY = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {

package/ChartsXAxis/ChartsGroupedXAxisTicks.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import * as React from 'react';
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { useChartsContext } from "../context/ChartsProvider/useChartsContext.mjs";
@@ -10,18 +10,8 @@ import { useTicksGrouped } from "../hooks/useTicksGrouped.mjs";
 import { useAxisTicksProps } from "./useAxisTicksProps.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { selectorChartXAxisAutoSizeResults } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors.mjs";
+import { getGroupingConfig } from "../internals/getGroupingConfig.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_GROUPING_CONFIG = {
-  tickSize: 6
-};
-const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
-  const config = groups[groupIndex] ?? {};
-  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
-  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
-  return _extends({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
-  });
-};
 /**
  * @ignore - internal component.
  */

package/ChartsYAxis/ChartsGroupedYAxisTicks.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsGroupedYAxisTicks = ChartsGroupedYAxisTicks;
-var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _scaleGuards = require("../internals/scaleGuards");
 var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
@@ -17,23 +17,11 @@ var _useTicksGrouped = require("../hooks/useTicksGrouped");
 var _useAxisTicksProps = require("./useAxisTicksProps");
 var _useStore = require("../internals/store/useStore");
 var _useChartAxisAutoSize = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors");
+var _getGroupingConfig = require("../internals/getGroupingConfig");
 var _jsxRuntime = require("react/jsx-runtime");
-const DEFAULT_GROUPING_CONFIG = {
-  tickSize: 6
-};
-const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
-  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: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
-  });
-};
-
 /**
  * @ignore - internal component.
- */
-function ChartsGroupedYAxisTicks(inProps) {
+ */function ChartsGroupedYAxisTicks(inProps) {
   const {
     yScale,
     defaultizedProps,
@@ -88,7 +76,7 @@ function ChartsGroupedYAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
+      const groupConfig = (0, _getGroupingConfig.getGroupingConfig)(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickXSize = positionSign * groupConfig.tickSize;
       const labelPositionX = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {

package/ChartsYAxis/ChartsGroupedYAxisTicks.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import * as React from 'react';
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
 import { useChartsContext } from "../context/ChartsProvider/useChartsContext.mjs";
@@ -10,22 +10,12 @@ import { useTicksGrouped } from "../hooks/useTicksGrouped.mjs";
 import { useAxisTicksProps } from "./useAxisTicksProps.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { selectorChartYAxisAutoSizeResults } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_GROUPING_CONFIG = {
-  tickSize: 6
-};
-const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
-  const config = groups[groupIndex] ?? {};
-  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
-  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
-  return _extends({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
-  });
-};
+import { getGroupingConfig } from "../internals/getGroupingConfig.mjs";
 
 /**
  * @ignore - internal component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsGroupedYAxisTicks(inProps) {
   const {
     yScale,

package/hooks/index.d.mts

@@ -24,4 +24,5 @@ export * from "./useFocusedItem.mjs";
 export { useXAxisCoordinates, useYAxisCoordinates, type AxisCoordinates } from "./useAxisCoordinates.mjs";
 export * from "./useAxisTicks.mjs";
 export { type TickItem } from "./useTicks.mjs";
-export * from "./getValueToPositionMapper.mjs";
+export * from "./getValueToPositionMapper.mjs";
+export { usePolarGeometry } from "./usePolarGeometry.mjs";

package/hooks/index.d.ts

@@ -24,4 +24,5 @@ export * from "./useFocusedItem.js";
 export { useXAxisCoordinates, useYAxisCoordinates, type AxisCoordinates } from "./useAxisCoordinates.js";
 export * from "./useAxisTicks.js";
 export { type TickItem } from "./useTicks.js";
-export * from "./getValueToPositionMapper.js";
+export * from "./getValueToPositionMapper.js";
+export { usePolarGeometry } from "./usePolarGeometry.js";

package/hooks/index.js

@@ -9,7 +9,8 @@ var _exportNames = {
   useChartGradientId: true,
   useChartGradientIdObjectBound: true,
   useXAxisCoordinates: true,
-  useYAxisCoordinates: true
+  useYAxisCoordinates: true,
+  usePolarGeometry: true
 };
 Object.defineProperty(exports, "useChartGradientId", {
   enumerable: true,
@@ -35,6 +36,12 @@ Object.defineProperty(exports, "usePieSeriesContext", {
     return _usePieSeries.usePieSeriesContext;
   }
 });
+Object.defineProperty(exports, "usePolarGeometry", {
+  enumerable: true,
+  get: function () {
+    return _usePolarGeometry.usePolarGeometry;
+  }
+});
 Object.defineProperty(exports, "useXAxisCoordinates", {
   enumerable: true,
   get: function () {
@@ -325,4 +332,5 @@ Object.keys(_getValueToPositionMapper).forEach(function (key) {
       return _getValueToPositionMapper[key];
     }
   });
-});
+});
+var _usePolarGeometry = require("./usePolarGeometry");

package/hooks/index.mjs

@@ -23,4 +23,5 @@ export * from "./useBrush.mjs";
 export * from "./useFocusedItem.mjs";
 export { useXAxisCoordinates, useYAxisCoordinates } from "./useAxisCoordinates.mjs";
 export * from "./useAxisTicks.mjs";
-export * from "./getValueToPositionMapper.mjs";
+export * from "./getValueToPositionMapper.mjs";
+export { usePolarGeometry } from "./usePolarGeometry.mjs";

package/hooks/usePolarGeometry.d.mts

@@ -0,0 +1,51 @@
+import type { AxisScaleConfig, ScaleName } from "../models/axis.mjs";
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+export declare function usePolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName>(): PolarGeometry<AngleScale, RadiusScale> | null;
+export interface PolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName> {
+  /**
+   * The X coordinate of the chart center within the SVG.
+   */
+  cx: number;
+  /**
+   * The Y coordinate of the chart center within the SVG.
+   */
+  cy: number;
+  /**
+   * The scale that maps rotation axis values to angles in radians.
+   */
+  angleScale: AxisScaleConfig[AngleScale]['scale'];
+  /**
+   * The scale that maps data values to radii (distance from the chart center).
+   */
+  radiusScale: AxisScaleConfig[RadiusScale]['scale'];
+  /**
+   * Converts polar coordinates to Cartesian offsets relative to the chart center.
+   * @param {number} radius - Distance from the center.
+   * @param {number} angle - Angle in radians, measured clockwise from the top (12 o'clock).
+   * @returns {[number, number]} `[x, y]` offset from `[cx, cy]`.
+   */
+  point: (radius: number, angle: number) => [number, number];
+  /**
+   * Converts Cartesian offsets (relative to the chart center) back to polar coordinates.
+   * The inverse of `point`.
+   * @param {number} x - Horizontal offset from `cx`.
+   * @param {number} y - Vertical offset from `cy`.
+   * @returns {[number, number]} `[radius, angle]` where angle is in radians within `[-π, π]`.
+   */
+  pointInverse: (x: number, y: number) => [number, number];
+}

package/hooks/usePolarGeometry.d.ts

@@ -0,0 +1,51 @@
+import type { AxisScaleConfig, ScaleName } from "../models/axis.js";
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+export declare function usePolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName>(): PolarGeometry<AngleScale, RadiusScale> | null;
+export interface PolarGeometry<AngleScale extends ScaleName = ScaleName, RadiusScale extends ScaleName = ScaleName> {
+  /**
+   * The X coordinate of the chart center within the SVG.
+   */
+  cx: number;
+  /**
+   * The Y coordinate of the chart center within the SVG.
+   */
+  cy: number;
+  /**
+   * The scale that maps rotation axis values to angles in radians.
+   */
+  angleScale: AxisScaleConfig[AngleScale]['scale'];
+  /**
+   * The scale that maps data values to radii (distance from the chart center).
+   */
+  radiusScale: AxisScaleConfig[RadiusScale]['scale'];
+  /**
+   * Converts polar coordinates to Cartesian offsets relative to the chart center.
+   * @param {number} radius - Distance from the center.
+   * @param {number} angle - Angle in radians, measured clockwise from the top (12 o'clock).
+   * @returns {[number, number]} `[x, y]` offset from `[cx, cy]`.
+   */
+  point: (radius: number, angle: number) => [number, number];
+  /**
+   * Converts Cartesian offsets (relative to the chart center) back to polar coordinates.
+   * The inverse of `point`.
+   * @param {number} x - Horizontal offset from `cx`.
+   * @param {number} y - Vertical offset from `cy`.
+   * @returns {[number, number]} `[radius, angle]` where angle is in radians within `[-π, π]`.
+   */
+  pointInverse: (x: number, y: number) => [number, number];
+}

package/hooks/usePolarGeometry.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePolarGeometry = usePolarGeometry;
+var _useDrawingArea = require("./useDrawingArea");
+var _useAxis = require("./useAxis");
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+function usePolarGeometry() {
+  const {
+    left,
+    top,
+    width,
+    height
+  } = (0, _useDrawingArea.useDrawingArea)();
+  const rotationAxis = (0, _useAxis.useRotationAxis)();
+  const radiusAxis = (0, _useAxis.useRadiusAxis)();
+  if (!rotationAxis || !radiusAxis) {
+    return null;
+  }
+  const angleScale = rotationAxis.scale;
+  const radiusScale = radiusAxis.scale;
+  return {
+    cx: left + width / 2,
+    cy: top + height / 2,
+    angleScale,
+    radiusScale,
+    point: (radius, angle) => [radius * Math.sin(angle), -radius * Math.cos(angle)],
+    pointInverse: (x, y) => [Math.sqrt(x * x + y * y), Math.atan2(x, -y)]
+  };
+}

package/hooks/usePolarGeometry.mjs

@@ -0,0 +1,41 @@
+import { useDrawingArea } from "./useDrawingArea.mjs";
+import { useRotationAxis, useRadiusAxis } from "./useAxis.mjs";
+/**
+ * Provides access to the geometry of a polar chart.
+ *
+ * It can be used to position custom elements and convert between polar and Cartesian coordinates.
+ *
+ * @example
+ * ```tsx
+ * const geo = usePolarGeometry();
+ *
+ * const [x, y] = geo.point(100, Math.PI / 2);
+ *
+ * return <circle cx={geo.cx + x} cy={geo.cy + y} r={4} />
+ * ```
+ *
+ * @returns The polar geometry helpers, or `null` if the chart scales are not ready.
+ */
+export function usePolarGeometry() {
+  const {
+    left,
+    top,
+    width,
+    height
+  } = useDrawingArea();
+  const rotationAxis = useRotationAxis();
+  const radiusAxis = useRadiusAxis();
+  if (!rotationAxis || !radiusAxis) {
+    return null;
+  }
+  const angleScale = rotationAxis.scale;
+  const radiusScale = radiusAxis.scale;
+  return {
+    cx: left + width / 2,
+    cy: top + height / 2,
+    angleScale,
+    radiusScale,
+    point: (radius, angle) => [radius * Math.sin(angle), -radius * Math.cos(angle)],
+    pointInverse: (x, y) => [Math.sqrt(x * x + y * y), Math.atan2(x, -y)]
+  };
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.7.0
+ * @mui/x-charts v9.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.7.0
+ * @mui/x-charts v9.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/animation/animation.d.mts

@@ -1,3 +1,3 @@
 export declare const ANIMATION_DURATION_MS = 300;
 export declare const ANIMATION_TIMING_FUNCTION = "cubic-bezier(0.66, 0, 0.34, 1)";
-export declare const ANIMATION_TIMING_FUNCTION_JS: import("bezier-easing").EasingFunction;
+export declare const ANIMATION_TIMING_FUNCTION_JS: (x: number) => number;

package/internals/animation/animation.d.ts

@@ -1,3 +1,3 @@
 export declare const ANIMATION_DURATION_MS = 300;
 export declare const ANIMATION_TIMING_FUNCTION = "cubic-bezier(0.66, 0, 0.34, 1)";
-export declare const ANIMATION_TIMING_FUNCTION_JS: import("bezier-easing").EasingFunction;
+export declare const ANIMATION_TIMING_FUNCTION_JS: (x: number) => number;