@mui/x-charts 9.0.4 → 9.2.0

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs

@@ -7,25 +7,74 @@ import { clampAngleRad } from "../../../clampAngle.mjs";
  * For a pointer coordinate, this function returns the value and dataIndex associated.
  * Returns `-1` if the coordinate does not match a value.
  */
-export function getAxisIndex(axisConfig, pointerValue) {
+export function getRotationAxisIndex(axisConfig, pointerValue) {
   const {
     scale,
     data: axisData,
-    reverse
+    reverse,
+    isFullCircle
   } = axisConfig;
+  const [startAngle, endAngle] = scale.range();
+  const angleGap = clampAngleRad(pointerValue - startAngle);
+  const maxAngleGap = clampAngleRad(endAngle - startAngle);
+  if (!isFullCircle && angleGap > maxAngleGap) {
+    // If not a full circle we only consider pointer inside the rotation range.
+    return -1;
+  }
   if (!isOrdinalScale(scale)) {
     if (axisData === undefined) {
       return -1;
     }
-    const angle = scale.range()[0] + clampAngleRad(pointerValue - scale.range()[0]);
+    const angle = startAngle + clampAngleRad(pointerValue - startAngle);
     const valueAsNumber = getAsNumber(scale.invert(angle));
     return findClosestIndex(axisData, valueAsNumber);
   }
   if (!axisData) {
     return -1;
   }
-  const angleGap = clampAngleRad(pointerValue - scale.range()[0]);
-  const dataIndex = scale.bandwidth() === 0 ? Math.floor((angleGap + scale.step() / 2) / scale.step()) % axisData.length : Math.floor(angleGap / scale.step());
+  let dataIndex;
+  if (scale.bandwidth() === 0) {
+    dataIndex = Math.floor((angleGap + scale.step() / 2) / scale.step());
+    if (isFullCircle) {
+      // To show dataIndex 0 when we are before the startAngle
+      dataIndex = dataIndex % axisData.length;
+    }
+  } else {
+    dataIndex = Math.floor(angleGap / scale.step());
+  }
+  if (dataIndex < 0 || dataIndex >= axisData.length) {
+    return -1;
+  }
+  return reverse ? axisData.length - 1 - dataIndex : dataIndex;
+}
+
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `-1` if the coordinate does not match a value.
+ */
+export function getRadiusAxisIndex(axisConfig, pointerValue) {
+  const {
+    scale,
+    data: axisData,
+    reverse
+  } = axisConfig;
+  if (!isOrdinalScale(scale)) {
+    if (axisData === undefined) {
+      return -1;
+    }
+    const valueAsNumber = getAsNumber(scale.invert(pointerValue));
+    return findClosestIndex(axisData, valueAsNumber);
+  }
+  if (!axisData) {
+    return -1;
+  }
+  let dataIndex;
+  const distFromStart = pointerValue - Math.min(...scale.range());
+  if (scale.bandwidth() === 0) {
+    dataIndex = Math.floor((distFromStart + scale.step() / 2) / scale.step());
+  } else {
+    dataIndex = Math.floor(distFromStart / scale.step());
+  }
   if (dataIndex < 0 || dataIndex >= axisData.length) {
     return -1;
   }

package/internals/plugins/featurePlugins/useChartPolarAxis/index.d.mts

@@ -1,3 +1,4 @@
 export { useChartPolarAxis } from "./useChartPolarAxis.mjs";
 export type * from "./useChartPolarAxis.types.mjs";
-export * from "./useChartPolarAxis.selectors.mjs";
+export * from "./useChartPolarAxis.selectors.mjs";
+export * from "./useChartPolarInteraction.selectors.mjs";

package/internals/plugins/featurePlugins/useChartPolarAxis/index.d.ts

@@ -1,3 +1,4 @@
 export { useChartPolarAxis } from "./useChartPolarAxis.js";
 export type * from "./useChartPolarAxis.types.js";
-export * from "./useChartPolarAxis.selectors.js";
+export * from "./useChartPolarAxis.selectors.js";
+export * from "./useChartPolarInteraction.selectors.js";

package/internals/plugins/featurePlugins/useChartPolarAxis/index.js

@@ -24,4 +24,16 @@ Object.keys(_useChartPolarAxis2).forEach(function (key) {
       return _useChartPolarAxis2[key];
     }
   });
+});
+var _useChartPolarInteraction = require("./useChartPolarInteraction.selectors");
+Object.keys(_useChartPolarInteraction).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartPolarInteraction[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartPolarInteraction[key];
+    }
+  });
 });

