@mui/x-charts 8.8.0 → 8.9.0

package/esm/BarChart/useBarPlotData.js

@@ -47,7 +47,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
       const {
         stackedData,
         data: currentSeriesData,
-        layout
+        layout,
+        minBarSize
       } = series[seriesId];
       const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
         if (currentSeriesData[dataIndex] == null) {
@@ -58,16 +59,20 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         const stackId = series[seriesId].stack;
+        const {
+          barSize,
+          startCoordinate
+        } = getValueCoordinate(verticalLayout, minValueCoord, maxValueCoord, currentSeriesData[dataIndex], minBarSize);
         const result = {
           seriesId,
           dataIndex,
           layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
+          y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
           xOrigin: xScale(0) ?? 0,
           yOrigin: yScale(0) ?? 0,
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          height: verticalLayout ? barSize : barWidth,
+          width: verticalLayout ? barWidth : barSize,
           color: colorGetter(dataIndex),
           value: currentSeriesData[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
@@ -136,4 +141,26 @@ function getBandSize({
     barWidth,
     offset
   };
+}
+function getValueCoordinate(isVertical, minValueCoord, maxValueCoord, baseValue, minBarSize) {
+  if (baseValue === 0 || baseValue == null) {
+    return {
+      barSize: 0,
+      startCoordinate: minValueCoord
+    };
+  }
+  const isSizeLessThanMin = maxValueCoord - minValueCoord < minBarSize;
+  const barSize = isSizeLessThanMin ? minBarSize : maxValueCoord - minValueCoord;
+  const isVerticalAndPositive = isVertical && baseValue >= 0;
+  const isHorizontalAndNegative = !isVertical && baseValue < 0;
+  if (isSizeLessThanMin && (isVerticalAndPositive || isHorizontalAndNegative)) {
+    return {
+      barSize,
+      startCoordinate: maxValueCoord - barSize
+    };
+  }
+  return {
+    barSize,
+    startCoordinate: minValueCoord
+  };
 }

package/esm/ChartsLabel/ChartsLabelMark.d.ts

@@ -6,12 +6,13 @@ export interface ChartsLabelCustomMarkProps {
   /** Color of the series this mark refers to. */
   color?: string;
 }
+export type ChartsLabelMarkType = 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
 export interface ChartsLabelMarkProps {
   /**
    * The type of the mark.
    * @default 'square'
    */
-  type?: 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
+  type?: ChartsLabelMarkType;
   /**
    * The color of the mark.
    */

package/esm/ChartsLabel/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ChartsLabel.js";
 export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from "./ChartsLabelMark.js";
 export { ChartsLabelMark } from "./ChartsLabelMark.js";
 export { labelClasses } from "./labelClasses.js";

package/esm/ChartsLabel/index.js

@@ -1,3 +1,4 @@
+export * from "./ChartsLabel.js";
 export { ChartsLabelMark } from "./ChartsLabelMark.js";
 export { labelClasses } from "./labelClasses.js";
 export { labelMarkClasses } from "./labelMarkClasses.js";

package/esm/ChartsLegend/chartsLegendClasses.d.ts

@@ -16,5 +16,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "series", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"item" | "series" | "root" | "label" | "mark", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/esm/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -24,5 +24,5 @@ export interface PiecewiseColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"item" | "root" | "label" | "mark" | "minLabel" | "maxLabel", string>;
 export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/esm/LineChart/LineChart.d.ts

@@ -18,12 +18,13 @@ import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
 export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
-  series: Readonly<MakeOptional<LineSeriesType, 'type'>[]>;
+  series: Readonly<LineSeries[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

package/esm/LineChart/LineChart.js

@@ -209,7 +209,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   onMarkClick: PropTypes.func,
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/PieChart/PieArcLabelPlot.js

@@ -145,6 +145,9 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     outerRadius: PropTypes.number,
     paddingAngle: PropTypes.number
   }),
+  /**
+   * The id of this series.
+   */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/esm/PieChart/PieArcPlot.js

@@ -116,6 +116,9 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     outerRadius: PropTypes.number,
     paddingAngle: PropTypes.number
   }),
+  /**
+   * The id of this series.
+   */
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/esm/PieChart/PieChart.d.ts

@@ -12,12 +12,13 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
 export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
    * The series to display in the pie chart.
-   * An array of [[PieSeriesType]] objects.
+   * An array of [[PieSeries]] objects.
    */
-  series: Readonly<MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[]>;
+  series: Readonly<PieSeries[]>;
   /**
    * If `true`, the legend is not rendered.
    */

package/esm/PieChart/PieChart.js

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

package/esm/PieChart/pieClasses.d.ts

@@ -9,4 +9,4 @@ export interface PieClasses {
 export type PieClassKey = keyof PieClasses;
 export declare function getPieUtilityClass(slot: string): string;
 export declare const pieClasses: PieClasses;
-export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"series" | "root" | "seriesLabels", string>;

package/esm/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -54,13 +54,11 @@ function RadarAxisHighlight(props) {
       className: classes.line,
       pointerEvents: "none",
       strokeDasharray: "4 4"
-    }), points.map(({
-      highlighted
-    }, seriesIndex) => {
+    }), points.map((point, seriesIndex) => {
       return /*#__PURE__*/_jsx("circle", _extends({
         fill: series[seriesIndex].color,
-        cx: highlighted.x,
-        cy: highlighted.y,
+        cx: point.x,
+        cy: point.y,
         className: classes.dot,
         pointerEvents: "none"
       }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);

package/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.d.ts

@@ -2,12 +2,6 @@ import { UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugi
 import { AxisId } from "../../models/axis.js";
 import { DefaultizedRadarSeriesType } from "../../models/seriesType/radar.js";
 import { ChartInstance } from "../../internals/plugins/models/index.js";
-interface UseRadarAxisHighlightParams {
-  /**
-   * If true, coordinates of the previous/next point will be added.
-   */
-  includesNeighbors?: boolean;
-}
 interface UseRadarAxisHighlightReturnValue {
   /**
    * The radar center.
@@ -40,7 +34,7 @@ interface UseRadarAxisHighlightReturnValue {
    * The { x, y, value } values for the highlighted points in the same order as the `series` array.
    * If `includesNeighbors` is set to `true` it also contains the information for `previous` and `next` data point.
    */
-  points: Points[];
+  points: Point[];
   /**
    * Charts instances giving access to `polar2svg` and `svg2polar` helpers.
    */
@@ -53,10 +47,5 @@ interface Point {
   angle: number;
   value: number;
 }
-interface Points {
-  highlighted: Point;
-  previous?: Point;
-  next?: Point;
-}
-export declare function useRadarAxisHighlight(params?: UseRadarAxisHighlightParams): UseRadarAxisHighlightReturnValue | null;
+export declare function useRadarAxisHighlight(): UseRadarAxisHighlightReturnValue | null;
 export {};

package/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -6,10 +6,7 @@ import { useStore } from "../../internals/store/useStore.js";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 import { selectorChartsInteractionRotationAxisIndex, selectorChartsInteractionRotationAxisValue } from "../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
-export function useRadarAxisHighlight(params) {
-  const {
-    includesNeighbors = false
-  } = params ?? {};
+export function useRadarAxisHighlight() {
   const radarSeries = useRadarSeries();
   const rotationScale = useRotationScale();
   const {
@@ -49,48 +46,14 @@ export function useRadarAxisHighlight(params) {
       const value = series.data[highlightedIndex];
       const r = radiusScale(value);
       const [x, y] = instance.polar2svg(r, angle);
-      const retrunedValue = {
-        highlighted: {
-          x,
-          y,
-          r,
-          angle,
-          value
-        }
+      const returnedValue = {
+        x,
+        y,
+        r,
+        angle,
+        value
       };
-      if (!includesNeighbors) {
-        return retrunedValue;
-      }
-      const dataLength = series.data.length;
-      const prevIndex = (dataLength + highlightedIndex - 1) % dataLength;
-      const nextIndex = (highlightedIndex + 1) % dataLength;
-      const prevValue = series.data[prevIndex];
-      const nextValue = series.data[nextIndex];
-      if (prevValue != null) {
-        const prevR = radiusAxis[radiusAxisIds[prevIndex]].scale(prevValue);
-        const prevAngle = rotationScale(rotationScale.domain()[prevIndex]);
-        const [px, py] = instance.polar2svg(prevR, prevAngle);
-        retrunedValue.previous = {
-          x: px,
-          y: py,
-          r: prevR,
-          angle: prevAngle,
-          value: prevValue
-        };
-      }
-      if (nextValue != null) {
-        const nextR = radiusAxis[radiusAxisIds[nextIndex]].scale(nextValue);
-        const nextAngle = rotationScale(rotationScale.domain()[nextIndex]);
-        const [nx, ny] = instance.polar2svg(nextR, nextAngle);
-        retrunedValue.next = {
-          x: nx,
-          y: ny,
-          r: nextR,
-          angle: nextAngle,
-          value: nextValue
-        };
-      }
-      return retrunedValue;
+      return returnedValue;
     })
   };
 }

package/esm/RadarChart/RadarChart.d.ts

@@ -5,13 +5,14 @@ import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
+import { RadarSeriesPlotProps } from "./RadarSeriesPlot/index.js";
 import { RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
 import { ChartsTooltipSlotProps, ChartsTooltipSlots } from "../ChartsTooltip/index.js";
 import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
 import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
 export interface RadarChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsLegendSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface RadarChartSlotProps extends ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ChartsWrapperProps, 'sx'>, Omit<ChartsSurfaceProps, 'sx'> {
+export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ChartsWrapperProps, 'sx'>, Omit<ChartsSurfaceProps, 'sx'>, Pick<RadarSeriesPlotProps, 'onAreaClick' | 'onMarkClick'> {
   /**
    * If `true`, the legend is not rendered.
    */

package/esm/RadarChart/RadarChart.js

@@ -35,6 +35,8 @@ const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, re
     chartsSurfaceProps,
     radarDataProviderProps,
     radarGrid,
+    radarSeriesAreaProps,
+    radarSeriesMarksProps,
     overlayProps,
     legendProps,
     highlight,
@@ -46,7 +48,7 @@ const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, re
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         ref: ref,
-        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
+        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, _extends({}, radarSeriesAreaProps)), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, _extends({}, radarSeriesMarksProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
@@ -125,12 +127,31 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
+  /**
+   * 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: PropTypes.func,
+  /**
+   * 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: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * 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: PropTypes.func,
   /**
    * The configuration of the radar scales.
    */
@@ -147,7 +168,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   }).isRequired,
   /**
    * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
+   * An array of [[RadarSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -5,12 +5,13 @@ import { RadarSeriesType } from "../../models/seriesType/radar.js";
 import { ChartDataProviderProps } from "../../ChartDataProvider/index.js";
 import { RadarConfig } from "./radar.types.js";
 import { ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
+export type RadarSeries = MakeOptional<RadarSeriesType, 'type'>;
 export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
   /**
    * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
+   * An array of [[RadarSeries]] objects.
    */
-  series: Readonly<MakeOptional<RadarSeriesType, 'type'>>[];
+  series: Readonly<RadarSeries>[];
   /**
    * The configuration of the radar scales.
    */

package/esm/RadarChart/RadarMetricLabels/useRadarMetricData.js

@@ -21,14 +21,16 @@ export function useRadarMetricData() {
       const radiusScale = radiusAxis[metric].scale;
       const r = radiusScale.range()[1] + labelGap;
       const angle = angles[dataIndex];
+      const defaultTickLabel = metric;
       return {
         x: cx + r * Math.sin(angle),
         y: cy - r * Math.cos(angle),
         angle: rad2deg(angle),
         label: valueFormatter?.(metric, {
           location: 'tick',
-          scale: rotationScale
-        }) ?? metric
+          scale: rotationScale,
+          defaultTickLabel
+        }) ?? defaultTickLabel
       };
     })
   };

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId"];
+const _excluded = ["seriesId", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -9,6 +9,7 @@ import { getAreaPath } from "./getAreaPath.js";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 import { useInteractionAllItemProps } from "../../hooks/useInteractionItemProps.js";
+import { useRadarRotationIndex } from "./useRadarRotationIndex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPathProps(params) {
   const {
@@ -38,10 +39,12 @@ export function getPathProps(params) {
 }
 function RadarSeriesArea(props) {
   const {
-      seriesId
+      seriesId,
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(seriesId);
+  const getRotationIndex = useRadarRotationIndex();
   const interactionProps = useInteractionAllItemProps(seriesCoordinates);
   const {
     isFaded,
@@ -63,7 +66,14 @@ function RadarSeriesArea(props) {
         isFaded,
         isHighlighted,
         classes
-      }), interactionProps[seriesIndex], other), id);
+      }), {
+        onClick: event => onItemClick?.(event, {
+          type: 'radar',
+          seriesId: id,
+          dataIndex: getRotationIndex(event)
+        }),
+        cursor: onItemClick ? 'pointer' : 'unset'
+      }, interactionProps[seriesIndex], other), id);
     })
   });
 }
