@mui/x-charts 8.8.0 → 8.9.2

package/{internals/components/ChartsWrapper → ChartsWrapper}/ChartsWrapper.d.ts

@@ -1,9 +1,17 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
-import { Direction } from "../../../ChartsLegend/index.js";
-import { Position } from "../../../models/index.js";
+import { Direction } from "../ChartsLegend/index.js";
+import { Position } from "../models/index.js";
 export interface ChartsWrapperProps {
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
   legendPosition?: Position;
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
   legendDirection?: Direction;
   /**
    * If `true`, the chart wrapper set `height: 100%`.
@@ -14,10 +22,11 @@ export interface ChartsWrapperProps {
   sx?: SxProps<Theme>;
 }
 /**
- * @ignore - internal component.
- *
  * Wrapper for the charts components.
  * Its main purpose is to position the HTML legend in the correct place.
  */
 declare function ChartsWrapper(props: ChartsWrapperProps): React.JSX.Element;
+declare namespace ChartsWrapper {
+  var propTypes: any;
+}
 export { ChartsWrapper };

package/{internals/components/ChartsWrapper → ChartsWrapper}/ChartsWrapper.js

@@ -1,17 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsWrapper = ChartsWrapper;
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _createStyled = require("@mui/system/createStyled");
-var _useChartRootRef = require("../../../hooks/useChartRootRef");
-var _useStore = require("../../store/useStore");
-var _useSelector = require("../../store/useSelector");
-var _useChartDimensions = require("../../plugins/corePlugins/useChartDimensions");
+var _useChartRootRef = require("../hooks/useChartRootRef");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -67,8 +69,6 @@ const Root = (0, _styles.styled)('div', {
 }));
 
 /**
- * @ignore - internal component.
- *
  * Wrapper for the charts components.
  * Its main purpose is to position the HTML legend in the correct place.
  */
@@ -90,4 +90,30 @@ function ChartsWrapper(props) {
     extendVertically: extendVertically ?? propsHeight === undefined,
     children: children
   });
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically: _propTypes.default.bool,
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
+  legendDirection: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
+  legendPosition: _propTypes.default.shape({
+    horizontal: _propTypes.default.oneOf(['center', 'end', 'start']),
+    vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top'])
+  }),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/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/LineChart/LineChart.js

@@ -26,7 +26,7 @@ var _useLineChartProps = require("./useLineChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
-var _ChartsWrapper = require("../internals/components/ChartsWrapper");
+var _ChartsWrapper = require("../ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   onMarkClick: _propTypes.default.func,
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
@@ -401,6 +401,53 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  }), _propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['x']),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    constant: _propTypes.default.number,
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
+    fill: _propTypes.default.string,
+    height: _propTypes.default.number,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['symlog']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelMinGap: _propTypes.default.number,
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -784,6 +831,52 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
+  }), _propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['y']),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    constant: _propTypes.default.number,
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'none', 'right']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['symlog']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func,
+    width: _propTypes.default.number
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,