package/internals/plugins/featurePlugins/useChartPolarAxis/index.mjs

@@ -1,2 +1,3 @@
 export { useChartPolarAxis } from "./useChartPolarAxis.mjs";
-export * from "./useChartPolarAxis.selectors.mjs";
+export * from "./useChartPolarAxis.selectors.mjs";
+export * from "./useChartPolarInteraction.selectors.mjs";

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -177,7 +177,7 @@ const useChartPolarAxis = ({
       let isRotationAxis = false;
       const svgPoint = (0, _getChartPoint.getChartPoint)(element, event.detail.srcEvent);
       const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
-      const rotationIndex = (0, _getAxisIndex.getAxisIndex)(rotationAxisWithScale[usedRotationAxisId], rotation);
+      const rotationIndex = (0, _getAxisIndex.getRotationAxisIndex)(rotationAxisWithScale[usedRotationAxisId], rotation);
       isRotationAxis = rotationIndex !== -1;
       dataIndex = isRotationAxis ? rotationIndex : null; // radius index is not yet implemented.
 

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.mjs

@@ -9,7 +9,7 @@ import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/i
 import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
 import { getChartPoint } from "../../../getChartPoint.mjs";
 import { generatePolar2svg, generateSvg2polar, generateSvg2rotation } from "./coordinateTransformation.mjs";
-import { getAxisIndex } from "./getAxisIndex.mjs";
+import { getRotationAxisIndex } from "./getAxisIndex.mjs";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.mjs";
 export const useChartPolarAxis = ({
@@ -170,7 +170,7 @@ export const useChartPolarAxis = ({
       let isRotationAxis = false;
       const svgPoint = getChartPoint(element, event.detail.srcEvent);
       const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
-      const rotationIndex = getAxisIndex(rotationAxisWithScale[usedRotationAxisId], rotation);
+      const rotationIndex = getRotationAxisIndex(rotationAxisWithScale[usedRotationAxisId], rotation);
       isRotationAxis = rotationIndex !== -1;
       dataIndex = isRotationAxis ? rotationIndex : null; // radius index is not yet implemented.
 

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.d.mts

@@ -2,15 +2,15 @@ import { type UseChartPolarAxisSignature } from "./useChartPolarAxis.types.mjs";
 import { type ChartState } from "../../models/chart.mjs";
 import type { ChartDrawingArea } from "../../../../hooks/useDrawingArea.mjs";
 export declare const selectorChartPolarAxisState: (state: ChartState<[], [UseChartPolarAxisSignature]>) => {
-  rotation: import("../../../index.mjs").AxisConfig<import("../../../index.mjs").ScaleName, any, import("../../../index.mjs").ChartsRotationAxisProps>[];
-  radius: import("../../../index.mjs").AxisConfig<"linear", any, import("../../../index.mjs").ChartsRadiusAxisProps>[];
+  rotation: import("../../../index.mjs").PolarAxisConfig<import("../../../index.mjs").ScaleName, any, import("../../../index.mjs").ChartsRotationAxisProps>[];
+  radius: import("../../../index.mjs").PolarAxisConfig<import("../../../index.mjs").ScaleName, any, import("../../../index.mjs").ChartsRadiusAxisProps>[];
 } | undefined;
 export declare const selectorChartRawRotationAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => import("../../../index.mjs").AxisConfig<keyof import("../../../index.mjs").AxisScaleConfig, any, import("../../../index.mjs").ChartsRotationAxisProps>[] | undefined;
+}) => import("../../../index.mjs").PolarAxisConfig<keyof import("../../../index.mjs").AxisScaleConfig, any, import("../../../index.mjs").ChartsRotationAxisProps>[] | undefined;
 export declare const selectorChartRawRadiusAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
-}) => import("../../../index.mjs").AxisConfig<"linear", any, import("../../../index.mjs").ChartsRadiusAxisProps>[] | undefined;
+}) => import("../../../index.mjs").PolarAxisConfig<keyof import("../../../index.mjs").AxisScaleConfig, any, import("../../../index.mjs").ChartsRadiusAxisProps>[] | undefined;
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.d.ts

