@mui/x-charts 8.8.0 → 8.9.0

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { RadarItemIdentifier } from "../../models/seriesType/radar.js";
 interface CommonRadarSeriesPlotProps {
   /**
    * The id of the series to display.
@@ -11,7 +12,35 @@ interface CommonRadarSeriesPlotProps {
    */
   classes?: Partial<RadarSeriesPlotClasses>;
 }
-export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {}
-export interface RadarSeriesMarksProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGCircleElement> {}
-export interface RadarSeriesAreaProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGPathElement> {}
+export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
+  /**
+   * Callback fired when an area is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onAreaClick?: RadarSeriesAreaProps['onItemClick'];
+  /**
+   * Callback fired when a mark is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onMarkClick?: RadarSeriesMarksProps['onItemClick'];
+}
+type RadarClickIdentifier = Required<RadarItemIdentifier>;
+export interface RadarSeriesMarksProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGCircleElement> {
+  /**
+   * Callback fired when a mark is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+}
+export interface RadarSeriesAreaProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGPathElement> {
+  /**
+   * Callback fired when an area is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+}
 export {};

package/esm/RadarChart/RadarSeriesPlot/useRadarRotationIndex.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This hook provides a function that from pointer event returns the rotation index.
+ * @return {(event: { clientX: number; clientY: number }) => number | null} rotationIndexGetter Returns the rotation data index.
+ */
+export declare function useRadarRotationIndex(): (event: {
+  clientX: number;
+  clientY: number;
+}) => number;

package/esm/RadarChart/RadarSeriesPlot/useRadarRotationIndex.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { getSVGPoint } from "../../internals/getSVGPoint.js";
+import { generateSvg2rotation } from "../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js";
+import { useSelector } from "../../internals/store/useSelector.js";
+import { getAxisIndex } from "../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js";
+import { useStore } from "../../internals/store/useStore.js";
+import { useSvgRef } from "../../hooks/useSvgRef.js";
+import { useRotationAxis } from "../../hooks/useAxis.js";
+
+/**
+ * This hook provides a function that from pointer event returns the rotation index.
+ * @return {(event: { clientX: number; clientY: number }) => number | null} rotationIndexGetter Returns the rotation data index.
+ */
+export function useRadarRotationIndex() {
+  const svgRef = useSvgRef();
+  const store = useStore();
+  const rotationAxis = useRotationAxis();
+  const center = useSelector(store, selectorChartPolarCenter);
+  const rotationIndexGetter = React.useCallback(function rotationIndexGetter(event) {
+    const element = svgRef.current;
+    if (!element || !rotationAxis) {
+      // Should never append
+      throw new Error(`MUI X Charts: The ${!element ? 'SVG' : 'rotation axis'} was not found to compute radar dataIndex.`);
+    }
+    const svgPoint = getSVGPoint(element, event);
+    const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
+    const rotationIndex = getAxisIndex(rotationAxis, rotation);
+    return rotationIndex;
+  }, [center, rotationAxis, svgRef]);
+  return rotationIndexGetter;
+}

package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -17,8 +17,8 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   }[];
   type: "radar";
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-  highlightScope?: Partial<import("../../index.js").HighlightScope> | undefined;
-  labelMarkType?: "line" | "square" | "circle" | import("react").ComponentType<import("../../index.js").ChartsLabelCustomMarkProps> | undefined;
+  highlightScope?: import("../../index.js").HighlightScope | undefined;
+  labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];

package/esm/RadarChart/index.d.ts