package/LineChart/seriesConfig/extremums.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExtremumY = exports.getExtremumX = void 0;
+var _findMinMax = require("../../internals/findMinMax");
 const getExtremumX = params => {
   const {
     axis
   } = params;
-  const minX = Math.min(...(axis.data ?? []));
-  const maxX = Math.max(...(axis.data ?? []));
-  return [minX, maxX];
+  return (0, _findMinMax.findMinMax)(axis.data ?? []);
 };
 exports.getExtremumX = getExtremumX;
 function getSeriesExtremums(getValues, data, stackedData, filter) {

package/LineChart/useLineChartProps.d.ts

@@ -11,7 +11,7 @@ import type { LineChartProps } from "./LineChart.js";
 import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
 import { LinePlotProps } from "./LinePlot.js";
 import { MarkPlotProps } from "./MarkPlot.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props

package/PieChart/PieArcLabelPlot.js

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

package/PieChart/PieArcPlot.js

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

package/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/PieChart/PieChart.js

@@ -20,7 +20,7 @@ var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartDataProvider = require("../ChartDataProvider");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
-var _ChartsWrapper = require("../internals/components/ChartsWrapper");
+var _ChartsWrapper = require("../ChartsWrapper");
 var _PieChart2 = require("./PieChart.plugins");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   onItemClick: _propTypes.default.func,
   /**
    * The series to display in the pie chart.
-   * An array of [[PieSeriesType]] objects.
+   * An array of [[PieSeries]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**

package/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/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -62,13 +62,11 @@ function RadarAxisHighlight(props) {
       className: classes.line,
       pointerEvents: "none",
       strokeDasharray: "4 4"
-    }), points.map(({
-      highlighted
-    }, seriesIndex) => {
+    }), points.map((point, seriesIndex) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
         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/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/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -12,10 +12,7 @@ var _useStore = require("../../internals/store/useStore");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
 var _useChartPolarInteraction = require("../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
-function useRadarAxisHighlight(params) {
-  const {
-    includesNeighbors = false
-  } = params ?? {};
+function useRadarAxisHighlight() {
   const radarSeries = (0, _useRadarSeries.useRadarSeries)();
   const rotationScale = (0, _useScale.useRotationScale)();
   const {
@@ -55,48 +52,14 @@ 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/RadarChart/RadarChart.d.ts

@@ -2,16 +2,17 @@ import * as React from 'react';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapperProps } from "../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/RadarChart/RadarChart.js

@@ -15,7 +15,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _useRadarChartProps = require("./useRadarChartProps");
 var _ChartsSurface = require("../ChartsSurface");
-var _ChartsWrapper = require("../internals/components/ChartsWrapper");
+var _ChartsWrapper = require("../ChartsWrapper");
 var _RadarGrid = require("./RadarGrid");
 var _RadarDataProvider = require("./RadarDataProvider/RadarDataProvider");
 var _RadarSeriesPlot = require("./RadarSeriesPlot");
@@ -42,6 +42,8 @@ const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function R
     chartsSurfaceProps,
     radarDataProviderProps,
     radarGrid,
+    radarSeriesAreaProps,
+    radarSeriesMarksProps,
     overlayProps,
     legendProps,
     highlight,
@@ -53,7 +55,7 @@ const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function R
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         ref: ref,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, (0, _extends2.default)({}, radarSeriesAreaProps)), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, (0, _extends2.default)({}, radarSeriesMarksProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
@@ -132,12 +134,31 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.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.default.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.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.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.default.func,
   /**
    * The configuration of the radar scales.
    */
@@ -154,7 +175,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.default.arrayOf(_propTypes.default.object).isRequired,
   /**

package/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/RadarChart/RadarMetricLabels/useRadarMetricData.js

@@ -27,14 +27,16 @@ 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: (0, _angleConversion.rad2deg)(angle),
         label: valueFormatter?.(metric, {
           location: 'tick',
-          scale: rotationScale
-        }) ?? metric
+          scale: rotationScale,
+          defaultTickLabel
+        }) ?? defaultTickLabel
       };
     })
   };

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -17,8 +17,9 @@ var _getAreaPath = require("./getAreaPath");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+var _useRadarRotationIndex = require("./useRadarRotationIndex");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId"];
+const _excluded = ["seriesId", "onItemClick"];
 function getPathProps(params) {
   const {
     isHighlighted,
@@ -47,10 +48,12 @@ function getPathProps(params) {
 }
 function RadarSeriesArea(props) {
   const {
-      seriesId
+      seriesId,
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(seriesId);
+  const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
   const interactionProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const {
     isFaded,
@@ -72,7 +75,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);
     })
   });
 }
@@ -85,6 +95,12 @@ process.env.NODE_ENV !== "production" ? RadarSeriesArea.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.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.default.func,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.