@@ -2,15 +2,15 @@ import { type UseChartPolarAxisSignature } from "./useChartPolarAxis.types.js";
 import { type ChartState } from "../../models/chart.js";
 import type { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
 export declare const selectorChartPolarAxisState: (state: ChartState<[], [UseChartPolarAxisSignature]>) => {
-  rotation: import("../../../index.js").AxisConfig<import("../../../index.js").ScaleName, any, import("../../../index.js").ChartsRotationAxisProps>[];
-  radius: import("../../../index.js").AxisConfig<"linear", any, import("../../../index.js").ChartsRadiusAxisProps>[];
+  rotation: import("../../../index.js").PolarAxisConfig<import("../../../index.js").ScaleName, any, import("../../../index.js").ChartsRotationAxisProps>[];
+  radius: import("../../../index.js").PolarAxisConfig<import("../../../index.js").ScaleName, any, import("../../../index.js").ChartsRadiusAxisProps>[];
 } | undefined;
 export declare const selectorChartRawRotationAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../index.js").AxisConfig<keyof import("../../../index.js").AxisScaleConfig, any, import("../../../index.js").ChartsRotationAxisProps>[] | undefined;
+}) => import("../../../index.js").PolarAxisConfig<keyof import("../../../index.js").AxisScaleConfig, any, import("../../../index.js").ChartsRotationAxisProps>[] | undefined;
 export declare const selectorChartRawRadiusAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../index.js").AxisConfig<"linear", any, import("../../../index.js").ChartsRadiusAxisProps>[] | undefined;
+}) => import("../../../index.js").PolarAxisConfig<keyof import("../../../index.js").AxisScaleConfig, any, import("../../../index.js").ChartsRadiusAxisProps>[] | undefined;
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.types.d.mts

@@ -1,6 +1,6 @@
 import { type ChartPluginSignature } from "../../models/index.mjs";
 import { type ChartSeriesType, type DatasetType } from "../../../../models/seriesType/config.mjs";