@@ -3,7 +3,7 @@ export { RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
 export { RadarDataProvider } from "./RadarDataProvider/index.js";
 export type { RadarChartProps, RadarChartSlots, RadarChartSlotProps } from "./RadarChart.js";
-export type { RadarDataProviderProps } from "./RadarDataProvider/index.js";
+export type { RadarDataProviderProps, RadarSeries } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";

package/esm/RadarChart/useRadarChartProps.d.ts

@@ -6,6 +6,7 @@ import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
 import { RadarChartPluginsSignatures } from "./RadarChart.plugins.js";
+import { RadarSeriesAreaProps, RadarSeriesMarksProps } from "./RadarSeriesPlot/index.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -19,6 +20,8 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   chartsSurfaceProps: ChartsSurfaceProps;
   radarDataProviderProps: RadarDataProviderProps<RadarChartPluginsSignatures>;
   radarGrid: RadarGridProps;
+  radarSeriesAreaProps: RadarSeriesAreaProps;
+  radarSeriesMarksProps: RadarSeriesMarksProps;
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
   children: import("react").ReactNode;

package/esm/RadarChart/useRadarChartProps.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -29,7 +29,10 @@ export const useRadarChartProps = props => {
       divisions,
       shape,
       stripeColor,
-      highlight = 'axis'
+      highlight = 'axis',
+      onAxisClick,
+      onAreaClick,
+      onMarkClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const radarDataProviderProps = {
@@ -43,7 +46,8 @@ export const useRadarChartProps = props => {
     colors,
     highlightedItem,
     onHighlightChange,
-    skipAnimation
+    skipAnimation,
+    onAxisClick
   };
   const overlayProps = {
     slots,
@@ -62,6 +66,12 @@ export const useRadarChartProps = props => {
     shape,
     stripeColor
   };
+  const radarSeriesAreaProps = {
+    onItemClick: onAreaClick
+  };
+  const radarSeriesMarksProps = {
+    onItemClick: onMarkClick
+  };
   const chartsSurfaceProps = other;
   return {
     highlight,
@@ -69,6 +79,8 @@ export const useRadarChartProps = props => {
     chartsSurfaceProps,
     radarDataProviderProps,
     radarGrid,
+    radarSeriesAreaProps,
+    radarSeriesMarksProps,
     overlayProps,
     legendProps,
     children

package/esm/ScatterChart/ScatterChart.d.ts

@@ -16,12 +16,13 @@ import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/us
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
-  series: Readonly<MakeOptional<ScatterSeriesType, 'type'>[]>;
+  series: Readonly<ScatterSeries[]>;
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.

package/esm/ScatterChart/ScatterChart.js

@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * The series to display in the scatter chart.
-   * An array of [[ScatterSeriesType]] objects.
+   * An array of [[ScatterSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/hooks/useTicks.d.ts

@@ -49,8 +49,13 @@ export type TickItemType = {
   offset: number;
   labelOffset: number;
 };
+export declare function getTicks(options: {
+  scale: D3Scale;
+  valueFormatter?: AxisConfig['valueFormatter'];
+  isInside: (offset: number) => boolean;
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
   direction: 'x' | 'y';
-} & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];

package/esm/hooks/useTicks.js

@@ -10,7 +10,7 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
-export function useTicks(options) {
+export function getTicks(options) {
   const {
     scale,
     tickNumber,
@@ -18,75 +18,111 @@ export function useTicks(options) {
     tickInterval,
     tickPlacement = 'extremities',
     tickLabelPlacement: tickLabelPlacementProp,
-    direction
+    isInside
   } = options;
-  const {
-    instance
-  } = useChartContext();
-  return React.useMemo(() => {
-    // band scale
-    if (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 (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)) {
-      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)) {
+    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;
+}
+export function useTicks(options) {
+  const {
+    scale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement = 'extremities',
+    tickLabelPlacement,
+    direction
+  } = options;
+  const {
+    instance
+  } = 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/esm/index.js

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

package/esm/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/esm/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.js

@@ -1,12 +1,20 @@
-export 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;
-  }
+function alwaysFalse() {
   return false;
-};
+}
+export 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/esm/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/esm/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.js

@@ -1,12 +1,20 @@
-export 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;
-  }
+function alwaysFalse() {
   return false;
-};
+}
+export 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/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -14,8 +14,10 @@ export const selectorChartsHighlightScopePerSeriesId = createSelector([selectSer
   });
   return map;
 });
-export const selectorChartsHighlightedItem = createSelector([selectHighlight], highlight => highlight.item);
-export const selectorChartsHighlightScope = createSelector([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], (seriesIdToHighlightScope, highlightedItem) => {
+export const selectorChartsHighlightedItem = createSelector([selectHighlight], function selectorChartsHighlightedItem(highlight) {
+  return highlight.item;
+});
+export const selectorChartsHighlightScope = createSelector([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], function selectorChartsHighlightScope(seriesIdToHighlightScope, highlightedItem) {
   if (!highlightedItem) {
     return null;
   }
@@ -27,5 +29,9 @@ export const selectorChartsHighlightScope = createSelector([selectorChartsHighli
 });
 export const selectorChartsIsHighlightedCallback = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], createIsHighlighted);
 export const selectorChartsIsFadedCallback = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], createIsFaded);
-export const selectorChartsIsHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], (highlightScope, highlightedItem, item) => createIsHighlighted(highlightScope, highlightedItem)(item));
-export const selectorChartsIsFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], (highlightScope, highlightedItem, item) => createIsFaded(highlightScope, highlightedItem)(item));
+export const selectorChartsIsHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsHighlighted(highlightScope, highlightedItem, item) {
+  return createIsHighlighted(highlightScope, highlightedItem)(item);
+});
+export const selectorChartsIsFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsFaded(highlightScope, highlightedItem, item) {
+  return createIsFaded(highlightScope, highlightedItem)(item);
+});

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

@@ -4,7 +4,7 @@ import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowComp
 export const useChartInteraction = ({
   store
 }) => {
-  const cleanInteraction = useEventCallback(() => {
+  const cleanInteraction = useEventCallback(function cleanInteraction() {
     store.update(prev => {
       return _extends({}, prev, {
         interaction: {
@@ -14,7 +14,7 @@ export const useChartInteraction = ({
       });
     });
   });
-  const removeItemInteraction = useEventCallback(itemToRemove => {
+  const removeItemInteraction = useEventCallback(function removeItemInteraction(itemToRemove) {
     store.update(prev => {
       const prevItem = prev.interaction.item;
       if (!itemToRemove) {
@@ -36,7 +36,7 @@ export const useChartInteraction = ({
       });
     });
   });
-  const setItemInteraction = useEventCallback(newItem => {
+  const setItemInteraction = useEventCallback(function setItemInteraction(newItem) {
     store.update(prev => {
       if (fastObjectShallowCompare(prev.interaction.item, newItem)) {
         return prev;
@@ -48,7 +48,7 @@ export const useChartInteraction = ({
       });
     });
   });
-  const setPointerCoordinate = useEventCallback(coordinate => {
+  const setPointerCoordinate = useEventCallback(function setPointerCoordinate(coordinate) {
     store.update(prev => _extends({}, prev, {
       interaction: _extends({}, prev.interaction, {
         pointer: coordinate

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

@@ -10,6 +10,8 @@ import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/i
 import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
 import { getSVGPoint } from "../../../getSVGPoint.js";
 import { generatePolar2svg, generateSvg2polar, generateSvg2rotation } from "./coordinateTransformation.js";
+import { getAxisIndex } from "./getAxisIndex.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 export const useChartPolarAxis = ({
   params,
   store,
@@ -30,6 +32,7 @@ export const useChartPolarAxis = ({
     }
   }
   const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
   const center = useSelector(store, selectorChartPolarCenter);
   const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
   const {
@@ -156,6 +159,45 @@ export 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 = getSVGPoint(element, event.detail.srcEvent);
+      const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
+      const rotationIndex = 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,
@@ -168,7 +210,8 @@ useChartPolarAxis.params = {
   rotationAxis: true,
   radiusAxis: true,
   dataset: true,
-  disableAxisListener: true
+  disableAxisListener: true,
+  onAxisClick: true
 };
 useChartPolarAxis.getInitialState = params => ({
   polarAxis: {

package/esm/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 {