@mui/x-charts 9.11.1 → 9.13.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -10,6 +10,7 @@ exports.useChartCartesianAxis = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _store = require("@mui/x-internals/store");
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _warning = require("@mui/x-internals/warning");
@@ -23,6 +24,15 @@ var _useChartInteraction = require("../useChartInteraction");
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
 var _getAxisClickPayload = require("./getAxisClickPayload");
+var _useDefaultTickLabelStyle = require("../../../useDefaultTickLabelStyle");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation");
+/**
+ * Narrows an axis item to one the axis actually has a value for.
+ * Axes unrelated to the focused series can exist with empty data, so the index must resolve.
+ */
+function hasAxisValueAt(axes, item) {
+  return item !== undefined && item.dataIndex !== undefined && axes[item.axisId]?.data?.[item.dataIndex] !== undefined;
+}
 const useChartCartesianAxis = ({
   params,
   store,
@@ -39,6 +49,12 @@ const useChartCartesianAxis = ({
     onTooltipAxisChange,
     axesGap
   } = params;
+  const defaultTickLabelStyle = (0, _useDefaultTickLabelStyle.useDefaultTickLabelStyle)();
+  (0, _useEnhancedEffect.default)(() => {
+    store.set('cartesianAxis', (0, _extends2.default)({}, store.state.cartesianAxis, {
+      defaultTickLabelStyle
+    }));
+  }, [defaultTickLabelStyle, store]);
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
     const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
@@ -92,9 +108,10 @@ const useChartCartesianAxis = ({
     store.set('cartesianAxis', {
       axesGap,
       x: (0, _defaultizeAxis.defaultizeXAxis)(xAxis, dataset, axesGap),
-      y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset, axesGap)
+      y: (0, _defaultizeAxis.defaultizeYAxis)(yAxis, dataset, axesGap),
+      defaultTickLabelStyle
     });
-  }, [xAxis, yAxis, dataset, axesGap, store]);
+  }, [xAxis, yAxis, dataset, axesGap, defaultTickLabelStyle, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   (0, _store.useStoreEffect)(store, _useChartCartesianInteraction.selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
@@ -197,7 +214,62 @@ const useChartCartesianAxis = ({
     return () => {
       axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, processedSeries, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+  }, [params.onAxisClick, processedSeries, store, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+
+  /**
+   * Kept separate from the pointer effect: this listener must survive re-renders, so it reads the
+   * axes and the callback when the key is pressed rather than closing over them. Re-subscribing per
+   * render would drop keystrokes landing between a keyboard navigation update and its commit.
+   */
+  const handleKeyboardActivation = (0, _useEventCallback.default)(event => {
+    const onAxisClick = params.onAxisClick;
+    if (!onAxisClick ||
+    // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+    event.repeat || !(0, _useChartKeyboardNavigation.isItemActivationKey)(event) || !(0, _useChartKeyboardNavigation.selectorChartsIsKeyboardActivationEnabled)(store.state)) {
+      return;
+    }
+    const {
+      axis: xAxes
+    } = (0, _useChartCartesianAxisRendering.selectorChartXAxis)(store.state);
+    const {
+      axis: yAxes
+    } = (0, _useChartCartesianAxisRendering.selectorChartYAxis)(store.state);
+    const xAxisItem = (0, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex)(store.state);
+    const yAxisItem = (0, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex)(store.state);
+    const focusedAxisItem = hasAxisValueAt(xAxes, xAxisItem) ? {
+      item: xAxisItem,
+      isXAxis: true
+    } : hasAxisValueAt(yAxes, yAxisItem) && {
+      item: yAxisItem,
+      isXAxis: false
+    };
+    if (!focusedAxisItem) {
+      return;
+    }
+    const payload = (0, _getAxisClickPayload.getAxisClickPayload)({
+      axisId: focusedAxisItem.item.axisId,
+      dataIndex: focusedAxisItem.item.dataIndex,
+      isXAxis: focusedAxisItem.isXAxis,
+      axes: focusedAxisItem.isXAxis ? xAxes : yAxes,
+      processedSeries: (0, _useChartSeries.selectorChartSeriesProcessed)(store.state)
+    });
+    if (payload === null) {
+      return;
+    }
+    event.preventDefault();
+    // The callback only describes the pointer event unless the user augments the types.
+    onAxisClick(event, payload);
+  });
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    element.addEventListener('keydown', handleKeyboardActivation);
+    return () => {
+      element.removeEventListener('keydown', handleKeyboardActivation);
+    };
+  }, [chartsLayerContainerRef, handleKeyboardActivation]);
   return {};
 };
 exports.useChartCartesianAxis = useChartCartesianAxis;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.mjs

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { useStoreEffect } from '@mui/x-internals/store';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import { warnOnce } from '@mui/x-internals/warning';
@@ -16,6 +17,16 @@ import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/i
 import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.mjs";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.mjs";
 import { getAxisClickPayload } from "./getAxisClickPayload.mjs";
+import { useDefaultTickLabelStyle } from "../../../useDefaultTickLabelStyle.mjs";
+import { isItemActivationKey, selectorChartsIsKeyboardActivationEnabled, selectorChartsKeyboardXAxisIndex, selectorChartsKeyboardYAxisIndex } from "../useChartKeyboardNavigation/index.mjs";
+
+/**
+ * Narrows an axis item to one the axis actually has a value for.
+ * Axes unrelated to the focused series can exist with empty data, so the index must resolve.
+ */
+function hasAxisValueAt(axes, item) {
+  return item !== undefined && item.dataIndex !== undefined && axes[item.axisId]?.data?.[item.dataIndex] !== undefined;
+}
 export const useChartCartesianAxis = ({
   params,
   store,
@@ -32,6 +43,12 @@ export const useChartCartesianAxis = ({
     onTooltipAxisChange,
     axesGap
   } = params;
+  const defaultTickLabelStyle = useDefaultTickLabelStyle();
+  useEnhancedEffect(() => {
+    store.set('cartesianAxis', _extends({}, store.state.cartesianAxis, {
+      defaultTickLabelStyle
+    }));
+  }, [defaultTickLabelStyle, store]);
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
     const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
@@ -85,9 +102,10 @@ export const useChartCartesianAxis = ({
     store.set('cartesianAxis', {
       axesGap,
       x: defaultizeXAxis(xAxis, dataset, axesGap),
-      y: defaultizeYAxis(yAxis, dataset, axesGap)
+      y: defaultizeYAxis(yAxis, dataset, axesGap),
+      defaultTickLabelStyle
     });
-  }, [xAxis, yAxis, dataset, axesGap, store]);
+  }, [xAxis, yAxis, dataset, axesGap, defaultTickLabelStyle, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
   useStoreEffect(store, selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
@@ -190,7 +208,62 @@ export const useChartCartesianAxis = ({
     return () => {
       axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, processedSeries, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+  }, [params.onAxisClick, processedSeries, store, chartsLayerContainerRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+
+  /**
+   * Kept separate from the pointer effect: this listener must survive re-renders, so it reads the
+   * axes and the callback when the key is pressed rather than closing over them. Re-subscribing per
+   * render would drop keystrokes landing between a keyboard navigation update and its commit.
+   */
+  const handleKeyboardActivation = useEventCallback(event => {
+    const onAxisClick = params.onAxisClick;
+    if (!onAxisClick ||
+    // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+    event.repeat || !isItemActivationKey(event) || !selectorChartsIsKeyboardActivationEnabled(store.state)) {
+      return;
+    }
+    const {
+      axis: xAxes
+    } = selectorChartXAxis(store.state);
+    const {
+      axis: yAxes
+    } = selectorChartYAxis(store.state);
+    const xAxisItem = selectorChartsKeyboardXAxisIndex(store.state);
+    const yAxisItem = selectorChartsKeyboardYAxisIndex(store.state);
+    const focusedAxisItem = hasAxisValueAt(xAxes, xAxisItem) ? {
+      item: xAxisItem,
+      isXAxis: true
+    } : hasAxisValueAt(yAxes, yAxisItem) && {
+      item: yAxisItem,
+      isXAxis: false
+    };
+    if (!focusedAxisItem) {
+      return;
+    }
+    const payload = getAxisClickPayload({
+      axisId: focusedAxisItem.item.axisId,
+      dataIndex: focusedAxisItem.item.dataIndex,
+      isXAxis: focusedAxisItem.isXAxis,
+      axes: focusedAxisItem.isXAxis ? xAxes : yAxes,
+      processedSeries: selectorChartSeriesProcessed(store.state)
+    });
+    if (payload === null) {
+      return;
+    }
+    event.preventDefault();
+    // The callback only describes the pointer event unless the user augments the types.
+    onAxisClick(event, payload);
+  });
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    element.addEventListener('keydown', handleKeyboardActivation);
+    return () => {
+      element.removeEventListener('keydown', handleKeyboardActivation);
+    };
+  }, [chartsLayerContainerRef, handleKeyboardActivation]);
   return {};
 };
 useChartCartesianAxis.params = {

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.mts

@@ -7,6 +7,8 @@ import type { UseChartInteractionSignature } from "../useChartInteraction/index.
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.mjs";
 import type { UseChartBrushSignature } from "../useChartBrush/index.mjs";
 import type { SamplingState } from "./sampling.types.mjs";
+import type { ChartsActivationEvent } from "../../../../models/events.mjs";
+import type { ChartsTextStyle } from "../../../getWordsByLines.mjs";
 /**
  * The axes' configuration after computing.
  * An axis in this state already contains a scale function and all the necessary properties to be rendered.
@@ -34,10 +36,10 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
   /**
    * 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 {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
-  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  onAxisClick?: (event: ChartsActivationEvent, data: null | ChartsAxisData) => void;
   /**
    * The function called when the pointer position corresponds to a new axis data item.
    * This update can either be caused by a pointer movement, or an axis update.
@@ -106,6 +108,8 @@ export interface UseChartCartesianAxisState {
     axesGap: number;
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
+    /** Only used to measure tick labels. Never merged into the rendered tick style. */
+    defaultTickLabelStyle?: ChartsTextStyle;
   };
   /**
    * The controlled axis item highlighted.

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -7,6 +7,8 @@ import type { UseChartInteractionSignature } from "../useChartInteraction/index.
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
 import type { UseChartBrushSignature } from "../useChartBrush/index.js";
 import type { SamplingState } from "./sampling.types.js";
+import type { ChartsActivationEvent } from "../../../../models/events.js";
+import type { ChartsTextStyle } from "../../../getWordsByLines.js";
 /**
  * The axes' configuration after computing.
  * An axis in this state already contains a scale function and all the necessary properties to be rendered.
@@ -34,10 +36,10 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
   /**
    * 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 {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
-  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  onAxisClick?: (event: ChartsActivationEvent, data: null | ChartsAxisData) => void;
   /**
    * The function called when the pointer position corresponds to a new axis data item.
    * This update can either be caused by a pointer movement, or an axis update.
@@ -106,6 +108,8 @@ export interface UseChartCartesianAxisState {
     axesGap: number;
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
+    /** Only used to measure tick labels. Never merged into the rendered tick style. */
+    defaultTickLabelStyle?: ChartsTextStyle;
   };
   /**
    * The controlled axis item highlighted.

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.d.mts

@@ -5,6 +5,7 @@ export declare const selectorChartCartesianAxisState: (state: ChartState<[], [Us
   axesGap: number;
   x: DefaultedXAxis[];
   y: DefaultedYAxis[];
+  defaultTickLabelStyle?: import("../../../getWordsByLines.mjs").ChartsTextStyle;
 } | undefined;
 export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedXAxis[] | undefined;
 export declare const selectorChartRawXAxis: SelectorChartRawXAxisType;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.d.ts

@@ -5,6 +5,7 @@ export declare const selectorChartCartesianAxisState: (state: ChartState<[], [Us
   axesGap: number;
   x: DefaultedXAxis[];
   y: DefaultedYAxis[];
+  defaultTickLabelStyle?: import("../../../getWordsByLines.js").ChartsTextStyle;
 } | undefined;
 export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedXAxis[] | undefined;
 export declare const selectorChartRawXAxis: SelectorChartRawXAxisType;

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -144,6 +144,7 @@ const useChartClosestPoint = ({
     const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
       if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -151,6 +152,7 @@ const useChartClosestPoint = ({
     const panEndHandler = instance.addInteractionListener('panEnd', event => {
       if (!event.detail.activeGestures.move) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -158,6 +160,7 @@ const useChartClosestPoint = ({
     const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
       if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -166,12 +169,14 @@ const useChartClosestPoint = ({
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (closestPoint === 'outside-chart') {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
         instance.removeTooltipItem?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
@@ -180,6 +185,11 @@ const useChartClosestPoint = ({
         seriesId,
         dataIndex
       } = closestPoint;
+      instance.setHoveredItem?.({
+        type: 'scatter',
+        seriesId,
+        dataIndex
+      });
       instance.setTooltipItem?.({
         type: 'scatter',
         seriesId,
@@ -192,6 +202,17 @@ const useChartClosestPoint = ({
         dataIndex
       });
     };
+
+    // A tap resolves nothing without a preceding move, and touch has no hover phase, so the
+    // pointer item is also resolved on `pointerdown`.
+    const onPointerDown = function onPointerDown(event) {
+      gestureHandler({
+        detail: {
+          srcEvent: event
+        }
+      });
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     const tapHandler = instance.addInteractionListener('tap', event => {
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (typeof closestPoint !== 'string' && onItemClick) {
@@ -210,6 +231,7 @@ const useChartClosestPoint = ({
     const panHandler = instance.addInteractionListener('pan', gestureHandler);
     const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       tapHandler.cleanup();
       moveHandler.cleanup();
       moveEndHandler.cleanup();

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.mjs

@@ -137,6 +137,7 @@ export const useChartClosestPoint = ({
     const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
       if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -144,6 +145,7 @@ export const useChartClosestPoint = ({
     const panEndHandler = instance.addInteractionListener('panEnd', event => {
       if (!event.detail.activeGestures.move) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -151,6 +153,7 @@ export const useChartClosestPoint = ({
     const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
       if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -159,12 +162,14 @@ export const useChartClosestPoint = ({
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (closestPoint === 'outside-chart') {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
         instance.removeTooltipItem?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
@@ -173,6 +178,11 @@ export const useChartClosestPoint = ({
         seriesId,
         dataIndex
       } = closestPoint;
+      instance.setHoveredItem?.({
+        type: 'scatter',
+        seriesId,
+        dataIndex
+      });
       instance.setTooltipItem?.({
         type: 'scatter',
         seriesId,
@@ -185,6 +195,17 @@ export const useChartClosestPoint = ({
         dataIndex
       });
     };
+
+    // A tap resolves nothing without a preceding move, and touch has no hover phase, so the
+    // pointer item is also resolved on `pointerdown`.
+    const onPointerDown = function onPointerDown(event) {
+      gestureHandler({
+        detail: {
+          srcEvent: event
+        }
+      });
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     const tapHandler = instance.addInteractionListener('tap', event => {
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (typeof closestPoint !== 'string' && onItemClick) {
@@ -203,6 +224,7 @@ export const useChartClosestPoint = ({
     const panHandler = instance.addInteractionListener('pan', gestureHandler);
     const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       tapHandler.cleanup();
       moveHandler.cleanup();
       moveEndHandler.cleanup();

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartInteraction = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 const useChartInteraction = ({
   store
 }) => {
@@ -24,6 +25,28 @@ const useChartInteraction = ({
       }));
     }
   });
+  const setHoveredItem = (0, _useEventCallback.default)(function setHoveredItem(item) {
+    const previousItem = store.state.interaction.hoveredItem;
+    if (previousItem !== null && (0, _fastObjectShallowCompare.fastObjectShallowCompare)(previousItem, item)) {
+      return;
+    }
+    store.set('interaction', (0, _extends2.default)({}, store.state.interaction, {
+      hoveredItem: item
+    }));
+  });
+  const clearHoveredItem = (0, _useEventCallback.default)(function clearHoveredItem(itemToRemove) {
+    const previousItem = store.state.interaction.hoveredItem;
+    if (previousItem === null) {
+      return;
+    }
+    if (itemToRemove !== undefined && !(0, _fastObjectShallowCompare.fastObjectShallowCompare)(previousItem, itemToRemove)) {
+      // Another item took over already.
+      return;
+    }
+    store.set('interaction', (0, _extends2.default)({}, store.state.interaction, {
+      hoveredItem: null
+    }));
+  });
   const setPointerCoordinate = (0, _useEventCallback.default)(function setPointerCoordinate(coordinate) {
     store.set('interaction', (0, _extends2.default)({}, store.state.interaction, {
       pointer: coordinate,
@@ -44,6 +67,8 @@ const useChartInteraction = ({
     instance: {
       cleanInteraction,
       setLastUpdateSource,
+      setHoveredItem,
+      clearHoveredItem,
       setPointerCoordinate,
       handlePointerEnter,
       handlePointerLeave
@@ -56,7 +81,8 @@ useChartInteraction.getInitialState = () => ({
     item: null,
     pointer: null,
     lastUpdate: 'pointer',
-    pointerType: null
+    pointerType: null,
+    hoveredItem: null
   }
 });
 useChartInteraction.params = {};

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.mjs

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 export const useChartInteraction = ({
   store
 }) => {
@@ -17,6 +18,28 @@ export const useChartInteraction = ({
       }));
     }
   });
+  const setHoveredItem = useEventCallback(function setHoveredItem(item) {
+    const previousItem = store.state.interaction.hoveredItem;
+    if (previousItem !== null && fastObjectShallowCompare(previousItem, item)) {
+      return;
+    }
+    store.set('interaction', _extends({}, store.state.interaction, {
+      hoveredItem: item
+    }));
+  });
+  const clearHoveredItem = useEventCallback(function clearHoveredItem(itemToRemove) {
+    const previousItem = store.state.interaction.hoveredItem;
+    if (previousItem === null) {
+      return;
+    }
+    if (itemToRemove !== undefined && !fastObjectShallowCompare(previousItem, itemToRemove)) {
+      // Another item took over already.
+      return;
+    }
+    store.set('interaction', _extends({}, store.state.interaction, {
+      hoveredItem: null
+    }));
+  });
   const setPointerCoordinate = useEventCallback(function setPointerCoordinate(coordinate) {
     store.set('interaction', _extends({}, store.state.interaction, {
       pointer: coordinate,
@@ -37,6 +60,8 @@ export const useChartInteraction = ({
     instance: {
       cleanInteraction,
       setLastUpdateSource,
+      setHoveredItem,
+      clearHoveredItem,
       setPointerCoordinate,
       handlePointerEnter,
       handlePointerLeave
@@ -48,7 +73,8 @@ useChartInteraction.getInitialState = () => ({
     item: null,
     pointer: null,
     lastUpdate: 'pointer',
-    pointerType: null
+    pointerType: null,
+    hoveredItem: null
   }
 });
 useChartInteraction.params = {};

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.mts

@@ -1,4 +1,6 @@
 import type { ChartPluginSignature } from "../../models/index.mjs";
+import type { SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.mjs";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
 export type Coordinate = {
   x: number;
   y: number;
@@ -21,6 +23,17 @@ export interface UseChartInteractionInstance {
    * @returns {void}
    */
   setLastUpdateSource: (interaction: InteractionUpdateSource) => void;
+  /**
+   * Set the item the pointer is over.
+   * @param {SeriesItemIdentifierWithType} item The item under the pointer.
+   */
+  setHoveredItem: (item: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
+  /**
+   * Remove the item the pointer was over.
+   * @param {SeriesItemIdentifierWithType} itemToRemove Only clears the item when it is the current
+   * one. Omit to clear unconditionally.
+   */
+  clearHoveredItem: (itemToRemove?: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
   /**
    * Handle pointer enter event on the chart Surface.
    */
@@ -46,6 +59,13 @@ export interface UseChartInteractionState {
      * Used to decide if highlight should be based on pointer position or keyboard navigation.
      */
     lastUpdate: InteractionUpdateSource;
+    /**
+     * The item the pointer is currently over.
+     *
+     * Unlike the highlighted and the tooltip items, this one is never controlled, so it always
+     * reflects the pointer. That is what makes it usable to resolve what a click landed on.
+     */
+    hoveredItem: SeriesItemIdentifierWithType<ChartSeriesType> | null;
   };
 }
 export type UseChartInteractionSignature = ChartPluginSignature<{

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts

@@ -1,4 +1,6 @@
 import type { ChartPluginSignature } from "../../models/index.js";
+import type { SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 export type Coordinate = {
   x: number;
   y: number;
@@ -21,6 +23,17 @@ export interface UseChartInteractionInstance {
    * @returns {void}
    */
   setLastUpdateSource: (interaction: InteractionUpdateSource) => void;
+  /**
+   * Set the item the pointer is over.
+   * @param {SeriesItemIdentifierWithType} item The item under the pointer.
+   */
+  setHoveredItem: (item: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
+  /**
+   * Remove the item the pointer was over.
+   * @param {SeriesItemIdentifierWithType} itemToRemove Only clears the item when it is the current
+   * one. Omit to clear unconditionally.
+   */
+  clearHoveredItem: (itemToRemove?: SeriesItemIdentifierWithType<ChartSeriesType>) => void;
   /**
    * Handle pointer enter event on the chart Surface.
    */
@@ -46,6 +59,13 @@ export interface UseChartInteractionState {
      * Used to decide if highlight should be based on pointer position or keyboard navigation.
      */
     lastUpdate: InteractionUpdateSource;
+    /**
+     * The item the pointer is currently over.
+     *
+     * Unlike the highlighted and the tooltip items, this one is never controlled, so it always
+     * reflects the pointer. That is what makes it usable to resolve what a click landed on.
+     */
+    hoveredItem: SeriesItemIdentifierWithType<ChartSeriesType> | null;
   };
 }
 export type UseChartInteractionSignature = ChartPluginSignature<{