@@ -76,6 +86,12 @@ process.env.NODE_ENV !== "production" ? RadarSeriesArea.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * 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: PropTypes.func,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId"];
+const _excluded = ["seriesId", "onItemClick"];
 import * as React from 'react';
 import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
@@ -31,12 +31,14 @@ export function getCircleProps(params) {
     fill: color,
     stroke: color,
     opacity: fillArea && isItemFaded ? 0.5 : 1,
-    pointerEvents: 'none',
     className: clsx(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
   };
 }
 function RadarSeriesMarks(props) {
-  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+      onItemClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
   const classes = useUtilityClasses(props.classes);
   const {
@@ -63,7 +65,15 @@ function RadarSeriesMarks(props) {
           isFaded,
           isHighlighted,
           classes
-        }), other), index))
+        }), {
+          pointerEvents: onItemClick ? undefined : 'none',
+          onClick: event => onItemClick?.(event, {
+            type: 'radar',
+            seriesId: id,
+            dataIndex: index
+          }),
+          cursor: onItemClick ? 'pointer' : 'unset'
+        }, other), index))
       }, id);
     })
   });
@@ -77,6 +87,12 @@ process.env.NODE_ENV !== "production" ? RadarSeriesMarks.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * 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: PropTypes.func,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -7,15 +7,23 @@ import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.j
 import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { getPathProps } from "./RadarSeriesArea.js";
 import { getCircleProps } from "./RadarSeriesMarks.js";
