@mui/x-charts 8.8.0 → 8.9.2

package/hooks/useTicks.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getTicks = getTicks;
 exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
 var _ChartProvider = require("../context/ChartProvider");
@@ -16,7 +17,7 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
-function useTicks(options) {
+function getTicks(options) {
   const {
     scale,
     tickNumber,
@@ -24,75 +25,111 @@ function useTicks(options) {
     tickInterval,
     tickPlacement = 'extremities',
     tickLabelPlacement: tickLabelPlacementProp,
-    direction
+    isInside
   } = options;
-  const {
-    instance
-  } = (0, _ChartProvider.useChartContext)();
-  return React.useMemo(() => {
-    // band scale
-    if ((0, _isBandScale.isBandScale)(scale)) {
-      const domain = scale.domain();
-      const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
-      if (scale.bandwidth() > 0) {
-        // scale type = 'band'
-        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-        return [...filteredDomain.map(value => ({
+
+  // band scale
+  if ((0, _isBandScale.isBandScale)(scale)) {
+    const domain = scale.domain();
+    const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
+    if (scale.bandwidth() > 0) {
+      // scale type = 'band'
+      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+      return [...filteredDomain.map(value => {
+        const defaultTickLabel = `${value}`;
+        return {
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick',
-            scale
-          }) ?? `${value}`,
+            scale,
+            tickNumber,
+            defaultTickLabel
+          }) ?? defaultTickLabel,
           offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
           labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
-        })), ...(tickPlacement === 'extremities' ? [{
-          formattedValue: undefined,
-          offset: scale.range()[1],
-          labelOffset: 0
-        }] : [])];
-      }
+        };
+      }), ...(tickPlacement === 'extremities' ? [{
+        formattedValue: undefined,
+        offset: scale.range()[1],
+        labelOffset: 0
+      }] : [])];
+    }
 
-      // scale type = 'point'
-      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-      return filteredDomain.map(value => ({
+    // scale type = 'point'
+    const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+    return filteredDomain.map(value => {
+      const defaultTickLabel = `${value}`;
+      return {
         value,
         formattedValue: valueFormatter?.(value, {
           location: 'tick',
-          scale
-        }) ?? `${value}`,
+          scale,
+          tickNumber,
+          defaultTickLabel
+        }) ?? defaultTickLabel,
         offset: scale(value),
         labelOffset: 0
-      }));
-    }
-    const domain = scale.domain();
-    // Skip axis rendering if no data is available
-    // - The domains contains Infinity for continuous scales.
-    if (domain.some(_isInfinity.isInfinity)) {
-      return [];
-    }
-    const tickLabelPlacement = tickLabelPlacementProp;
-    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+      };
+    });
+  }
+  const domain = scale.domain();
+  // Skip axis rendering if no data is available
+  // - The domains contains Infinity for continuous scales.
+  if (domain.some(_isInfinity.isInfinity)) {
+    return [];
+  }
+  const tickLabelPlacement = tickLabelPlacementProp;
+  const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
 
