@mui/x-charts 9.9.0 → 9.10.0

package/ChartsYAxis/utilities.d.mts

@@ -1,5 +1,5 @@
 import type { AxisConfig, ChartsYAxisProps } from "../models/axis.mjs";
-export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsYAxisProps>) => Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
+export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsYAxisProps>) => Record<"label" | "line" | "root" | "tick" | "tickContainer" | "tickLabel", string>;
 export declare const TICK_LABEL_GAP = 2;
 export declare const AXIS_LABEL_TICK_LABEL_GAP = 2;
 export declare const defaultProps: {

package/ChartsYAxis/utilities.d.ts

@@ -1,5 +1,5 @@
 import type { AxisConfig, ChartsYAxisProps } from "../models/axis.js";
-export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsYAxisProps>) => Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
+export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsYAxisProps>) => Record<"label" | "line" | "root" | "tick" | "tickContainer" | "tickLabel", string>;
 export declare const TICK_LABEL_GAP = 2;
 export declare const AXIS_LABEL_TICK_LABEL_GAP = 2;
 export declare const defaultProps: {

package/LineChart/AreaPlot.d.mts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { AreaElementProps, AreaElementSlotProps, AreaElementSlots } from "./AreaElement.mjs";
-import type { LineItemIdentifier } from "../models/seriesType/line.mjs";
+import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
 export interface AreaPlotSlots extends AreaElementSlots {}
 export interface AreaPlotSlotProps extends AreaElementSlotProps {}
 export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line area item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/AreaPlot.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { AreaElementProps, AreaElementSlotProps, AreaElementSlots } from "./AreaElement.js";
-import type { LineItemIdentifier } from "../models/seriesType/line.js";
+import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
 export interface AreaPlotSlots extends AreaElementSlots {}
 export interface AreaPlotSlotProps extends AreaElementSlotProps {}
 export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line area item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/AreaPlot.js

@@ -18,6 +18,7 @@ var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useAxis = require("../hooks/useAxis");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useAreaPlotData = require("./useAreaPlotData");
+var _useLineItemClickHandler = require("./useLineItemClickHandler");
 var _animation = require("../internals/animation/animation");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,6 +67,7 @@ function AreaPlot(props) {
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = (0, _lineClasses.useUtilityClasses)();
+  const onAreaItemClick = (0, _useLineItemClickHandler.useLineItemClickHandler)(onItemClick);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.areaPlot, className)
   }, other, {
@@ -82,10 +84,7 @@ function AreaPlot(props) {
       gradientId: gradientId,
       slots: slots,
       slotProps: slotProps,
-      onClick: onItemClick && (event => onItemClick(event, {
-        type: 'line',
-        seriesId
-      })),
+      onClick: onAreaItemClick && (event => onAreaItemClick(event, seriesId)),
       skipAnimation: skipAnimation
     }, seriesId))
   }));
@@ -98,7 +97,7 @@ process.env.NODE_ENV !== "production" ? AreaPlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line area item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: _propTypes.default.func,
   /**

package/LineChart/AreaPlot.mjs

@@ -12,6 +12,7 @@ import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useAreaPlotData } from "./useAreaPlotData.mjs";
+import { useLineItemClickHandler } from "./useLineItemClickHandler.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { lineClasses, useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,6 +60,7 @@ function AreaPlot(props) {
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = useUtilityClasses();
+  const onAreaItemClick = useLineItemClickHandler(onItemClick);
   return /*#__PURE__*/_jsx(AreaPlotRoot, _extends({
     className: clsx(classes.areaPlot, className)
   }, other, {
@@ -75,10 +77,7 @@ function AreaPlot(props) {
       gradientId: gradientId,
       slots: slots,
       slotProps: slotProps,
-      onClick: onItemClick && (event => onItemClick(event, {
-        type: 'line',
-        seriesId
-      })),
+      onClick: onAreaItemClick && (event => onAreaItemClick(event, seriesId)),
       skipAnimation: skipAnimation
     }, seriesId))
   }));
