@mui/x-charts 9.3.0 → 9.5.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -24,6 +24,8 @@ var _domain = require("./domain");
 var _Flatbush = require("../../../Flatbush");
 var _useChartSeriesConfig = require("../../corePlugins/useChartSeriesConfig");
 var _useChartAxisExtrema = require("./useChartAxisExtrema.selectors");
+var _useChartZAxis = require("../useChartZAxis");
+var _getMarkerSize = _interopRequireDefault(require("../../../../ScatterChart/seriesConfig/getMarkerSize"));
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -257,29 +259,46 @@ const selectorChartDefaultYAxisId = exports.selectorChartDefaultYAxisId = (0, _s
 const EMPTY_MAP = new Map();
 const selectorChartSeriesEmptyFlatbushMap = () => EMPTY_MAP;
 exports.selectorChartSeriesEmptyFlatbushMap = selectorChartSeriesEmptyFlatbushMap;
-const selectorChartSeriesFlatbushMap = exports.selectorChartSeriesFlatbushMap = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId) {
+const selectorChartSeriesFlatbushMap = exports.selectorChartSeriesFlatbushMap = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, _useChartZAxis.selectorChartZAxis, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId, zAxisState) {
   // FIXME: Do we want to support non-scatter series here?
   const validSeries = allSeries.scatter;
   const flatbushMap = new Map();
   if (!validSeries) {
     return flatbushMap;
   }
+  const zAxes = zAxisState?.axis ?? {};
+  const zAxisIds = zAxisState?.axisIds ?? [];
   validSeries.seriesOrder.forEach(seriesId => {
+    const series = validSeries.series[seriesId];
     const {
       data,
       xAxisId = defaultXAxisId,
       yAxisId = defaultYAxisId
-    } = validSeries.series[seriesId];
+    } = series;
+    if (data.length === 0) {
+      return;
+    }
     const flatbush = new _Flatbush.Flatbush(data.length);
+    const sizeAxis = zAxes[series.sizeAxisId ?? zAxisIds[0]];
+    const isFixedSize = !sizeAxis || !sizeAxis.sizeScale;
+    const getItemRadius = isFixedSize ? series.markerSize ?? 0 : (0, _getMarkerSize.default)(series, sizeAxis);
+    let maxItemRadius = isFixedSize ? getItemRadius : 0;
     const originalXScale = xAxesScaleMap[xAxisId];
     const originalYScale = yAxesScaleMap[yAxisId];
-    for (const datum of data) {
+    for (let i = 0; i < data.length; i += 1) {
+      if (!isFixedSize) {
+        maxItemRadius = Math.max(maxItemRadius, getItemRadius(i));
+      }
       // Add the points using a [0, 1] range so that we don't need to recreate the Flatbush structure when zooming.
       // This doesn't happen in practice, though, because currently the scales depend on the drawing area.
-      flatbush.add(originalXScale(datum.x), originalYScale(datum.y));
+      flatbush.add(originalXScale(data[i].x), originalYScale(data[i].y));
     }
     flatbush.finish();
-    flatbushMap.set(seriesId, flatbush);
+    flatbushMap.set(seriesId, {
+      flatbush,
+      getItemRadius,
+      maxItemRadius
+    });
   });
   return flatbushMap;
 });

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs

@@ -17,6 +17,8 @@ import { calculateFinalDomain, computeAxisDomainsMap } from "./domain.mjs";
 import { Flatbush } from "../../../Flatbush.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
 import { selectorChartXAxisExtrema, selectorChartYAxisExtrema } from "./useChartAxisExtrema.selectors.mjs";
