@mui/x-charts 9.3.0 → 9.4.0

package/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.mjs

@@ -1,5 +1,8 @@
 import { isOrdinalScale } from "../../../scaleGuards.mjs";
-export function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1) {
+
+// Arbitrary large number to be sure we don't pull the entire dataset from flatbush when radius is not fixed.
+const LARGE_NUMBER = 50;
+export function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1, getItemRadius = 0) {
   const originalXScale = xScale.copy();
   const originalYScale = yScale.copy();
   originalXScale.range([0, 1]);
@@ -22,7 +25,49 @@ export function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomSta
   }
   const pointX = originalXScale(invertScale(xScale, svgPointX, dataIndex => seriesData[dataIndex]?.x));
   const pointY = originalYScale(invertScale(yScale, svgPointY, dataIndex => seriesData[dataIndex]?.y));
-  return flatbush.neighbors(pointX, pointY, maxResults, maxRadius != null ? maxRadius * maxRadius : Infinity, excludeIfOutsideDrawingArea, sqDistFn);
+  if (pointX === undefined || pointY === undefined) {
+    return [];
+  }
+  const withFixRadius = typeof getItemRadius === 'number';
+  const maxRadiusSq = Number.isFinite(maxRadius) ? maxRadius * maxRadius : Infinity;
+
+  // Pull every candidate whose lower-bound (box) distance is within the hit threshold.
+  // Any unpulled point j has box-dist > maxRadius, hence center-dist ≥ box-dist > maxRadius,
+  // so it cannot be a hit. We re-rank by true edge distance below.
+  const candidates = flatbush.neighbors(pointX, pointY, withFixRadius ? maxResults : LARGE_NUMBER, maxRadiusSq, excludeIfOutsideDrawingArea, sqDistFn);
+  if (withFixRadius) {
+    // If radius is constant, we can skip the expensive edge-distance calculation and return candidates in box-distance order.
+    return candidates;
+  }
+
+  // Re-rank by true (signed) edge distance. Negative values mean the cursor is inside
+  // the marker — those win over any outside marker, with deeper containment ranked first.
+  let ranked = [];
+  for (const i of candidates) {
+    const cx = originalXScale(seriesData[i].x);
+    const cy = originalYScale(seriesData[i].y);
+    const centerDistSq = sqDistFn(cx - pointX, cy - pointY);
+    // Preserve the existing hit-area semantics: hit means center distance ≤ maxRadius.
+    if (centerDistSq > maxRadiusSq) {
+      continue;
+    }
+    const edge = Math.sqrt(centerDistSq) - getItemRadius(i);
+    ranked.push({
+      index: i,
+      edge,
+      centerDistSq
+    });
+  }
+  ranked.sort((a, b) => a.edge - b.edge);
+
+  // The pointer is inside multiple marks, we sort them by distance to the center. Priority is
+  // 1. marks that are under the pointer (negative edge distance) sorted by distance to the center
+  // 2. marks that are outside the pointer (positive edge distance) by distance to the edge
+  const splitIndex = ranked.findLastIndex(d => d.edge < 0);
+  if (splitIndex !== -1) {
+    ranked = [...ranked.slice(0, splitIndex + 1).sort((a, b) => a.centerDistSq - b.centerDistSq), ...ranked.slice(splitIndex + 1)];
+  }
+  return ranked.slice(0, Math.min(ranked.length, maxResults)).map(d => d.index);
 }
 function invertScale(scale, value, getDataPoint) {
   if (isOrdinalScale(scale)) {

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -15,6 +15,29 @@ var _getChartPoint = require("../../../getChartPoint");
 var _useChartCartesianAxis = require("../useChartCartesianAxis");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _findClosestPoints = require("./findClosestPoints");
+/**
+ * Return `true` if the candidate point is closer to the pointer than the current closest point.
+ * By priority we prefer:
+ * 1. points that are under the pointer (negative edge distance) sorted by distance to the center.
+ * 2. points that are outside the pointer (positive edge distance) by distance to the edge.
+ */
+function isCloser(candidatePoint, currentClosestPoint) {
+  if (currentClosestPoint === undefined) {
+    return true;
+  }
+  if (candidatePoint.edgeDistance <= 0) {
+    if (currentClosestPoint.edgeDistance > 0) {
+      return true;
+    }
+    const candidateDistance = candidatePoint.edgeDistance + candidatePoint.radius;
+    const currentDistance = currentClosestPoint.edgeDistance + currentClosestPoint.radius;
+    return candidateDistance < currentDistance;
+  }
+  if (currentClosestPoint.edgeDistance <= 0) {
+    return false;
+  }
+  return candidatePoint.edgeDistance < currentClosestPoint.edgeDistance;
+}
 const useChartClosestPoint = ({
   params,
   store,
@@ -65,35 +88,47 @@ const useChartClosestPoint = ({
       let closestPoint = undefined;
       for (const seriesId of seriesOrder ?? []) {
         const aSeries = (series ?? {})[seriesId];
-        const flatbush = flatbushMap.get(seriesId);
-        if (!flatbush) {
+        const entry = flatbushMap.get(seriesId);
+        if (!entry || aSeries.hidden) {
           continue;
         }
+        const {
+          flatbush,
+          getItemRadius,
+          maxItemRadius
+        } = entry;
         const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
         const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
         const xAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.state, xAxisId);
         const yAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.state, yAxisId);
-        const maxRadius = resolvedHitAreaRadius === 'item' ? aSeries.markerSize : resolvedHitAreaRadius;
+        const maxRadius = resolvedHitAreaRadius === 'item' ? maxItemRadius : resolvedHitAreaRadius;
         const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
         const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
         const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
         const yZoomEnd = (yAxisZoom?.end ?? 100) / 100;
         const xScale = xAxis[xAxisId].scale;
         const yScale = yAxis[yAxisId].scale;
-        const closestPointIndex = (0, _findClosestPoints.findClosestPoints)(flatbush, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
+        const closestPointIndex = (0, _findClosestPoints.findClosestPoints)(flatbush, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius, 1, getItemRadius)[0];
         if (closestPointIndex === undefined) {
           continue;
         }
         const point = aSeries.data[closestPointIndex];
         const scaledX = xScale(point.x);
         const scaledY = yScale(point.y);
-        const distSq = (scaledX - svgPoint.x) ** 2 + (scaledY - svgPoint.y) ** 2;
-        if (closestPoint === undefined || distSq < closestPoint.distanceSq) {
-          closestPoint = {
-            dataIndex: closestPointIndex,
-            seriesId,
-            distanceSq: distSq
-          };
+        const centerDist = Math.hypot(scaledX - svgPoint.x, scaledY - svgPoint.y);
+        const closestPointRadius = typeof getItemRadius === 'number' ? getItemRadius : getItemRadius(closestPointIndex);
+        const edgeDistance = centerDist - closestPointRadius;
+        if (resolvedHitAreaRadius === 'item' && edgeDistance > 0) {
+          continue;
+        }
+        const newPoint = {
+          dataIndex: closestPointIndex,
+          seriesId,
+          edgeDistance,
+          radius: closestPointRadius
+        };
+        if (isCloser(newPoint, closestPoint)) {
+          closestPoint = newPoint;
         }
       }
       if (closestPoint === undefined) {

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.mjs

@@ -8,6 +8,29 @@ import { getChartPoint } from "../../../getChartPoint.mjs";
 import { selectorChartAxisZoomData, selectorChartSeriesEmptyFlatbushMap, selectorChartSeriesFlatbushMap, selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.mjs";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.mjs";
 import { findClosestPoints } from "./findClosestPoints.mjs";
+/**
+ * Return `true` if the candidate point is closer to the pointer than the current closest point.
+ * By priority we prefer:
+ * 1. points that are under the pointer (negative edge distance) sorted by distance to the center.
+ * 2. points that are outside the pointer (positive edge distance) by distance to the edge.
+ */
+function isCloser(candidatePoint, currentClosestPoint) {
+  if (currentClosestPoint === undefined) {
+    return true;
+  }
+  if (candidatePoint.edgeDistance <= 0) {
+    if (currentClosestPoint.edgeDistance > 0) {
+      return true;
+    }
+    const candidateDistance = candidatePoint.edgeDistance + candidatePoint.radius;
+    const currentDistance = currentClosestPoint.edgeDistance + currentClosestPoint.radius;
+    return candidateDistance < currentDistance;
+  }
+  if (currentClosestPoint.edgeDistance <= 0) {
+    return false;
+  }
+  return candidatePoint.edgeDistance < currentClosestPoint.edgeDistance;
+}
 export const useChartClosestPoint = ({
   params,
   store,
@@ -58,35 +81,47 @@ export const useChartClosestPoint = ({
       let closestPoint = undefined;
       for (const seriesId of seriesOrder ?? []) {
         const aSeries = (series ?? {})[seriesId];
-        const flatbush = flatbushMap.get(seriesId);
-        if (!flatbush) {
+        const entry = flatbushMap.get(seriesId);
+        if (!entry || aSeries.hidden) {
           continue;
         }
+        const {
+          flatbush,
+          getItemRadius,
+          maxItemRadius
+        } = entry;
         const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
         const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
         const xAxisZoom = selectorChartAxisZoomData(store.state, xAxisId);
         const yAxisZoom = selectorChartAxisZoomData(store.state, yAxisId);
-        const maxRadius = resolvedHitAreaRadius === 'item' ? aSeries.markerSize : resolvedHitAreaRadius;
+        const maxRadius = resolvedHitAreaRadius === 'item' ? maxItemRadius : resolvedHitAreaRadius;
         const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
         const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
         const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
         const yZoomEnd = (yAxisZoom?.end ?? 100) / 100;
         const xScale = xAxis[xAxisId].scale;
         const yScale = yAxis[yAxisId].scale;
-        const closestPointIndex = findClosestPoints(flatbush, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
+        const closestPointIndex = findClosestPoints(flatbush, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius, 1, getItemRadius)[0];
         if (closestPointIndex === undefined) {
           continue;
         }
         const point = aSeries.data[closestPointIndex];
         const scaledX = xScale(point.x);
         const scaledY = yScale(point.y);
-        const distSq = (scaledX - svgPoint.x) ** 2 + (scaledY - svgPoint.y) ** 2;
-        if (closestPoint === undefined || distSq < closestPoint.distanceSq) {
-          closestPoint = {
-            dataIndex: closestPointIndex,
-            seriesId,
-            distanceSq: distSq
-          };
+        const centerDist = Math.hypot(scaledX - svgPoint.x, scaledY - svgPoint.y);
+        const closestPointRadius = typeof getItemRadius === 'number' ? getItemRadius : getItemRadius(closestPointIndex);
+        const edgeDistance = centerDist - closestPointRadius;
+        if (resolvedHitAreaRadius === 'item' && edgeDistance > 0) {
+          continue;
+        }
+        const newPoint = {
+          dataIndex: closestPointIndex,
+          seriesId,
+          edgeDistance,
+          radius: closestPointRadius
+        };
+        if (isCloser(newPoint, closestPoint)) {
+          closestPoint = newPoint;
         }
       }
       if (closestPoint === undefined) {

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

@@ -6,6 +6,7 @@ import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/in
 import { type UseChartHighlightSignature } from "../useChartHighlight/index.mjs";
 import { type UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
 import { type UseChartTooltipSignature } from "../useChartTooltip/index.mjs";
+import { type UseChartZAxisSignature } from "../useChartZAxis/index.mjs";
 export interface UseChartVoronoiInstance {
   /**
    * Enable the voronoi computation.
@@ -51,5 +52,5 @@ export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = C
   params: UseChartVoronoiParameters;
   defaultizedParams: UseChartVoronoiDefaultizedParameters;
   dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
-  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature, UseChartZAxisSignature];
 }>;

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

@@ -6,6 +6,7 @@ import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/in
 import { type UseChartHighlightSignature } from "../useChartHighlight/index.js";
 import { type UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import { type UseChartTooltipSignature } from "../useChartTooltip/index.js";
+import { type UseChartZAxisSignature } from "../useChartZAxis/index.js";
 export interface UseChartVoronoiInstance {
   /**
    * Enable the voronoi computation.
@@ -51,5 +52,5 @@ export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = C
   params: UseChartVoronoiParameters;
   defaultizedParams: UseChartVoronoiDefaultizedParameters;
   dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
-  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature, UseChartZAxisSignature];
 }>;

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -12,6 +12,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries");
+var _cleanIdentifier = require("../../corePlugins/useChartSeriesConfig/utils/cleanIdentifier");
 const useChartHighlight = ({
   store,
   params,
@@ -86,9 +87,9 @@ const useChartHighlight = ({
 exports.useChartHighlight = useChartHighlight;
 useChartHighlight.getInitialState = (params, currentState) => ({
   highlight: {
-    item: params.highlightedItem == null ? params.highlightedItem : (0, _useChartSeries.createIdentifierWithType)(currentState)(
+    item: params.highlightedItem == null ? params.highlightedItem : (0, _cleanIdentifier.cleanIdentifier)(currentState.seriesConfig.config, (0, _useChartSeries.createIdentifierWithType)(currentState)(
     // Need some as because the generic SeriesType can't be propagated to plugins methods.
-    params.highlightedItem),
+    params.highlightedItem)),
     lastUpdate: 'pointer',
     isControlled: params.highlightedItem !== undefined
   }

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.mjs

@@ -5,6 +5,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { createIdentifierWithType } from "../../corePlugins/useChartSeries/useChartSeries.mjs";
+import { cleanIdentifier } from "../../corePlugins/useChartSeriesConfig/utils/cleanIdentifier.mjs";
 export const useChartHighlight = ({
   store,
   params,
@@ -78,9 +79,9 @@ export const useChartHighlight = ({
 };
 useChartHighlight.getInitialState = (params, currentState) => ({
   highlight: {
-    item: params.highlightedItem == null ? params.highlightedItem : createIdentifierWithType(currentState)(
+    item: params.highlightedItem == null ? params.highlightedItem : cleanIdentifier(currentState.seriesConfig.config, createIdentifierWithType(currentState)(
     // Need some as because the generic SeriesType can't be propagated to plugins methods.
-    params.highlightedItem),
+    params.highlightedItem)),
     lastUpdate: 'pointer',
     isControlled: params.highlightedItem !== undefined
   }

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

@@ -2,6 +2,10 @@ export declare const generateSvg2rotation: (center: {
   cx: number;
   cy: number;
 }) => (x: number, y: number) => number;
+export declare const generateSvg2radius: (center: {
+  cx: number;
+  cy: number;
+}) => (x: number, y: number) => number;
 export declare const generateSvg2polar: (center: {
   cx: number;
   cy: number;

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

@@ -2,6 +2,10 @@ export declare const generateSvg2rotation: (center: {
   cx: number;
   cy: number;
 }) => (x: number, y: number) => number;
+export declare const generateSvg2radius: (center: {
+  cx: number;
+  cy: number;
+}) => (x: number, y: number) => number;
 export declare const generateSvg2polar: (center: {
   cx: number;
   cy: number;

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

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateSvg2rotation = exports.generateSvg2polar = exports.generatePolar2svg = void 0;
+exports.generateSvg2rotation = exports.generateSvg2radius = exports.generateSvg2polar = exports.generatePolar2svg = void 0;
 const generateSvg2rotation = center => (x, y) => Math.atan2(x - center.cx, center.cy - y);
 exports.generateSvg2rotation = generateSvg2rotation;
+const generateSvg2radius = center => (x, y) => Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2);
+exports.generateSvg2radius = generateSvg2radius;
 const generateSvg2polar = center => (x, y) => {
   const angle = Math.atan2(x - center.cx, center.cy - y);
   return [Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2), angle];

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

@@ -1,4 +1,5 @@
 export const generateSvg2rotation = center => (x, y) => Math.atan2(x - center.cx, center.cy - y);
+export const generateSvg2radius = center => (x, y) => Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2);
 export const generateSvg2polar = center => (x, y) => {
   const angle = Math.atan2(x - center.cx, center.cy - y);
   return [Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2), angle];

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

@@ -19,6 +19,7 @@ var _coordinateTransformation = require("./coordinateTransformation");
 var _getAxisIndex = require("./getAxisIndex");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
+var _isPolar = require("../../../isPolar");
 const useChartPolarAxis = ({
   params,
   store,
@@ -178,9 +179,10 @@ const useChartPolarAxis = ({
       const svgPoint = (0, _getChartPoint.getChartPoint)(element, event.detail.srcEvent);
       const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
       const rotationIndex = (0, _getAxisIndex.getRotationAxisIndex)(rotationAxisWithScale[usedRotationAxisId], rotation);
+      const radius = (0, _coordinateTransformation.generateSvg2radius)(center)(svgPoint.x, svgPoint.y);
+      const radiusIndex = (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxisWithScale[usedRadiusAxisId], radius);
       isRotationAxis = rotationIndex !== -1;
-      dataIndex = isRotationAxis ? rotationIndex : null; // radius index is not yet implemented.
-
+      dataIndex = isRotationAxis ? rotationIndex : radiusIndex;
       const USED_AXIS_ID = isRotationAxis ? usedRotationAxisId : usedRadiusAxisId;
       if (dataIndex == null || dataIndex === -1) {
         return;
@@ -189,7 +191,7 @@ const useChartPolarAxis = ({
       // The .data exist because otherwise the dataIndex would be null or -1.
       const axisValue = (isRotationAxis ? rotationAxisWithScale : radiusAxisWithScale)[USED_AXIS_ID].data[dataIndex];
       const seriesValues = {};
-      Object.keys(processedSeries).filter(seriesType => seriesType === 'radar').forEach(seriesType => {
+      Object.keys(processedSeries).filter(_isPolar.isPolarSeriesType).forEach(seriesType => {
         processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
           const seriesItem = processedSeries[seriesType].series[seriesId];
           seriesValues[seriesId] = seriesItem.data[dataIndex];

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

@@ -8,10 +8,11 @@ import { defaultizeAxis } from "./defaultizeAxis.mjs";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.mjs";
 import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
 import { getChartPoint } from "../../../getChartPoint.mjs";
-import { generatePolar2svg, generateSvg2polar, generateSvg2rotation } from "./coordinateTransformation.mjs";
-import { getRotationAxisIndex } from "./getAxisIndex.mjs";
+import { generatePolar2svg, generateSvg2polar, generateSvg2radius, generateSvg2rotation } from "./coordinateTransformation.mjs";
+import { getRadiusAxisIndex, getRotationAxisIndex } from "./getAxisIndex.mjs";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.mjs";
+import { isPolarSeriesType } from "../../../isPolar.mjs";
 export const useChartPolarAxis = ({
   params,
   store,
@@ -171,9 +172,10 @@ export const useChartPolarAxis = ({
       const svgPoint = getChartPoint(element, event.detail.srcEvent);
       const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
       const rotationIndex = getRotationAxisIndex(rotationAxisWithScale[usedRotationAxisId], rotation);
+      const radius = generateSvg2radius(center)(svgPoint.x, svgPoint.y);
+      const radiusIndex = getRadiusAxisIndex(radiusAxisWithScale[usedRadiusAxisId], radius);
       isRotationAxis = rotationIndex !== -1;
-      dataIndex = isRotationAxis ? rotationIndex : null; // radius index is not yet implemented.
-
+      dataIndex = isRotationAxis ? rotationIndex : radiusIndex;
       const USED_AXIS_ID = isRotationAxis ? usedRotationAxisId : usedRadiusAxisId;
       if (dataIndex == null || dataIndex === -1) {
         return;
@@ -182,7 +184,7 @@ export const useChartPolarAxis = ({
       // The .data exist because otherwise the dataIndex would be null or -1.
       const axisValue = (isRotationAxis ? rotationAxisWithScale : radiusAxisWithScale)[USED_AXIS_ID].data[dataIndex];
       const seriesValues = {};
-      Object.keys(processedSeries).filter(seriesType => seriesType === 'radar').forEach(seriesType => {
+      Object.keys(processedSeries).filter(isPolarSeriesType).forEach(seriesType => {
         processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
           const seriesItem = processedSeries[seriesType].series[seriesId];
           seriesValues[seriesId] = seriesItem.data[dataIndex];

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.js

@@ -11,6 +11,7 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _colorScale = require("../../../colorScale");
+var _sizeScale = require("../../../sizeScale");
 function addDefaultId(axisConfig, defaultId) {
   if (axisConfig.id !== undefined) {
     return axisConfig;
@@ -32,6 +33,19 @@ function processColorMap(axisConfig) {
     }, axisConfig.colorMap) : axisConfig.colorMap)
   });
 }
+function processSizeMap(axisConfig) {
+  if (!axisConfig.sizeMap) {
+    return axisConfig;
+  }
+  return (0, _extends2.default)({}, axisConfig, {
+    sizeScale: axisConfig.sizeMap.type === 'ordinal' ? (0, _sizeScale.getOrdinalSizeScale)((0, _extends2.default)({
+      values: axisConfig.data
+    }, axisConfig.sizeMap)) : (0, _sizeScale.getSizeScale)(axisConfig.sizeMap.type === 'continuous' ? (0, _extends2.default)({
+      min: axisConfig.min,
+      max: axisConfig.max
+    }, axisConfig.sizeMap) : axisConfig.sizeMap)
+  });
+}
 function getZAxisState(zAxis, dataset) {
   if (!zAxis || zAxis.length === 0) {
     return {
@@ -45,16 +59,16 @@ function getZAxisState(zAxis, dataset) {
     const dataKey = axisConfig.dataKey;
     const defaultizedId = axisConfig.id ?? `defaultized-z-axis-${index}`;
     if (axisConfig.data !== undefined || dataKey === undefined && !axisConfig.valueGetter) {
-      zAxisLookup[defaultizedId] = processColorMap(addDefaultId(axisConfig, defaultizedId));
+      zAxisLookup[defaultizedId] = processSizeMap(processColorMap(addDefaultId(axisConfig, defaultizedId)));
       axisIds.push(defaultizedId);
       return;
     }
     if (dataset === undefined) {
       throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: The z-axis uses `dataKey` or `valueGetter` but no `dataset` is provided. ' + 'When using dataKey or valueGetter, a dataset must be provided to retrieve the axis data. ' + 'Either provide a dataset prop or use the data property directly on the z-axis.' : (0, _formatErrorMessage2.default)(41));
     }
-    zAxisLookup[defaultizedId] = processColorMap(addDefaultId((0, _extends2.default)({}, axisConfig, {
+    zAxisLookup[defaultizedId] = processSizeMap(processColorMap(addDefaultId((0, _extends2.default)({}, axisConfig, {
       data: axisConfig.valueGetter ? dataset.map(d => axisConfig.valueGetter(d)) : dataset.map(d => d[dataKey])
-    }), defaultizedId));
+    }), defaultizedId)));
     axisIds.push(defaultizedId);
   });
   return {

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.mjs

@@ -4,6 +4,7 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.mjs";
+import { getSizeScale, getOrdinalSizeScale } from "../../../sizeScale.mjs";
 function addDefaultId(axisConfig, defaultId) {
   if (axisConfig.id !== undefined) {
     return axisConfig;
@@ -25,6 +26,19 @@ function processColorMap(axisConfig) {
     }, axisConfig.colorMap) : axisConfig.colorMap)
   });
 }
+function processSizeMap(axisConfig) {
+  if (!axisConfig.sizeMap) {
+    return axisConfig;
+  }
+  return _extends({}, axisConfig, {
+    sizeScale: axisConfig.sizeMap.type === 'ordinal' ? getOrdinalSizeScale(_extends({
+      values: axisConfig.data
+    }, axisConfig.sizeMap)) : getSizeScale(axisConfig.sizeMap.type === 'continuous' ? _extends({
+      min: axisConfig.min,
+      max: axisConfig.max
+    }, axisConfig.sizeMap) : axisConfig.sizeMap)
+  });
+}
 function getZAxisState(zAxis, dataset) {
   if (!zAxis || zAxis.length === 0) {
     return {
@@ -38,16 +52,16 @@ function getZAxisState(zAxis, dataset) {
     const dataKey = axisConfig.dataKey;
     const defaultizedId = axisConfig.id ?? `defaultized-z-axis-${index}`;
     if (axisConfig.data !== undefined || dataKey === undefined && !axisConfig.valueGetter) {
-      zAxisLookup[defaultizedId] = processColorMap(addDefaultId(axisConfig, defaultizedId));
+      zAxisLookup[defaultizedId] = processSizeMap(processColorMap(addDefaultId(axisConfig, defaultizedId)));
       axisIds.push(defaultizedId);
       return;
     }
     if (dataset === undefined) {
       throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: The z-axis uses `dataKey` or `valueGetter` but no `dataset` is provided. ' + 'When using dataKey or valueGetter, a dataset must be provided to retrieve the axis data. ' + 'Either provide a dataset prop or use the data property directly on the z-axis.' : _formatErrorMessage(41));
     }
-    zAxisLookup[defaultizedId] = processColorMap(addDefaultId(_extends({}, axisConfig, {
+    zAxisLookup[defaultizedId] = processSizeMap(processColorMap(addDefaultId(_extends({}, axisConfig, {
       data: axisConfig.valueGetter ? dataset.map(d => axisConfig.valueGetter(d)) : dataset.map(d => d[dataKey])
-    }), defaultizedId));
+    }), defaultizedId)));
     axisIds.push(defaultizedId);
   });
   return {

package/internals/sizeScale.d.mts

@@ -0,0 +1,6 @@
+import { type ScaleOrdinal, type ScaleThreshold, type ScaleSequential } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousSizeConfig, type PiecewiseSizeConfig, type OrdinalSizeConfig } from "../models/sizeMapping.mjs";
+export declare function getSequentialSizeScale<Value extends number | Date>(config: ContinuousSizeConfig<Value> | PiecewiseSizeConfig<Value>): ScaleThreshold<Value, number, never> | ScaleSequential<number, never>;
+export declare function getOrdinalSizeScale(config: OrdinalSizeConfig): ScaleOrdinal<number | Date | string, number, number | null>;
+export declare function getSizeScale(config: OrdinalSizeConfig): ScaleOrdinal<number | Date | string, number, number | null>;
+export declare function getSizeScale(config: ContinuousSizeConfig | PiecewiseSizeConfig): ScaleThreshold<number | Date, number | null> | ScaleSequential<number, number | null>;

package/internals/sizeScale.d.ts

@@ -0,0 +1,6 @@
+import { type ScaleOrdinal, type ScaleThreshold, type ScaleSequential } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousSizeConfig, type PiecewiseSizeConfig, type OrdinalSizeConfig } from "../models/sizeMapping.js";
+export declare function getSequentialSizeScale<Value extends number | Date>(config: ContinuousSizeConfig<Value> | PiecewiseSizeConfig<Value>): ScaleThreshold<Value, number, never> | ScaleSequential<number, never>;
+export declare function getOrdinalSizeScale(config: OrdinalSizeConfig): ScaleOrdinal<number | Date | string, number, number | null>;
+export declare function getSizeScale(config: OrdinalSizeConfig): ScaleOrdinal<number | Date | string, number, number | null>;
+export declare function getSizeScale(config: ContinuousSizeConfig | PiecewiseSizeConfig): ScaleThreshold<number | Date, number | null> | ScaleSequential<number, number | null>;

package/internals/sizeScale.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOrdinalSizeScale = getOrdinalSizeScale;
+exports.getSequentialSizeScale = getSequentialSizeScale;
+exports.getSizeScale = getSizeScale;
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+const isFunctionInterpolator = config => {
+  return typeof config.size === 'function';
+};
+function getClampedSize(sizes) {
+  const [minSize, maxSize] = sizes;
+  return t => {
+    const clampedT = Math.max(Math.min(t, 1), 0);
+    return minSize + clampedT * (maxSize - minSize);
+  };
+}
+function getSequentialSizeScale(config) {
+  if (config.type === 'piecewise') {
+    return (0, _d3Scale.scaleThreshold)(config.thresholds, config.sizes);
+  }
+  if (isFunctionInterpolator(config)) {
+    return (0, _d3Scale.scaleSequential)([config.min ?? 0, config.max ?? 100], config.size);
+  }
+  const interpolator = config.interpolator ?? 'sqrt';
+  switch (interpolator) {
+    case 'log':
+      return (0, _d3Scale.scaleSequentialLog)([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+    case 'linear':
+      return (0, _d3Scale.scaleSequential)([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+    case 'sqrt':
+    default:
+      return (0, _d3Scale.scaleSequentialSqrt)([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+  }
+}
+function getOrdinalSizeScale(config) {
+  if (config.values) {
+    return (0, _d3Scale.scaleOrdinal)(config.values, config.sizes).unknown(config.unknownSize ?? null);
+  }
+  return (0, _d3Scale.scaleOrdinal)(config.sizes.map((_, index) => index), config.sizes).unknown(config.unknownSize ?? null);
+}
+function getSizeScale(config) {
+  return config.type === 'ordinal' ? getOrdinalSizeScale(config) : getSequentialSizeScale(config);
+}

package/internals/sizeScale.mjs

@@ -0,0 +1,38 @@
+import { scaleOrdinal, scaleThreshold, scaleSequential, scaleSequentialSqrt, scaleSequentialLog } from '@mui/x-charts-vendor/d3-scale';
+const isFunctionInterpolator = config => {
+  return typeof config.size === 'function';
+};
+function getClampedSize(sizes) {
+  const [minSize, maxSize] = sizes;
+  return t => {
+    const clampedT = Math.max(Math.min(t, 1), 0);
+    return minSize + clampedT * (maxSize - minSize);
+  };
+}
+export function getSequentialSizeScale(config) {
+  if (config.type === 'piecewise') {
+    return scaleThreshold(config.thresholds, config.sizes);
+  }
+  if (isFunctionInterpolator(config)) {
+    return scaleSequential([config.min ?? 0, config.max ?? 100], config.size);
+  }
+  const interpolator = config.interpolator ?? 'sqrt';
+  switch (interpolator) {
+    case 'log':
+      return scaleSequentialLog([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+    case 'linear':
+      return scaleSequential([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+    case 'sqrt':
+    default:
+      return scaleSequentialSqrt([config.min ?? 0, config.max ?? 100], getClampedSize(config.size));
+  }
+}
+export function getOrdinalSizeScale(config) {
+  if (config.values) {
+    return scaleOrdinal(config.values, config.sizes).unknown(config.unknownSize ?? null);
+  }
+  return scaleOrdinal(config.sizes.map((_, index) => index), config.sizes).unknown(config.unknownSize ?? null);
+}
+export function getSizeScale(config) {
+  return config.type === 'ordinal' ? getOrdinalSizeScale(config) : getSequentialSizeScale(config);
+}