-    // Ticks inside the drawing area
-    const visibleTicks = [];
-    for (let i = 0; i < ticks.length; i += 1) {
-      const value = ticks[i];
-      const offset = scale(value);
-      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
-      if (isInside) {
-        visibleTicks.push({
-          value,
-          formattedValue: valueFormatter?.(value, {
-            location: 'tick',
-            scale
-          }) ?? scale.tickFormat(tickNumber)(value),
-          offset,
-          // Allowing the label to be placed in the middle of a continuous scale is weird.
-          // But it is useful in some cases, like funnel categories with a linear scale.
-          labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (offset + scale(ticks[i - 1] ?? 0)) / 2 : 0
-        });
-      }
+  // Ticks inside the drawing area
+  const visibleTicks = [];
+  for (let i = 0; i < ticks.length; i += 1) {
+    const value = ticks[i];
+    const offset = scale(value);
+    if (isInside(offset)) {
+      /* If d3 returns an empty string, it means that a tick should be shown, but its label shouldn't.
+       * This is especially useful in a log scale where we want to show ticks to demonstrate it's a log
+       * scale, but don't want to show labels because they would overlap.
+       * https://github.com/mui/mui-x/issues/18239 */
+      const defaultTickLabel = scale.tickFormat(tickNumber)(value);
+      visibleTicks.push({
+        value,
+        formattedValue: valueFormatter?.(value, {
+          location: 'tick',
+          scale,
+          tickNumber,
+          defaultTickLabel
+        }) ?? defaultTickLabel,
+        offset,
+        // Allowing the label to be placed in the middle of a continuous scale is weird.
+        // But it is useful in some cases, like funnel categories with a linear scale.
+        labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (offset + scale(ticks[i - 1] ?? 0)) / 2 : 0
+      });
     }
-    return visibleTicks;
-  }, [scale, tickLabelPlacementProp, tickInterval, tickNumber, tickPlacement, valueFormatter, direction, instance]);
+  }
+  return visibleTicks;
+}
+function useTicks(options) {
+  const {
+    scale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement = 'extremities',
+    tickLabelPlacement,
+    direction
+  } = options;
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const isInside = direction === 'x' ? instance.isXInside : instance.isYInside;
+  return React.useMemo(() => getTicks({
+    scale,
+    tickNumber,
+    tickPlacement,
+    tickInterval,
+    tickLabelPlacement,
+    valueFormatter,
+    isInside
+  }), [scale, tickNumber, tickPlacement, tickInterval, tickLabelPlacement, valueFormatter, isInside]);
 }

package/index.d.ts

@@ -26,4 +26,5 @@ export * from "./ChartsSurface/index.js";
 export { ChartContainer } from "./ChartContainer/index.js";
 export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
-export * from "./Toolbar/index.js";
+export * from "./Toolbar/index.js";
+export * from "./ChartsWrapper/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.8.0
+ * @mui/x-charts v8.9.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -343,4 +343,16 @@ Object.keys(_Toolbar).forEach(function (key) {
       return _Toolbar[key];
     }
   });
+});
+var _ChartsWrapper = require("./ChartsWrapper");
+Object.keys(_ChartsWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsWrapper[key];
+    }
+  });
 });

package/internals/findMinMax.d.ts

@@ -0,0 +1 @@
+export declare function findMinMax(data: readonly number[]): [number, number];

package/internals/findMinMax.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findMinMax = findMinMax;
+function findMinMax(data) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const value of data ?? []) {
+    if (value < min) {
+      min = value;
+    }
+    if (value > max) {
+      max = value;
+    }
+  }
+  return [min, max];
+}

package/internals/getScale.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getScale = getScale;
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+var _symlogScale = require("./symlogScale");
 function getScale(scaleType, domain, range) {
   switch (scaleType) {
     case 'log':
@@ -17,6 +18,8 @@ function getScale(scaleType, domain, range) {
       return (0, _d3Scale.scaleTime)(domain, range);
     case 'utc':
       return (0, _d3Scale.scaleUtc)(domain, range);
+    case 'symlog':
+      return (0, _symlogScale.scaleSymlog)(domain, range);
     default:
       return (0, _d3Scale.scaleLinear)(domain, range);
   }

package/internals/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
 export { useSeries } from "../hooks/useSeries.js";
@@ -54,6 +53,7 @@ export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./isBandScale.js";
+export * from "./findMinMax.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";

package/internals/index.js

@@ -122,18 +122,6 @@ Object.keys(_ChartsAxesGradients).forEach(function (key) {
     }
   });
 });
-var _ChartsWrapper = require("./components/ChartsWrapper");
-Object.keys(_ChartsWrapper).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartsWrapper[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartsWrapper[key];
-    }
-  });
-});
 var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 Object.keys(_ChartsLabelMark).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -628,6 +616,18 @@ Object.keys(_isBandScale).forEach(function (key) {
     }
   });
 });