+import { useRadarRotationIndex } from "./useRadarRotationIndex.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarSeriesPlot(props) {
-  const seriesCoordinates = useRadarSeriesData(props.seriesId);
+  const {
+    seriesId: inSeriesId,
+    classes: inClasses,
+    onAreaClick,
+    onMarkClick
+  } = props;
+  const seriesCoordinates = useRadarSeriesData(inSeriesId);
+  const getRotationIndex = useRadarRotationIndex();
   const interactionProps = useInteractionAllItemProps(seriesCoordinates);
   const {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const classes = useUtilityClasses(props.classes);
+  const classes = useUtilityClasses(inClasses);
   return /*#__PURE__*/_jsx("g", {
     className: classes.root,
     children: seriesCoordinates?.map(({
@@ -34,7 +42,14 @@ function RadarSeriesPlot(props) {
           isFaded,
           isHighlighted,
           classes
-        }), interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
+        }), {
+          onClick: event => onAreaClick?.(event, {
+            type: 'radar',
+            seriesId,
+            dataIndex: getRotationIndex(event)
+          }),
+          cursor: onAreaClick ? 'pointer' : 'unset'
+        }, interactionProps[seriesIndex]), seriesId), !hideMark && points.map((point, index) => /*#__PURE__*/_jsx("circle", _extends({}, getCircleProps({
           seriesId,
           point,
           color,
@@ -42,7 +57,14 @@ function RadarSeriesPlot(props) {
           isFaded,
           isHighlighted,
           classes
-        })), index))]
+        }), {
+          onClick: event => onMarkClick?.(event, {
+            type: 'radar',
+            seriesId,
+            dataIndex: index
+          }),
+          cursor: onMarkClick ? 'pointer' : 'unset'
+        }), index))]
       }, seriesId);
     })
   });
@@ -56,6 +78,18 @@ process.env.NODE_ENV !== "production" ? RadarSeriesPlot.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * 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: PropTypes.func,
+  /**
+   * 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: PropTypes.func,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.