-import { type ScaleName, type AxisConfig, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type RadiusAxis, type RotationAxis, type ChartsAxisData } from "../../../../models/axis.mjs";
+import { type ScaleName, type PolarAxisConfig, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type RadiusAxis, type RotationAxis, type ChartsAxisData } from "../../../../models/axis.mjs";
 import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
 import { type UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
 export interface UseChartPolarAxisInstance {
@@ -60,8 +60,8 @@ export interface UseChartPolarAxisParameters {
 export type UseChartPolarAxisDefaultizedParameters = UseChartPolarAxisParameters & {};
 export interface UseChartPolarAxisState {
   polarAxis: {
-    rotation: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
-    radius: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
+    rotation: PolarAxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+    radius: PolarAxisConfig<ScaleName, any, ChartsRadiusAxisProps>[];
   };
 }
 export type UseChartPolarAxisSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.types.d.ts

@@ -1,6 +1,6 @@
 import { type ChartPluginSignature } from "../../models/index.js";
 import { type ChartSeriesType, type DatasetType } from "../../../../models/seriesType/config.js";
-import { type ScaleName, type AxisConfig, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type RadiusAxis, type RotationAxis, type ChartsAxisData } from "../../../../models/axis.js";
+import { type ScaleName, type PolarAxisConfig, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type RadiusAxis, type RotationAxis, type ChartsAxisData } from "../../../../models/axis.js";
 import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
 import { type UseChartInteractionSignature } from "../useChartInteraction/index.js";
 export interface UseChartPolarAxisInstance {
@@ -60,8 +60,8 @@ export interface UseChartPolarAxisParameters {
 export type UseChartPolarAxisDefaultizedParameters = UseChartPolarAxisParameters & {};
 export interface UseChartPolarAxisState {
   polarAxis: {
-    rotation: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
-    radius: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
+    rotation: PolarAxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+    radius: PolarAxisConfig<ScaleName, any, ChartsRadiusAxisProps>[];
   };
 }
 export type UseChartPolarAxisSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.mts

@@ -1,4 +1,4 @@
-import { type AxisItemIdentifier } from "../../../../models/axis.mjs";
+import type { AxisItemIdentifier } from "../../../../models/axis.mjs";
 export declare const selectorChartsInteractionRotationAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => number | null;
@@ -18,9 +18,29 @@ export declare const selectorChartsInteractionTooltipRotationAxes: (args_0: impo
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => AxisItemIdentifier[];
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-export declare const selectorChartsInteractionTooltipRadiusAxes: () => never[];
+export declare const selectorChartsInteractionRadius: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => number | null;
+export declare const selectorChartsInteractionRadiusAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => number | null;
+export declare const selectorChartsInteractionRadiusAxisIndexes: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => number[] | null;
+export declare const selectorChartsInteractionRadiusAxisValue: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => any;
+export declare const selectorChartsInteractionRadiusAxisValues: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => any[] | null;
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export declare const selectorChartsInteractionTooltipRadiusAxes: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => AxisItemIdentifier[];
 /**
  * Return `true` if the axis tooltip has something to display.
  */

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts

@@ -1,4 +1,4 @@
-import { type AxisItemIdentifier } from "../../../../models/axis.js";
+import type { AxisItemIdentifier } from "../../../../models/axis.js";
 export declare const selectorChartsInteractionRotationAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | null;
@@ -18,9 +18,29 @@ export declare const selectorChartsInteractionTooltipRotationAxes: (args_0: impo
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => AxisItemIdentifier[];
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-export declare const selectorChartsInteractionTooltipRadiusAxes: () => never[];
+export declare const selectorChartsInteractionRadius: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => number | null;
+export declare const selectorChartsInteractionRadiusAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => number | null;
+export declare const selectorChartsInteractionRadiusAxisIndexes: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => number[] | null;
+export declare const selectorChartsInteractionRadiusAxisValue: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => any;
+export declare const selectorChartsInteractionRadiusAxisValues: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => any[] | null;
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export declare const selectorChartsInteractionTooltipRadiusAxes: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => AxisItemIdentifier[];
 /**
  * Return `true` if the axis tooltip has something to display.
  */

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionRotationAxisValues = exports.selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionPolarAxisTooltip = void 0;
+exports.selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionRotationAxisValues = exports.selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRadiusAxisValues = exports.selectorChartsInteractionRadiusAxisValue = exports.selectorChartsInteractionRadiusAxisIndexes = exports.selectorChartsInteractionRadiusAxisIndex = exports.selectorChartsInteractionRadius = exports.selectorChartsInteractionPolarAxisTooltip = void 0;
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _store = require("@mui/x-internals/store");
 var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
@@ -17,10 +17,17 @@ const optionalGetAxisIds = (_, ids) => ids;
  * Get interaction indexes
  */
 
-function indexGetter(value, axes, ids) {
-  return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getAxisIndex)(axes.axis[id], value)) : (0, _getAxisIndex.getAxisIndex)(axes.axis[ids], value);
+function indexGetter(value, axes, ids, type) {
+  if (type === 'rotation') {
+    const rotationAxes = axes;
+    return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getRotationAxisIndex)(rotationAxes.axis[id], value)) : (0, _getAxisIndex.getRotationAxisIndex)(rotationAxes.axis[ids], value);
+  }
+  const radiusAxes = axes;
+  return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxes.axis[id], value)) : (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxes.axis[ids], value);
 }
 
+// ============================= Rotation axis =============================
+
 /**
  * Helper to get the rotation associated to the interaction coordinate.
  */
@@ -30,8 +37,8 @@ const selectorChartsInteractionRotationAngle = (0, _store.createSelector)(_useCh
   }
   return (0, _coordinateTransformation.generateSvg2rotation)(center)(x, y);
 });
-const selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRotationAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0]));
-const selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds));
+const selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRotationAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0], 'rotation'));
+const selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds, 'rotation'));
 const selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisValue = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id) => {
   id = id ?? rotationAxis.axisIds[0];
   if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
@@ -80,16 +87,70 @@ const selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInter
   }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
 });
 