@@ -91,7 +90,7 @@ process.env.NODE_ENV !== "production" ? AreaPlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line area item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: PropTypes.func,
   /**

package/LineChart/LinePlot.d.mts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { LineElementProps, LineElementSlotProps, LineElementSlots } from "./LineElement.mjs";
-import type { LineItemIdentifier } from "../models/seriesType/line.mjs";
+import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
 export interface LinePlotSlots extends LineElementSlots {}
 export interface LinePlotSlotProps extends LineElementSlotProps {}
 export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/LinePlot.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { LineElementProps, LineElementSlotProps, LineElementSlots } from "./LineElement.js";
-import type { LineItemIdentifier } from "../models/seriesType/line.js";
+import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
 export interface LinePlotSlots extends LineElementSlots {}
 export interface LinePlotSlotProps extends LineElementSlotProps {}
 export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/LinePlot.js

@@ -18,6 +18,7 @@ var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useLinePlotData = require("./useLinePlotData");
+var _useLineItemClickHandler = require("./useLineItemClickHandler");
 var _animation = require("../internals/animation/animation");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -65,6 +66,7 @@ function LinePlot(props) {
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = (0, _lineClasses.useUtilityClasses)();
+  const onLineItemClick = (0, _useLineItemClickHandler.useLineItemClickHandler)(onItemClick);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.linePlot, className)
   }, other, {
@@ -85,10 +87,7 @@ function LinePlot(props) {
         skipAnimation: skipAnimation || isSampled,
         slots: slots,
         slotProps: slotProps,
-        onClick: onItemClick && (event => onItemClick(event, {
-          type: 'line',
-          seriesId
-        }))
+        onClick: onLineItemClick && (event => onLineItemClick(event, seriesId))
       }, seriesId);
     })
   }));
@@ -101,7 +100,7 @@ process.env.NODE_ENV !== "production" ? LinePlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: _propTypes.default.func,
   /**

package/LineChart/LinePlot.mjs

@@ -12,6 +12,7 @@ import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useLinePlotData } from "./useLinePlotData.mjs";
+import { useLineItemClickHandler } from "./useLineItemClickHandler.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { lineClasses, useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -58,6 +59,7 @@ function LinePlot(props) {
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = useUtilityClasses();
+  const onLineItemClick = useLineItemClickHandler(onItemClick);
   return /*#__PURE__*/_jsx(LinePlotRoot, _extends({
     className: clsx(classes.linePlot, className)
   }, other, {
@@ -78,10 +80,7 @@ function LinePlot(props) {
         skipAnimation: skipAnimation || isSampled,
         slots: slots,
         slotProps: slotProps,
-        onClick: onItemClick && (event => onItemClick(event, {
-          type: 'line',
-          seriesId
-        }))
+        onClick: onLineItemClick && (event => onLineItemClick(event, seriesId))
       }, seriesId);
     })
   }));
