@mui/x-charts 9.10.0 → 9.11.0

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

@@ -68,13 +68,13 @@ export declare const selectorChartYScales: (args_0: import("../../corePlugins/us
  */
 export declare const selectorChartXAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("./computeAxisValue.js").ComputeResult<import("../../../index.js").ChartsXAxisProps>;
+}) => import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts/models").ChartsXAxisProps>;
 export declare const selectorChartYAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("./computeAxisValue.js").ComputeResult<import("../../../index.js").ChartsYAxisProps>;
+}) => import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts/models").ChartsYAxisProps>;
 export declare const selectorChartAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, axisId: AxisId) => (Omit<Omit<DefaultedAxis<keyof import("../../../index.js").AxisScaleConfig, any, import("../../../index.js").ChartsXAxisProps>, "scaleType">, "offset"> & Required<Pick<Omit<DefaultedAxis<keyof import("../../../index.js").AxisScaleConfig, any, import("../../../index.js").ChartsXAxisProps>, "scaleType">, "offset">> & (({
+}, axisId: AxisId) => (Omit<Omit<DefaultedAxis<keyof import("../../../index.js").AxisScaleConfig, any, import("@mui/x-charts/models").ChartsXAxisProps>, "scaleType">, "offset"> & Required<Pick<Omit<DefaultedAxis<keyof import("../../../index.js").AxisScaleConfig, any, import("@mui/x-charts/models").ChartsXAxisProps>, "scaleType">, "offset">> & (({
   scaleType: 'log';
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number>;
   colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
@@ -105,14 +105,14 @@ export declare const selectorChartAxis: (args_0: import("../../corePlugins/useCh
   colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } | ({
   scaleType: 'point';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
     toString(): string;
   }>;
   colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } & import("../../../index.js").AxisGroups) | ({
   scaleType: 'band';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;
   }>;
@@ -141,7 +141,7 @@ export declare const selectorChartAxis: (args_0: import("../../corePlugins/useCh
   tickNumber: number;
   triggerTooltip?: boolean;
   isFullCircle?: boolean;
-} & import("../../../index.js").ChartsXAxisProps & {
+} & import("@mui/x-charts/models").ChartsXAxisProps & {
   position?: "bottom" | "none" | "top" | undefined;
   height?: number | "auto" | undefined;
   width?: undefined;
@@ -150,14 +150,14 @@ export declare const selectorChartAxis: (args_0: import("../../corePlugins/useCh
 };
 export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, axisId: AxisId) => DefaultedAxis<"band", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"linear", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"log", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"point", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"pow", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"sqrt", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"symlog", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"time", any, import("../../../index.js").ChartsXAxisProps> | DefaultedAxis<"utc", any, import("../../../index.js").ChartsXAxisProps> | ({
+}, axisId: AxisId) => DefaultedAxis<"band", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"linear", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"log", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"point", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"pow", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"sqrt", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"symlog", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"time", any, import("@mui/x-charts/models").ChartsXAxisProps> | DefaultedAxis<"utc", any, import("@mui/x-charts/models").ChartsXAxisProps> | ({
   offset?: number;
 } & {
   id: AxisId;
   data?: readonly any[] | undefined;
   dataKey?: string;
   valueGetter?: ((item: import("../../../index.js").DatasetElementType<unknown>) => any) | undefined;
-  valueFormatter?: (<TScaleName extends keyof import("../../../index.js").AxisScaleConfig>(value: any, context: import("../../../index.js").AxisValueFormatterContext<TScaleName>) => string) | undefined;
+  valueFormatter?: (<TScaleName extends keyof import("../../../index.js").AxisScaleConfig>(value: any, context: import("@mui/x-charts/models").AxisValueFormatterContext<TScaleName>) => string) | undefined;
   hideTooltip?: boolean;
   reverse?: boolean;
   domainLimit?: 'nice' | 'strict' | ((min: NumberValue, max: NumberValue) => {
@@ -166,7 +166,7 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
   });
   domainSeries?: 'all' | 'visible';
   ignoreTooltip?: boolean;
-} & Omit<Partial<import("../../../index.js").ChartsYAxisProps>, "axisId"> & Partial<Omit<{
+} & Omit<Partial<import("@mui/x-charts/models").ChartsYAxisProps>, "axisId"> & Partial<Omit<{
   scaleType: 'log';
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number>;
   colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
@@ -197,14 +197,14 @@ export declare const selectorChartRawAxis: (args_0: import("../../corePlugins/us
   colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } | ({
   scaleType: 'point';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
     toString(): string;
   }>;
   colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } & import("../../../index.js").AxisGroups) | ({
   scaleType: 'band';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;
   }>;

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

@@ -70,14 +70,14 @@ export declare const selectorChartsHighlightXAxis: (args_0: import("../../corePl
   colorMap?: import("../../../../models/colorMapping.mjs").ContinuousColorConfig | import("../../../../models/colorMapping.mjs").PiecewiseColorConfig;
 } | ({
   scaleType: 'point';
-  ordinalTimeTicks?: import("../../../../index.mjs").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
     toString(): string;
   }>;
   colorMap?: import("../../../../models/colorMapping.mjs").OrdinalColorConfig | import("../../../../models/colorMapping.mjs").ContinuousColorConfig | import("../../../../models/colorMapping.mjs").PiecewiseColorConfig;
 } & import("../../../index.mjs").AxisGroups) | ({
   scaleType: 'band';
-  ordinalTimeTicks?: import("../../../../index.mjs").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;
   }>;
@@ -148,14 +148,14 @@ export declare const selectorChartsHighlightYAxis: (args_0: import("../../corePl
   colorMap?: import("../../../../models/colorMapping.mjs").ContinuousColorConfig | import("../../../../models/colorMapping.mjs").PiecewiseColorConfig;
 } | ({
   scaleType: 'point';
-  ordinalTimeTicks?: import("../../../../index.mjs").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
     toString(): string;
   }>;
   colorMap?: import("../../../../models/colorMapping.mjs").OrdinalColorConfig | import("../../../../models/colorMapping.mjs").ContinuousColorConfig | import("../../../../models/colorMapping.mjs").PiecewiseColorConfig;
 } & import("../../../index.mjs").AxisGroups) | ({
   scaleType: 'band';
-  ordinalTimeTicks?: import("../../../../index.mjs").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;
   }>;

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

@@ -70,14 +70,14 @@ export declare const selectorChartsHighlightXAxis: (args_0: import("../../corePl
   colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } | ({
   scaleType: 'point';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
     toString(): string;
   }>;
   colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } & import("../../../index.js").AxisGroups) | ({
   scaleType: 'band';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;
   }>;
@@ -148,14 +148,14 @@ export declare const selectorChartsHighlightYAxis: (args_0: import("../../corePl
   colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } | ({
   scaleType: 'point';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
     toString(): string;
   }>;
   colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
 } & import("../../../index.js").AxisGroups) | ({
   scaleType: 'band';
-  ordinalTimeTicks?: import("../../../../index.js").OrdinalTimeTicks;
+  ordinalTimeTicks?: import("@mui/x-charts/models").OrdinalTimeTicks;
   scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
     toString(): string;
   }>;

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

@@ -219,6 +219,25 @@ const useChartClosestPoint = ({
       pressEndHandler.cleanup();
     };
   }, [chartsLayerContainerRef, yAxis, xAxis, resolvedHitAreaRadius, onItemClick, resolvedDisableHitArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
+  React.useEffect(() => {
+    if (!onItemClick || !instance.registerItemActivationHandler) {
+      return undefined;
+    }
+    return instance.registerItemActivationHandler({
+      type: 'scatter'
+    }, (event, item) => {
+      if (item.type !== 'scatter') {
+        return;
+      }
+
+      // The callback only describes the pointer event unless the user augments the types.
+      onItemClick(event, {
+        type: 'scatter',
+        seriesId: item.seriesId,
+        dataIndex: item.dataIndex
+      });
+    });
+  }, [instance, onItemClick]);
 
   // Instance implementation
   const enableVoronoiCallback = (0, _useEventCallback.default)(() => {

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

@@ -212,6 +212,25 @@ export const useChartClosestPoint = ({
       pressEndHandler.cleanup();
     };
   }, [chartsLayerContainerRef, yAxis, xAxis, resolvedHitAreaRadius, onItemClick, resolvedDisableHitArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
+  React.useEffect(() => {
+    if (!onItemClick || !instance.registerItemActivationHandler) {
+      return undefined;
+    }
+    return instance.registerItemActivationHandler({
+      type: 'scatter'
+    }, (event, item) => {
+      if (item.type !== 'scatter') {
+        return;
+      }
+
+      // The callback only describes the pointer event unless the user augments the types.
+      onItemClick(event, {
+        type: 'scatter',
+        seriesId: item.seriesId,
+        dataIndex: item.dataIndex
+      });
+    });
+  }, [instance, onItemClick]);
 
   // Instance implementation
   const enableVoronoiCallback = useEventCallback(() => {

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

@@ -7,6 +7,8 @@ import type { UseChartHighlightSignature } from "../useChartHighlight/index.mjs"
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
 import type { UseChartTooltipSignature } from "../useChartTooltip/index.mjs";
 import type { UseChartZAxisSignature } from "../useChartZAxis/index.mjs";
+import type { UseChartKeyboardNavigationSignature } from "../useChartKeyboardNavigation/index.mjs";
+import type { ChartsActivationEvent } from "../../../../models/events.mjs";
 export interface UseChartVoronoiInstance {
   /**
    * Enable the voronoi computation.
@@ -40,10 +42,10 @@ export interface UseChartVoronoiParameters {
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
-   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ChartsActivationEvent} event Event caught at the svg level
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
-  onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
 }
 export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'hitAreaRadius' | 'disableHitArea' | 'onItemClick'>;
 export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
@@ -52,5 +54,5 @@ export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = C
   params: UseChartVoronoiParameters;
   defaultizedParams: UseChartVoronoiDefaultizedParameters;
   dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
-  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature, UseChartZAxisSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature, UseChartZAxisSignature, UseChartKeyboardNavigationSignature];
 }>;

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

@@ -7,6 +7,8 @@ import type { UseChartHighlightSignature } from "../useChartHighlight/index.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { UseChartTooltipSignature } from "../useChartTooltip/index.js";
 import type { UseChartZAxisSignature } from "../useChartZAxis/index.js";
+import type { UseChartKeyboardNavigationSignature } from "../useChartKeyboardNavigation/index.js";
+import type { ChartsActivationEvent } from "../../../../models/events.js";
 export interface UseChartVoronoiInstance {
   /**
    * Enable the voronoi computation.
@@ -40,10 +42,10 @@ export interface UseChartVoronoiParameters {
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
-   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ChartsActivationEvent} event Event caught at the svg level
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
-  onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
 }
 export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'hitAreaRadius' | 'disableHitArea' | 'onItemClick'>;
 export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
@@ -52,5 +54,5 @@ export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = C
   params: UseChartVoronoiParameters;
   defaultizedParams: UseChartVoronoiDefaultizedParameters;
   dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
-  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature, UseChartZAxisSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature<SeriesType>, UseChartTooltipSignature, UseChartZAxisSignature, UseChartKeyboardNavigationSignature];
 }>;

package/internals/plugins/featurePlugins/useChartItemClick/useChartItemClick.js

@@ -1,10 +1,12 @@
 "use strict";
 'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartItemClick = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _getChartPoint = require("../../../getChartPoint");
 const useChartItemClick = ({
   params,
@@ -14,6 +16,19 @@ const useChartItemClick = ({
   const {
     onItemClick
   } = params;
+  React.useEffect(() => {
+    if (!onItemClick || !instance.registerItemActivationHandler) {
+      return undefined;
+    }
+    return instance.registerItemActivationHandler({}, (event, item) => {
+      const seriesTypeConfig = store.state.seriesConfig.config[item.type];
+      // @ts-ignore The type inference for store.state does not support generic yet
+      const itemWithData = seriesTypeConfig?.getItemWithData?.(store.state, item);
+
+      // The callback only describes the pointer event unless the user augments the types.
+      onItemClick(event, itemWithData ?? item);
+    });
+  }, [instance, onItemClick, store]);
   if (!onItemClick) {
     return {
       instance: {}

package/internals/plugins/featurePlugins/useChartItemClick/useChartItemClick.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import { getChartPoint } from "../../../getChartPoint.mjs";
 export const useChartItemClick = ({
   params,
@@ -9,6 +10,19 @@ export const useChartItemClick = ({
   const {
     onItemClick
   } = params;
+  React.useEffect(() => {
+    if (!onItemClick || !instance.registerItemActivationHandler) {
+      return undefined;
+    }
+    return instance.registerItemActivationHandler({}, (event, item) => {
+      const seriesTypeConfig = store.state.seriesConfig.config[item.type];
+      // @ts-ignore The type inference for store.state does not support generic yet
+      const itemWithData = seriesTypeConfig?.getItemWithData?.(store.state, item);
+
+      // The callback only describes the pointer event unless the user augments the types.
+      onItemClick(event, itemWithData ?? item);
+    });
+  }, [instance, onItemClick, store]);
   if (!onItemClick) {
     return {
       instance: {}

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

@@ -2,14 +2,16 @@ import type { ChartPluginSignature } from "../../models/index.mjs";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
 import type { SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.mjs";
 import type { ChartSeriesTypeRequiredPlugins } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import type { UseChartKeyboardNavigationSignature } from "../useChartKeyboardNavigation/index.mjs";
+import type { ChartsActivationEvent } from "../../../../models/events.mjs";
 export interface UseChartItemClickParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * The callback fired when an item is clicked.
    *
-   * @param {React.MouseEvent<HTMLDivElement, MouseEvent>} event The click event.
+   * @param {ChartsActivationEvent<HTMLDivElement>} event The click event.
    * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
-  onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
+  onItemClick?: (event: ChartsActivationEvent<HTMLDivElement>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
 }
 export interface UseChartItemClickInstance {
   handleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -20,4 +22,5 @@ export type UseChartItemClickSignature<SeriesType extends ChartSeriesType = Char
   defaultizedParams: UseChartItemClickParameters<SeriesType>;
   instance: UseChartItemClickInstance;
   dependencies: ChartSeriesTypeRequiredPlugins<SeriesType>;
+  optionalDependencies: [UseChartKeyboardNavigationSignature];
 }>;

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

@@ -2,14 +2,16 @@ import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import type { SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.js";
 import type { ChartSeriesTypeRequiredPlugins } from "../../corePlugins/useChartSeriesConfig/index.js";
+import type { UseChartKeyboardNavigationSignature } from "../useChartKeyboardNavigation/index.js";
+import type { ChartsActivationEvent } from "../../../../models/events.js";
 export interface UseChartItemClickParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * The callback fired when an item is clicked.
    *
-   * @param {React.MouseEvent<HTMLDivElement, MouseEvent>} event The click event.
+   * @param {ChartsActivationEvent<HTMLDivElement>} event The click event.
    * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
-  onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
+  onItemClick?: (event: ChartsActivationEvent<HTMLDivElement>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
 }
 export interface UseChartItemClickInstance {
   handleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -20,4 +22,5 @@ export type UseChartItemClickSignature<SeriesType extends ChartSeriesType = Char
   defaultizedParams: UseChartItemClickParameters<SeriesType>;
   instance: UseChartItemClickInstance;
   dependencies: ChartSeriesTypeRequiredPlugins<SeriesType>;
+  optionalDependencies: [UseChartKeyboardNavigationSignature];
 }>;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/index.d.mts

@@ -1,4 +1,5 @@
 export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.mjs";
 export * from "./useChartKeyboardNavigation.selectors.mjs";
-export type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.mjs";
+export type { UseChartKeyboardNavigationSignature, ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.mjs";
+export { isItemActivationKey } from "./itemActivation.mjs";
 export type * from "./keyboardFocusHandler.types.mjs";

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/index.d.ts

@@ -1,4 +1,5 @@
 export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.js";
 export * from "./useChartKeyboardNavigation.selectors.js";
-export type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+export type { UseChartKeyboardNavigationSignature, ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.js";
+export { isItemActivationKey } from "./itemActivation.js";
 export type * from "./keyboardFocusHandler.types.js";

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  useChartKeyboardNavigation: true
+  useChartKeyboardNavigation: true,
+  isItemActivationKey: true
 };
+Object.defineProperty(exports, "isItemActivationKey", {
+  enumerable: true,
+  get: function () {
+    return _itemActivation.isItemActivationKey;
+  }
+});
 Object.defineProperty(exports, "useChartKeyboardNavigation", {
   enumerable: true,
   get: function () {
@@ -24,4 +31,5 @@ Object.keys(_useChartKeyboardNavigation2).forEach(function (key) {
       return _useChartKeyboardNavigation2[key];
     }
   });
-});
+});
+var _itemActivation = require("./itemActivation");

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/index.mjs

@@ -1,2 +1,3 @@
 export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.mjs";
-export * from "./useChartKeyboardNavigation.selectors.mjs";
+export * from "./useChartKeyboardNavigation.selectors.mjs";
+export { isItemActivationKey } from "./itemActivation.mjs";

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/itemActivation.d.mts

@@ -0,0 +1,13 @@
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.mjs";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+import type { ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.mjs";
+export type ItemActivationRegistration = {
+  scope: ItemActivationScope;
+  handler: ItemActivationHandler;
+};
+export declare function isItemActivationKey(event: KeyboardEvent): boolean;
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+export declare function findItemActivationHandler(registrations: Iterable<ItemActivationRegistration>, item: FocusedItemIdentifier<ChartSeriesType>): ItemActivationHandler | null;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/itemActivation.d.ts

@@ -0,0 +1,13 @@
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.js";
+export type ItemActivationRegistration = {
+  scope: ItemActivationScope;
+  handler: ItemActivationHandler;
+};
+export declare function isItemActivationKey(event: KeyboardEvent): boolean;
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+export declare function findItemActivationHandler(registrations: Iterable<ItemActivationRegistration>, item: FocusedItemIdentifier<ChartSeriesType>): ItemActivationHandler | null;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/itemActivation.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findItemActivationHandler = findItemActivationHandler;
+exports.isItemActivationKey = isItemActivationKey;
+function isItemActivationKey(event) {
+  return event.key === 'Enter' || event.key === ' ';
+}
+function getScopeSpecificity(scope, item) {
+  if (scope.type !== undefined && scope.type !== item.type) {
+    return null;
+  }
+  if (scope.seriesId !== undefined && (!('seriesId' in item) || scope.seriesId !== item.seriesId)) {
+    return null;
+  }
+  return (scope.type === undefined ? 0 : 1) + (scope.seriesId === undefined ? 0 : 1);
+}
+
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+function findItemActivationHandler(registrations, item) {
+  let bestHandler = null;
+  let bestSpecificity = -1;
+  let bestPriority = -1;
+  for (const registration of registrations) {
+    const specificity = getScopeSpecificity(registration.scope, item);
+    const priority = registration.scope.priority ?? 0;
+    if (specificity !== null && (registration.scope.canActivate === undefined || registration.scope.canActivate(item)) && (specificity > bestSpecificity || specificity === bestSpecificity && priority > bestPriority)) {
+      bestHandler = registration.handler;
+      bestSpecificity = specificity;
+      bestPriority = priority;
+    }
+  }
+  return bestHandler;
+}

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/itemActivation.mjs

@@ -0,0 +1,32 @@
+export function isItemActivationKey(event) {
+  return event.key === 'Enter' || event.key === ' ';
+}
+function getScopeSpecificity(scope, item) {
+  if (scope.type !== undefined && scope.type !== item.type) {
+    return null;
+  }
+  if (scope.seriesId !== undefined && (!('seriesId' in item) || scope.seriesId !== item.seriesId)) {
+    return null;
+  }
+  return (scope.type === undefined ? 0 : 1) + (scope.seriesId === undefined ? 0 : 1);
+}
+
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+export function findItemActivationHandler(registrations, item) {
+  let bestHandler = null;
+  let bestSpecificity = -1;
+  let bestPriority = -1;
+  for (const registration of registrations) {
+    const specificity = getScopeSpecificity(registration.scope, item);
+    const priority = registration.scope.priority ?? 0;
+    if (specificity !== null && (registration.scope.canActivate === undefined || registration.scope.canActivate(item)) && (specificity > bestSpecificity || specificity === bestSpecificity && priority > bestPriority)) {
+      bestHandler = registration.handler;
+      bestSpecificity = specificity;
+      bestPriority = priority;
+    }
+  }
+  return bestHandler;
+}