+var _findMinMax = require("./findMinMax");
+Object.keys(_findMinMax).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _findMinMax[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _findMinMax[key];
+    }
+  });
+});
 var _getAxisExtremum = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum");
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -121,6 +121,9 @@ function computeAxisValue({
     const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, zoomRange);
     const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
     const scale = (0, _getScale.getScale)(scaleType, axisExtremums, zoomedRange);
+    if ((0, _axis.isSymlogScaleConfig)(axis) && axis.constant != null) {
+      scale.constant(axis.constant);
+    }
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];

package/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.d.ts

@@ -1,3 +1,3 @@
 import { HighlightScope } from "./highlightConfig.types.js";
 import { HighlightItemData } from "./useChartHighlight.types.js";
-export declare const createIsFaded: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (item: HighlightItemData | null) => boolean;
+export declare function createIsFaded(highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;

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

@@ -3,17 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createIsFaded = void 0;
-const createIsFaded = (highlightScope, highlightedItem) => item => {
-  if (!highlightScope || !highlightedItem || !item) {
-    return false;
-  }
-  if (highlightScope.fade === 'series') {
-    return item.seriesId === highlightedItem.seriesId && item.dataIndex !== highlightedItem.dataIndex;
-  }
-  if (highlightScope.fade === 'global') {
-    return item.seriesId !== highlightedItem.seriesId || item.dataIndex !== highlightedItem.dataIndex;
-  }
+exports.createIsFaded = createIsFaded;
+function alwaysFalse() {
   return false;
-};
-exports.createIsFaded = createIsFaded;
+}
+function createIsFaded(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isFaded(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.fade === 'series') {
+      return item.seriesId === highlightedItem.seriesId && item.dataIndex !== highlightedItem.dataIndex;
+    }
+    if (highlightScope.fade === 'global') {
+      return item.seriesId !== highlightedItem.seriesId || item.dataIndex !== highlightedItem.dataIndex;
+    }
+    return false;
+  };
+}

package/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.d.ts

@@ -1,3 +1,3 @@
 import { HighlightScope } from "./highlightConfig.types.js";
 import { HighlightItemData } from "./useChartHighlight.types.js";
-export declare const createIsHighlighted: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (item: HighlightItemData | null) => boolean;
+export declare function createIsHighlighted(highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;

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

@@ -3,17 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createIsHighlighted = void 0;
-const createIsHighlighted = (highlightScope, highlightedItem) => item => {
-  if (!highlightScope || !highlightedItem || !item) {
-    return false;
-  }
-  if (highlightScope.highlight === 'series') {
-    return item.seriesId === highlightedItem.seriesId;
-  }
-  if (highlightScope.highlight === 'item') {
-    return item.dataIndex === highlightedItem.dataIndex && item.seriesId === highlightedItem.seriesId;
-  }
+exports.createIsHighlighted = createIsHighlighted;
+function alwaysFalse() {
   return false;
-};
-exports.createIsHighlighted = createIsHighlighted;
+}
+function createIsHighlighted(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isHighlighted(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.highlight === 'series') {
+      return item.seriesId === highlightedItem.seriesId;
+    }
+    if (highlightScope.highlight === 'item') {
+      return item.dataIndex === highlightedItem.dataIndex && item.seriesId === highlightedItem.seriesId;
+    }
+    return false;
+  };
+}

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

@@ -20,8 +20,10 @@ const selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightS
   });
   return map;
 });