+import { selectorChartZAxis } from "../useChartZAxis/index.mjs";
+import getMarkerSize from "../../../../ScatterChart/seriesConfig/getMarkerSize.mjs";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -248,29 +250,46 @@ export const selectorChartDefaultXAxisId = createSelector(selectorChartRawXAxis,
 export const selectorChartDefaultYAxisId = createSelector(selectorChartRawYAxis, yAxes => yAxes[0].id);
 const EMPTY_MAP = new Map();
 export const selectorChartSeriesEmptyFlatbushMap = () => EMPTY_MAP;
-export const selectorChartSeriesFlatbushMap = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId) {
+export const selectorChartSeriesFlatbushMap = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartDefaultXAxisId, selectorChartDefaultYAxisId, selectorChartZAxis, function selectChartSeriesFlatbushMap(allSeries, xAxesScaleMap, yAxesScaleMap, defaultXAxisId, defaultYAxisId, zAxisState) {
   // FIXME: Do we want to support non-scatter series here?
   const validSeries = allSeries.scatter;
   const flatbushMap = new Map();
   if (!validSeries) {
     return flatbushMap;
   }
+  const zAxes = zAxisState?.axis ?? {};
+  const zAxisIds = zAxisState?.axisIds ?? [];
   validSeries.seriesOrder.forEach(seriesId => {
+    const series = validSeries.series[seriesId];
     const {
       data,
       xAxisId = defaultXAxisId,
       yAxisId = defaultYAxisId
-    } = validSeries.series[seriesId];
+    } = series;
+    if (data.length === 0) {
+      return;
+    }
     const flatbush = new Flatbush(data.length);
+    const sizeAxis = zAxes[series.sizeAxisId ?? zAxisIds[0]];
+    const isFixedSize = !sizeAxis || !sizeAxis.sizeScale;
+    const getItemRadius = isFixedSize ? series.markerSize ?? 0 : getMarkerSize(series, sizeAxis);
+    let maxItemRadius = isFixedSize ? getItemRadius : 0;
     const originalXScale = xAxesScaleMap[xAxisId];
     const originalYScale = yAxesScaleMap[yAxisId];
-    for (const datum of data) {
+    for (let i = 0; i < data.length; i += 1) {
+      if (!isFixedSize) {
+        maxItemRadius = Math.max(maxItemRadius, getItemRadius(i));
+      }
       // Add the points using a [0, 1] range so that we don't need to recreate the Flatbush structure when zooming.
       // This doesn't happen in practice, though, because currently the scales depend on the drawing area.
-      flatbush.add(originalXScale(datum.x), originalYScale(datum.y));
+      flatbush.add(originalXScale(data[i].x), originalYScale(data[i].y));
     }
     flatbush.finish();
-    flatbushMap.set(seriesId, flatbush);
+    flatbushMap.set(seriesId, {
+      flatbush,
+      getItemRadius,
+      maxItemRadius
+    });
   });
   return flatbushMap;
 });

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

@@ -1,4 +1,4 @@
 import { type ScatterValueType } from "../../../../models/seriesType/scatter.mjs";
 import { type Flatbush } from "../../../Flatbush.mjs";
 import { type D3Scale } from "../../../../models/axis.mjs";
-export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number): number[];
+export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number, getItemRadius?: number | ((dataIndex: number) => number)): number[];

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

@@ -1,4 +1,4 @@
 import { type ScatterValueType } from "../../../../models/seriesType/scatter.js";
 import { type Flatbush } from "../../../Flatbush.js";
 import { type D3Scale } from "../../../../models/axis.js";
-export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number): number[];
+export declare function findClosestPoints(flatbush: Flatbush, seriesData: readonly ScatterValueType[], xScale: D3Scale, yScale: D3Scale, xZoomStart: number, xZoomEnd: number, yZoomStart: number, yZoomEnd: number, svgPointX: number, svgPointY: number, maxRadius?: number, maxResults?: number, getItemRadius?: number | ((dataIndex: number) => number)): number[];

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.findClosestPoints = findClosestPoints;
 var _scaleGuards = require("../../../scaleGuards");
-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;
+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]);
@@ -28,7 +30,49 @@ function findClosestPoints(flatbush, seriesData, xScale, yScale, xZoomStart, xZo
   }
   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 ((0, _scaleGuards.isOrdinalScale)(scale)) {

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];