@@ -94,7 +93,7 @@ process.env.NODE_ENV !== "production" ? LinePlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: PropTypes.func,
   /**

package/LineChart/MarkPlot.d.mts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { LineItemIdentifier } from "../models/seriesType/line.mjs";
+import type { WithDataAttributes } from '@mui/utils/types';
+import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
 import type { MarkElementProps } from "./MarkElement.mjs";
 import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface MarkPlotSlots {
   mark?: React.JSXElementConstructor<MarkElementProps & MarkPropsOverrides>;
 }
 export interface MarkPlotSlotProps {
-  mark?: Partial<MarkElementProps> & MarkPropsOverrides;
+  mark?: WithDataAttributes<Partial<MarkElementProps> & MarkPropsOverrides>;
 }
 export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<MarkElementProps, 'skipAnimation'> {
   /**
@@ -22,9 +23,9 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { LineItemIdentifier } from "../models/seriesType/line.js";
+import type { WithDataAttributes } from '@mui/utils/types';
+import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
 import type { MarkElementProps } from "./MarkElement.js";
 import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface MarkPlotSlots {
   mark?: React.JSXElementConstructor<MarkElementProps & MarkPropsOverrides>;
 }
 export interface MarkPlotSlotProps {
-  mark?: Partial<MarkElementProps> & MarkPropsOverrides;
+  mark?: WithDataAttributes<Partial<MarkElementProps> & MarkPropsOverrides>;
 }
 export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<MarkElementProps, 'skipAnimation'> {
   /**
@@ -22,9 +23,9 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -135,7 +135,7 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
   onItemClick: _propTypes.default.func,
   /**

package/LineChart/MarkPlot.mjs

@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes /* remove-proptypes *
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   * @param {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
   onItemClick: PropTypes.func,
   /**

package/LineChart/lineClasses.d.mts

@@ -22,4 +22,4 @@ export interface UseUtilityClassesOptions {
   skipAnimation?: boolean;
   classes?: Partial<LineClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"area" | "areaPlot" | "highlight" | "line" | "linePlot" | "mark" | "markPlot", string>;

package/LineChart/lineClasses.d.ts

@@ -22,4 +22,4 @@ export interface UseUtilityClassesOptions {
   skipAnimation?: boolean;
   classes?: Partial<LineClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"area" | "areaPlot" | "highlight" | "line" | "linePlot" | "mark" | "markPlot", string>;

package/LineChart/useLineItemClickHandler.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
+import type { SeriesId } from "../models/seriesType/common.mjs";
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+export declare function useLineItemClickHandler(onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;

package/LineChart/useLineItemClickHandler.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
+import type { SeriesId } from "../models/seriesType/common.js";
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+export declare function useLineItemClickHandler(onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;

package/LineChart/useLineItemClickHandler.js

@@ -0,0 +1,54 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLineItemClickHandler = useLineItemClickHandler;
+var React = _interopRequireWildcard(require("react"));
+var _useChartsLayerContainerRef = require("../hooks/useChartsLayerContainerRef");
+var _useAxis = require("../hooks/useAxis");
+var _useLineSeries = require("../hooks/useLineSeries");
+var _getChartPoint = require("../internals/getChartPoint");
+var _getAxisValue = require("../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue");
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+function useLineItemClickHandler(onItemClick) {
+  const chartsLayerContainerRef = (0, _useChartsLayerContainerRef.useChartsLayerContainerRef)();
+  const {
+    xAxis: xAxes,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const seriesData = (0, _useLineSeries.useLineSeriesContext)();
+  const defaultXAxisId = xAxisIds[0];
+  return React.useMemo(() => {
+    if (!onItemClick) {
+      return undefined;
+    }
+    return (event, seriesId) => {
+      const element = chartsLayerContainerRef.current;
+      const xAxisId = seriesData?.series[seriesId]?.xAxisId ?? defaultXAxisId;
+      const xAxis = xAxisId === undefined ? undefined : xAxes[xAxisId];
+      if (element === null || xAxis === undefined) {
+        return;
+      }
+      const point = (0, _getChartPoint.getChartPoint)(element, event);
+      const dataIndex = (0, _getAxisValue.getAxisIndex)(xAxis, point.x);
+      if (dataIndex === -1) {
+        return;
+      }
+      onItemClick(event, {
+        type: 'line',
+        seriesId,
+        dataIndex
+      });
+    };
+  }, [onItemClick, chartsLayerContainerRef, seriesData, defaultXAxisId, xAxes]);
+}

package/LineChart/useLineItemClickHandler.mjs

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { useChartsLayerContainerRef } from "../hooks/useChartsLayerContainerRef.mjs";
+import { useXAxes } from "../hooks/useAxis.mjs";
+import { useLineSeriesContext } from "../hooks/useLineSeries.mjs";
+import { getChartPoint } from "../internals/getChartPoint.mjs";
+import { getAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.mjs";
+/**
+ * Creates a click handler for line and area paths that enriches the item
+ * identifier with the `dataIndex` of the closest data point along the x-axis.
+ *
+ * The index is derived from the click position, using the same logic as the
+ * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
+ * fired when the click position cannot be associated with a data point.
+ */
+export function useLineItemClickHandler(onItemClick) {
+  const chartsLayerContainerRef = useChartsLayerContainerRef();
+  const {
+    xAxis: xAxes,
+    xAxisIds
+  } = useXAxes();
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = xAxisIds[0];
+  return React.useMemo(() => {
+    if (!onItemClick) {
+      return undefined;
+    }
+    return (event, seriesId) => {
+      const element = chartsLayerContainerRef.current;
+      const xAxisId = seriesData?.series[seriesId]?.xAxisId ?? defaultXAxisId;
+      const xAxis = xAxisId === undefined ? undefined : xAxes[xAxisId];
+      if (element === null || xAxis === undefined) {
+        return;
+      }
+      const point = getChartPoint(element, event);
+      const dataIndex = getAxisIndex(xAxis, point.x);
+      if (dataIndex === -1) {
+        return;
+      }
+      onItemClick(event, {
+        type: 'line',
+        seriesId,
+        dataIndex
+      });
+    };
+  }, [onItemClick, chartsLayerContainerRef, seriesData, defaultXAxisId, xAxes]);
+}