-const selectorChartsHighlightedItem = exports.selectorChartsHighlightedItem = (0, _selectors.createSelector)([selectHighlight], highlight => highlight.item);
-const selectorChartsHighlightScope = exports.selectorChartsHighlightScope = (0, _selectors.createSelector)([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], (seriesIdToHighlightScope, highlightedItem) => {
+const selectorChartsHighlightedItem = exports.selectorChartsHighlightedItem = (0, _selectors.createSelector)([selectHighlight], function selectorChartsHighlightedItem(highlight) {
+  return highlight.item;
+});
+const selectorChartsHighlightScope = exports.selectorChartsHighlightScope = (0, _selectors.createSelector)([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], function selectorChartsHighlightScope(seriesIdToHighlightScope, highlightedItem) {
   if (!highlightedItem) {
     return null;
   }
@@ -33,5 +35,9 @@ const selectorChartsHighlightScope = exports.selectorChartsHighlightScope = (0,
 });
 const selectorChartsIsHighlightedCallback = exports.selectorChartsIsHighlightedCallback = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem], _createIsHighlighted.createIsHighlighted);
 const selectorChartsIsFadedCallback = exports.selectorChartsIsFadedCallback = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem], _createIsFaded.createIsFaded);
-const selectorChartsIsHighlighted = exports.selectorChartsIsHighlighted = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], (highlightScope, highlightedItem, item) => (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem)(item));
-const selectorChartsIsFaded = exports.selectorChartsIsFaded = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], (highlightScope, highlightedItem, item) => (0, _createIsFaded.createIsFaded)(highlightScope, highlightedItem)(item));
+const selectorChartsIsHighlighted = exports.selectorChartsIsHighlighted = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsHighlighted(highlightScope, highlightedItem, item) {
+  return (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem)(item);
+});
+const selectorChartsIsFaded = exports.selectorChartsIsFaded = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsFaded(highlightScope, highlightedItem, item) {
+  return (0, _createIsFaded.createIsFaded)(highlightScope, highlightedItem)(item);
+});

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -11,7 +11,7 @@ var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompa
 const useChartInteraction = ({
   store
 }) => {
-  const cleanInteraction = (0, _useEventCallback.default)(() => {
+  const cleanInteraction = (0, _useEventCallback.default)(function cleanInteraction() {
     store.update(prev => {
       return (0, _extends2.default)({}, prev, {
         interaction: {
@@ -21,7 +21,7 @@ const useChartInteraction = ({
       });
     });
   });
-  const removeItemInteraction = (0, _useEventCallback.default)(itemToRemove => {
+  const removeItemInteraction = (0, _useEventCallback.default)(function removeItemInteraction(itemToRemove) {
     store.update(prev => {
       const prevItem = prev.interaction.item;
       if (!itemToRemove) {
@@ -43,7 +43,7 @@ const useChartInteraction = ({
       });
     });
   });
-  const setItemInteraction = (0, _useEventCallback.default)(newItem => {
+  const setItemInteraction = (0, _useEventCallback.default)(function setItemInteraction(newItem) {
     store.update(prev => {
       if ((0, _fastObjectShallowCompare.fastObjectShallowCompare)(prev.interaction.item, newItem)) {
         return prev;
@@ -55,7 +55,7 @@ const useChartInteraction = ({
       });
     });
   });
-  const setPointerCoordinate = (0, _useEventCallback.default)(coordinate => {
+  const setPointerCoordinate = (0, _useEventCallback.default)(function setPointerCoordinate(coordinate) {
     store.update(prev => (0, _extends2.default)({}, prev, {
       interaction: (0, _extends2.default)({}, prev.interaction, {
         pointer: coordinate

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

@@ -17,6 +17,8 @@ var _useChartInteraction = require("../useChartInteraction");
 var _useChartPolarAxis = require("./useChartPolarAxis.selectors");
 var _getSVGPoint = require("../../../getSVGPoint");
 var _coordinateTransformation = require("./coordinateTransformation");
+var _getAxisIndex = require("./getAxisIndex");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
 const useChartPolarAxis = ({
   params,
   store,
@@ -37,6 +39,7 @@ const useChartPolarAxis = ({
     }
   }
   const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const processedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
   const center = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
   const isInteractionEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsInitialized);
   const {
@@ -163,6 +166,45 @@ const useChartPolarAxis = ({
       pressEndHandler.cleanup();
     };
   }, [svgRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    const onAxisClick = params.onAxisClick;
+    if (element === null || !onAxisClick) {
+      return () => {};
+    }
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
+      let dataIndex = null;
+      let isRotationAxis = false;
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event.detail.srcEvent);
+      const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
+      const rotationIndex = (0, _getAxisIndex.getAxisIndex)(rotationAxisWithScale[usedRotationAxisId], rotation);
+      isRotationAxis = rotationIndex !== -1;
+      dataIndex = isRotationAxis ? rotationIndex : null; // radius index is not yet implemented.
+
+      const USED_AXIS_ID = isRotationAxis ? usedRotationAxisId : usedRadiusAxisId;
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // 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 => {
+        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+          const seriesItem = processedSeries[seriesType].series[seriesId];
+          seriesValues[seriesId] = seriesItem.data[dataIndex];
+        });
+      });
+      onAxisClick(event.detail.srcEvent, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    });
+    return () => {
+      axisClickHandler.cleanup();
+    };
+  }, [center, instance, params.onAxisClick, processedSeries, radiusAxisWithScale, rotationAxisWithScale, svgRef, usedRadiusAxisId, usedRotationAxisId]);
   return {
     instance: {
       svg2polar,
@@ -176,7 +218,8 @@ useChartPolarAxis.params = {
   rotationAxis: true,
   radiusAxis: true,
   dataset: true,
-  disableAxisListener: true
+  disableAxisListener: true,
+  onAxisClick: true
 };
 useChartPolarAxis.getInitialState = params => ({
   polarAxis: {

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

@@ -1,6 +1,6 @@
 import { ChartPluginSignature } from "../../models/index.js";
 import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import { ScaleName, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps, RadiusAxis, RotationAxis } from "../../../../models/axis.js";
+import { ScaleName, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps, RadiusAxis, RotationAxis, ChartsAxisData } from "../../../../models/axis.js";
 import { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
 import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 export interface UseChartPolarAxisInstance {
@@ -49,6 +49,13 @@ export interface UseChartPolarAxisParameters {
    * @default false
    */
   disableAxisListener?: boolean;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
 }
 export type UseChartPolarAxisDefaultizedParameters = UseChartPolarAxisParameters & {};
 export interface UseChartPolarAxisState {

package/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -74,22 +74,24 @@ const useChartVoronoi = ({
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
       const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-      const seriesPoints = data.flatMap(({
-        x,
-        y
-      }) => {
+      const seriesPoints = [];
+      const seriesIndexes = [];
+      for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
+        const {
+          x,
+          y
+        } = data[dataIndex];
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!instance.isPointInside(pointX, pointY)) {
-          // If the point is not displayed we move them to a trash coordinate.
-          // This avoids managing index mapping before/after filtering.
-          // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
-          return [-drawingArea.width, -drawingArea.height];
+        if (instance.isPointInside(pointX, pointY)) {
+          seriesPoints.push(pointX);
+          seriesPoints.push(pointY);
+          seriesIndexes.push(dataIndex);
         }
-        return [pointX, pointY];
-      });
+      }
       voronoiRef.current[seriesId] = {
         seriesId,
+        seriesIndexes,
         startIndex: points.length,
         endIndex: points.length + seriesPoints.length
       };
@@ -124,7 +126,10 @@ const useChartVoronoi = ({
       if (closestSeries === undefined) {
         return 'no-point-found';
       }
-      const dataIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
+
+      // The point index in the series with id=closestSeries.seriesId.
+      const seriesPointIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
+      const dataIndex = voronoiRef.current[closestSeries.seriesId].seriesIndexes[seriesPointIndex];
       if (voronoiMaxRadius !== undefined) {
         const pointX = delauneyRef.current.points[2 * closestPointIndex];
         const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];

package/internals/symlogScale.d.ts

@@ -0,0 +1,2 @@
+import { NumberValue, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
+export declare function scaleSymlog<Range, Output = Range, Unknown = never>(_domain: Iterable<NumberValue>, _range: Iterable<Range>): ScaleSymLog<Range, Output, Unknown>;