+// ============================= Radius axis =============================
+
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-const selectorChartsInteractionTooltipRadiusAxes = () => {
-  // TODO implement this selector and add it to the `selectorChartsInteractionPolarAxisTooltip`
-  return [];
-};
+const selectorChartsInteractionRadius = exports.selectorChartsInteractionRadius = (0, _store.createSelector)(_useChartInteraction.selectorChartsInteractionPointerX, _useChartInteraction.selectorChartsInteractionPointerY, _useChartPolarAxis.selectorChartPolarCenter, (x, y, center) => {
+  if (x === null || y === null) {
+    return null;
+  }
+  return Math.sqrt((x - center.cx) ** 2 + (y - center.cy) ** 2);
+});
+const selectorChartsInteractionRadiusAxisIndex = exports.selectorChartsInteractionRadiusAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRadius, _useChartPolarAxis.selectorChartRadiusAxis, optionalGetAxisId, (radius, radiusAxis, id) => radius === null ? null : indexGetter(radius, radiusAxis, id ?? radiusAxis.axisIds[0], 'radius'));
+const selectorChartsInteractionRadiusAxisIndexes = exports.selectorChartsInteractionRadiusAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRadius, _useChartPolarAxis.selectorChartRadiusAxis, optionalGetAxisIds, (radius, radiusAxis, ids) => radius === null ? null : indexGetter(radius, radiusAxis, ids ?? radiusAxis.axisIds, 'radius'));
+const selectorChartsInteractionRadiusAxisValue = exports.selectorChartsInteractionRadiusAxisValue = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndex, optionalGetAxisId, (radiusAxis, radiusIndex, id) => {
+  id = id ?? radiusAxis.axisIds[0];
+  if (radiusIndex === null || radiusIndex === -1 || radiusAxis.axisIds.length === 0) {
+    return null;
+  }
+  const data = radiusAxis.axis[id]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[radiusIndex];
+});
+const selectorChartsInteractionRadiusAxisValues = exports.selectorChartsInteractionRadiusAxisValues = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndexes, optionalGetAxisIds, (radiusAxis, radiusIndexes, ids) => {
+  ids = ids ?? radiusAxis.axisIds;
+  if (radiusIndexes === null) {
+    return null;
+  }
+  return ids.map((id, axisIndex) => {
+    const radiusIndex = radiusIndexes[axisIndex];
+    if (radiusIndex === -1) {
+      return null;
+    }
+    return radiusAxis.axis[id].data?.[radiusIndex];
+  });
+});
+
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+const selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionTooltipRadiusAxes = (0, _store.createSelectorMemoizedWithOptions)({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: _isDeepEqual.isDeepEqual
+  }
+})(selectorChartsInteractionRadiusAxisIndexes, _useChartPolarAxis.selectorChartRadiusAxis, (indexes, axes) => {
+  if (indexes === null) {
+    return [];
+  }
+  return axes.axisIds.map((axisId, axisIndex) => ({
+    axisId,
+    dataIndex: indexes[axisIndex]
+  })).filter(({
+    axisId,
+    dataIndex
+  }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+});
+
+// ============================= Cross axes selectors =============================
 
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-exports.selectorChartsInteractionTooltipRadiusAxes = selectorChartsInteractionTooltipRadiusAxes;
-const selectorChartsInteractionPolarAxisTooltip = exports.selectorChartsInteractionPolarAxisTooltip = (0, _store.createSelector)(selectorChartsInteractionTooltipRotationAxes, rotationTooltip => rotationTooltip.length > 0);
+const selectorChartsInteractionPolarAxisTooltip = exports.selectorChartsInteractionPolarAxisTooltip = (0, _store.createSelector)(selectorChartsInteractionTooltipRotationAxes, selectorChartsInteractionTooltipRadiusAxes, (rotationTooltip, radiusTooltip) => rotationTooltip.length > 0 || radiusTooltip.length > 0);

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs

@@ -2,8 +2,8 @@ import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { createSelector, createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.mjs";
 import { generateSvg2rotation } from "./coordinateTransformation.mjs";
-import { getAxisIndex } from "./getAxisIndex.mjs";
-import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
+import { getRotationAxisIndex, getRadiusAxisIndex } from "./getAxisIndex.mjs";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
 const optionalGetAxisId = (_, id) => id;
 const optionalGetAxisIds = (_, ids) => ids;
 
@@ -11,10 +11,17 @@ const optionalGetAxisIds = (_, ids) => ids;
  * Get interaction indexes
  */
 
-function indexGetter(value, axes, ids) {
-  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+function indexGetter(value, axes, ids, type) {
+  if (type === 'rotation') {
+    const rotationAxes = axes;
+    return Array.isArray(ids) ? ids.map(id => getRotationAxisIndex(rotationAxes.axis[id], value)) : getRotationAxisIndex(rotationAxes.axis[ids], value);
+  }
+  const radiusAxes = axes;
+  return Array.isArray(ids) ? ids.map(id => getRadiusAxisIndex(radiusAxes.axis[id], value)) : getRadiusAxisIndex(radiusAxes.axis[ids], value);
 }
 
+// ============================= Rotation axis =============================
+
 /**
  * Helper to get the rotation associated to the interaction coordinate.
  */
@@ -24,8 +31,8 @@ const selectorChartsInteractionRotationAngle = createSelector(selectorChartsInte
   }
   return generateSvg2rotation(center)(x, y);
 });
-export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0]));
-export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds));
+export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0], 'rotation'));
+export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds, 'rotation'));
 export const selectorChartsInteractionRotationAxisValue = createSelector(selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id) => {
   id = id ?? rotationAxis.axisIds[0];
   if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
@@ -74,15 +81,70 @@ export const selectorChartsInteractionTooltipRotationAxes = createSelectorMemoiz
   }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
 });
 