package/PieChart/PieArcLabelPlot.d.mts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ComputedPieRadius, DefaultizedPieSeriesType } from "../models/seriesType/pie.mjs";
 import type { PieArcLabelProps } from "./PieArcLabel.mjs";
 import type { PieArcLabelPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
@@ -6,7 +7,7 @@ export interface PieArcLabelPlotSlots {
   pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps & PieArcLabelPropsOverrides>;
 }
 export interface PieArcLabelPlotSlotProps {
-  pieArcLabel?: Partial<PieArcLabelProps> & PieArcLabelPropsOverrides;
+  pieArcLabel?: WithDataAttributes<Partial<PieArcLabelProps> & PieArcLabelPropsOverrides>;
 }
 export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle'>, ComputedPieRadius {
   /**

package/PieChart/PieArcLabelPlot.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ComputedPieRadius, DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
 import type { PieArcLabelProps } from "./PieArcLabel.js";
 import type { PieArcLabelPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
@@ -6,7 +7,7 @@ export interface PieArcLabelPlotSlots {
   pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps & PieArcLabelPropsOverrides>;
 }
 export interface PieArcLabelPlotSlotProps {
-  pieArcLabel?: Partial<PieArcLabelProps> & PieArcLabelPropsOverrides;
+  pieArcLabel?: WithDataAttributes<Partial<PieArcLabelProps> & PieArcLabelPropsOverrides>;
 }
 export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle'>, ComputedPieRadius {
   /**

package/PieChart/PieArcPlot.d.mts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { PieArcProps } from "./PieArc.mjs";
 import type { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.mjs";
 import type { PieArcPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
@@ -6,7 +7,7 @@ export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps & PieArcPropsOverrides>;
 }
 export interface PieArcPlotSlotProps {
-  pieArc?: Partial<PieArcProps> & PieArcPropsOverrides;
+  pieArc?: WithDataAttributes<Partial<PieArcProps> & PieArcPropsOverrides>;
 }
 export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle'>, ComputedPieRadius {
   /**

package/PieChart/PieArcPlot.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { PieArcProps } from "./PieArc.js";
 import type { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.js";
 import type { PieArcPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
@@ -6,7 +7,7 @@ export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps & PieArcPropsOverrides>;
 }
 export interface PieArcPlotSlotProps {
-  pieArc?: Partial<PieArcProps> & PieArcPropsOverrides;
+  pieArc?: WithDataAttributes<Partial<PieArcProps> & PieArcPropsOverrides>;
 }
 export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle'>, ComputedPieRadius {
   /**

package/PieChart/pieClasses.d.mts

@@ -30,4 +30,4 @@ export declare const pieClasses: PieClasses;
 export declare const useUtilityClasses: (options?: {
   classes?: Partial<PieClasses>;
   skipAnimation?: boolean;
-}) => Record<"root" | "series" | "seriesLabels" | "arcLabel" | "arc" | "focusIndicator", string>;
+}) => Record<"arc" | "arcLabel" | "focusIndicator" | "root" | "series" | "seriesLabels", string>;

package/PieChart/pieClasses.d.ts

@@ -30,4 +30,4 @@ export declare const pieClasses: PieClasses;
 export declare const useUtilityClasses: (options?: {
   classes?: Partial<PieClasses>;
   skipAnimation?: boolean;
-}) => Record<"root" | "series" | "seriesLabels" | "arcLabel" | "arc" | "focusIndicator", string>;
+}) => Record<"arc" | "arcLabel" | "focusIndicator" | "root" | "series" | "seriesLabels", string>;

package/RadarChart/RadarAxis/RadarAxis.utils.d.mts

@@ -5,16 +5,16 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
+  transform?: undefined;
   x: number;
   y: number;
-  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
-  dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
-  transform?: undefined;
+  textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
+  dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
 } | {
   x: number;
   y: number;
-  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
-  dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
+  textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
+  dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
   transform: string;
 };
 export {};

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -5,16 +5,16 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
+  transform?: undefined;
   x: number;
   y: number;
-  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
-  dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
-  transform?: undefined;
+  textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
+  dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
 } | {
   x: number;
   y: number;
-  textAnchor: "start" | "end" | "inherit" | "middle" | undefined;
-  dominantBaseline: "inherit" | "auto" | "text-before-edge" | "middle" | "central" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "use-script" | "no-change" | "reset-size" | undefined;
+  textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
+  dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
   transform: string;
 };
 export {};

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SeriesItemIdentifierWithData } from "../../models/seriesType/index.mjs";
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<"radar">[], skip?: boolean) => {
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<'radar'>[], skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SeriesItemIdentifierWithData } from "../../models/seriesType/index.js";
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<"radar">[], skip?: boolean) => {
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<'radar'>[], skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;