@mui/x-charts 8.8.0 → 8.9.2

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

@@ -8,7 +8,7 @@ import { ChartsLegend } from "../ChartsLegend/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useRadarChartProps } from "./useRadarChartProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { RadarGrid } from "./RadarGrid/index.js";
 import { RadarDataProvider } from "./RadarDataProvider/RadarDataProvider.js";
 import { RadarSeriesArea, RadarSeriesMarks } from "./RadarSeriesPlot/index.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.

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

@@ -1,11 +1,12 @@
 import type { RadarChartProps } from "./RadarChart.js";
 import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 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

@@ -15,7 +15,7 @@ import { useScatterChartProps } from "./useScatterChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -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,
   /**
@@ -363,6 +363,53 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    height: PropTypes.number,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -746,6 +793,52 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,