+// ============================= Radius axis =============================
+
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-export const selectorChartsInteractionTooltipRadiusAxes = () => {
-  // TODO implement this selector and add it to the `selectorChartsInteractionPolarAxisTooltip`
-  return [];
-};
+export const selectorChartsInteractionRadius = createSelector(selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, (x, y, center) => {
+  if (x === null || y === null) {
+    return null;
+  }
+  return Math.sqrt((x - center.cx) ** 2 + (y - center.cy) ** 2);
+});
+export const selectorChartsInteractionRadiusAxisIndex = createSelector(selectorChartsInteractionRadius, selectorChartRadiusAxis, optionalGetAxisId, (radius, radiusAxis, id) => radius === null ? null : indexGetter(radius, radiusAxis, id ?? radiusAxis.axisIds[0], 'radius'));
+export const selectorChartsInteractionRadiusAxisIndexes = createSelector(selectorChartsInteractionRadius, selectorChartRadiusAxis, optionalGetAxisIds, (radius, radiusAxis, ids) => radius === null ? null : indexGetter(radius, radiusAxis, ids ?? radiusAxis.axisIds, 'radius'));
+export const selectorChartsInteractionRadiusAxisValue = createSelector(selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndex, optionalGetAxisId, (radiusAxis, radiusIndex, id) => {
+  id = id ?? radiusAxis.axisIds[0];
+  if (radiusIndex === null || radiusIndex === -1 || radiusAxis.axisIds.length === 0) {
+    return null;
+  }
+  const data = radiusAxis.axis[id]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[radiusIndex];
+});
+export const selectorChartsInteractionRadiusAxisValues = createSelector(selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndexes, optionalGetAxisIds, (radiusAxis, radiusIndexes, ids) => {
+  ids = ids ?? radiusAxis.axisIds;
+  if (radiusIndexes === null) {
+    return null;
+  }
+  return ids.map((id, axisIndex) => {
+    const radiusIndex = radiusIndexes[axisIndex];
+    if (radiusIndex === -1) {
+      return null;
+    }
+    return radiusAxis.axis[id].data?.[radiusIndex];
+  });
+});
+
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipRadiusAxes = createSelectorMemoizedWithOptions({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
+})(selectorChartsInteractionRadiusAxisIndexes, selectorChartRadiusAxis, (indexes, axes) => {
+  if (indexes === null) {
+    return [];
+  }
+  return axes.axisIds.map((axisId, axisIndex) => ({
+    axisId,
+    dataIndex: indexes[axisIndex]
+  })).filter(({
+    axisId,
+    dataIndex
+  }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+});
+
+// ============================= Cross axes selectors =============================
 
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, rotationTooltip => rotationTooltip.length > 0);
+export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, selectorChartsInteractionTooltipRadiusAxes, (rotationTooltip, radiusTooltip) => rotationTooltip.length > 0 || radiusTooltip.length > 0);