@mui/x-charts 9.12.0 → 9.13.0

package/internals/index.js

@@ -30,6 +30,7 @@ var _exportNames = {
   getLineLikeTooltip: true,
   checkBarChartScaleErrors: true,
   getBandSize: true,
+  useDefaultTickLabelStyle: true,
   EPSILON: true,
   useChartsTooltipUtilityClasses: true,
   getChartsTooltipUtilityClass: true,
@@ -157,6 +158,12 @@ Object.defineProperty(exports, "useChartsTooltipUtilityClasses", {
     return _chartsTooltipClasses.useUtilityClasses;
   }
 });
+Object.defineProperty(exports, "useDefaultTickLabelStyle", {
+  enumerable: true,
+  get: function () {
+    return _useDefaultTickLabelStyle.useDefaultTickLabelStyle;
+  }
+});
 Object.defineProperty(exports, "useDrawingArea", {
   enumerable: true,
   get: function () {
@@ -967,6 +974,7 @@ var _processLineLikeSeries = require("./processLineLikeSeries");
 var _getLineLikeTooltip = require("./getLineLikeTooltip");
 var _checkBarChartScaleErrors = require("../BarChart/checkBarChartScaleErrors");
 var _getBandSize = require("./getBandSize");
+var _useDefaultTickLabelStyle = require("./useDefaultTickLabelStyle");
 var _defaultSeriesConfig = require("./plugins/utils/defaultSeriesConfig");
 Object.keys(_defaultSeriesConfig).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/index.mjs

@@ -91,6 +91,7 @@ export { processLineLikeSeries } from "./processLineLikeSeries.mjs";
 export { getLineLikeTooltip } from "./getLineLikeTooltip.mjs";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.mjs";
 export { getBandSize } from "./getBandSize.mjs";
+export { useDefaultTickLabelStyle } from "./useDefaultTickLabelStyle.mjs";
 export * from "./plugins/utils/defaultSeriesConfig.mjs";
 export { EPSILON } from "../utils/epsilon.mjs";
 export { useUtilityClasses as useChartsTooltipUtilityClasses, getChartsTooltipUtilityClass } from "../ChartsTooltip/chartsTooltipClasses.mjs";

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

@@ -1,4 +1,5 @@
 import type { DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.mjs";
+import type { ChartsTextStyle } from "../../../getWordsByLines.mjs";
 import type { DomainDefinition } from "./domain.mjs";
 interface ComputeAxisAutoSizeOptions {
   axis: DefaultedXAxis | DefaultedYAxis;
@@ -9,6 +10,8 @@ interface ComputeAxisAutoSizeOptions {
    * so tick labels measured from them match what the chart renders.
    */
   domain?: DomainDefinition;
+  /** Font the ticks render with, used only for measuring. */
+  defaultTickLabelStyle?: ChartsTextStyle;
 }
 /**
  * Result of auto-size computation for axes.

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

@@ -1,4 +1,5 @@
 import type { DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
+import type { ChartsTextStyle } from "../../../getWordsByLines.js";
 import type { DomainDefinition } from "./domain.js";
 interface ComputeAxisAutoSizeOptions {
   axis: DefaultedXAxis | DefaultedYAxis;
@@ -9,6 +10,8 @@ interface ComputeAxisAutoSizeOptions {
    * so tick labels measured from them match what the chart renders.
    */
   domain?: DomainDefinition;
+  /** Font the ticks render with, used only for measuring. */
+  defaultTickLabelStyle?: ChartsTextStyle;
 }
 /**
  * Result of auto-size computation for axes.

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

@@ -219,7 +219,7 @@ function getRotatedDimension(width, height, angle, direction) {
  *
  * Returns both the total size and the computed tick sizes for each group level.
  */
-function computeGroupedAxisAutoSize(axis, direction) {
+function computeGroupedAxisAutoSize(axis, direction, defaultTickLabelStyle) {
   const {
     groups,
     data,
@@ -238,7 +238,7 @@ function computeGroupedAxisAutoSize(axis, direction) {
   for (let groupIndex = 0; groupIndex < groups.length; groupIndex += 1) {
     const group = groups[groupIndex];
     const groupLabels = selectLargestCandidates(getGroupLabels(data, group));
-    const groupTickLabelStyle = (0, _extends2.default)({}, axisTickLabelStyle, group.tickLabelStyle);
+    const groupTickLabelStyle = (0, _extends2.default)({}, defaultTickLabelStyle, axisTickLabelStyle, group.tickLabelStyle);
     const angle = groupTickLabelStyle?.angle;
     const {
       maxWidth,
@@ -284,12 +284,16 @@ function computeAxisAutoSize(options) {
   const {
     axis,
     direction,
-    domain
+    domain,
+    defaultTickLabelStyle
   } = options;
   if (hasGroups(axis)) {
-    return computeGroupedAxisAutoSize(axis, direction);
+    return computeGroupedAxisAutoSize(axis, direction, defaultTickLabelStyle);
   }
-  const tickLabelStyle = axis.tickLabelStyle;
+
+  // Measure with the font the ticks render with. `axis.tickLabelStyle` only holds what the user set,
+  // so on its own the measurement element would inherit the document font instead.
+  const tickLabelStyle = (0, _extends2.default)({}, defaultTickLabelStyle, axis.tickLabelStyle);
   const tickSize = axis.tickSize ?? _autoSizeConstants.AXIS_AUTO_SIZE_TICK_SIZE;
   const hasLabel = Boolean(axis.label);
   const angle = tickLabelStyle?.angle;

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

@@ -212,7 +212,7 @@ function getRotatedDimension(width, height, angle, direction) {
  *
  * Returns both the total size and the computed tick sizes for each group level.
  */
-function computeGroupedAxisAutoSize(axis, direction) {
+function computeGroupedAxisAutoSize(axis, direction, defaultTickLabelStyle) {
   const {
     groups,
     data,
@@ -231,7 +231,7 @@ function computeGroupedAxisAutoSize(axis, direction) {
   for (let groupIndex = 0; groupIndex < groups.length; groupIndex += 1) {
     const group = groups[groupIndex];
     const groupLabels = selectLargestCandidates(getGroupLabels(data, group));
-    const groupTickLabelStyle = _extends({}, axisTickLabelStyle, group.tickLabelStyle);
+    const groupTickLabelStyle = _extends({}, defaultTickLabelStyle, axisTickLabelStyle, group.tickLabelStyle);
     const angle = groupTickLabelStyle?.angle;
     const {
       maxWidth,
@@ -277,12 +277,16 @@ export function computeAxisAutoSize(options) {
   const {
     axis,
     direction,
-    domain
+    domain,
+    defaultTickLabelStyle
   } = options;
   if (hasGroups(axis)) {
-    return computeGroupedAxisAutoSize(axis, direction);
+    return computeGroupedAxisAutoSize(axis, direction, defaultTickLabelStyle);
   }
-  const tickLabelStyle = axis.tickLabelStyle;
+
+  // Measure with the font the ticks render with. `axis.tickLabelStyle` only holds what the user set,
+  // so on its own the measurement element would inherit the document font instead.
+  const tickLabelStyle = _extends({}, defaultTickLabelStyle, axis.tickLabelStyle);
   const tickSize = axis.tickSize ?? AXIS_AUTO_SIZE_TICK_SIZE;
   const hasLabel = Boolean(axis.label);
   const angle = tickLabelStyle?.angle;

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

@@ -10,6 +10,9 @@ var _computeAxisAutoSize = require("./computeAxisAutoSize");
 var _useChartAxisDomains = require("./useChartAxisDomains.selectors");
 // Direct state access to avoid circular dependency
 const selectorIsHydrated = state => state.dimensions.width && state.dimensions.height;
+
+// Direct state access to avoid circular dependency
+const selectorDefaultTickLabelStyle = state => state.cartesianAxis?.defaultTickLabelStyle;
 const EMPTY_SIZES = {};
 const EMPTY_RESULTS = {};
 
@@ -17,7 +20,7 @@ const EMPTY_RESULTS = {};
  * Selector that computes full auto-size results for X axes that have `height: 'auto'`.
  * Returns a map of axis ID to full result (including group tick sizes for grouped axes).
  */
-const selectorChartXAxisAutoSizeResults = exports.selectorChartXAxisAutoSizeResults = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, selectorIsHydrated, _useChartAxisDomains.selectorChartXAxisDomainsForAutoSize, function selectorChartXAxisAutoSizeResults(xAxes, isHydrated, domainsMap) {
+const selectorChartXAxisAutoSizeResults = exports.selectorChartXAxisAutoSizeResults = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawXAxis, selectorIsHydrated, _useChartAxisDomains.selectorChartXAxisDomainsForAutoSize, selectorDefaultTickLabelStyle, function selectorChartXAxisAutoSizeResults(xAxes, isHydrated, domainsMap, defaultTickLabelStyle) {
   const hasAutoAxis = xAxes?.some(axis => axis.height === 'auto');
   if (!hasAutoAxis || !isHydrated) {
     return EMPTY_RESULTS;
@@ -29,7 +32,8 @@ const selectorChartXAxisAutoSizeResults = exports.selectorChartXAxisAutoSizeResu
       const computed = (0, _computeAxisAutoSize.computeAxisAutoSize)({
         axis,
         direction: 'x',
-        domain: domainsMap[axis.id]
+        domain: domainsMap[axis.id],
+        defaultTickLabelStyle
       });
       if (computed !== undefined) {
         results[axis.id] = computed;
@@ -58,7 +62,7 @@ const selectorChartXAxisAutoSizes = exports.selectorChartXAxisAutoSizes = (0, _s
  * Selector that computes full auto-size results for Y axes that have `width: 'auto'`.
  * Returns a map of axis ID to full result (including group tick sizes for grouped axes).
  */
-const selectorChartYAxisAutoSizeResults = exports.selectorChartYAxisAutoSizeResults = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, selectorIsHydrated, _useChartAxisDomains.selectorChartYAxisDomainsForAutoSize, function selectorChartYAxisAutoSizeResults(yAxes, isHydrated, domainsMap) {
+const selectorChartYAxisAutoSizeResults = exports.selectorChartYAxisAutoSizeResults = (0, _store.createSelectorMemoized)(_useChartCartesianAxisLayout.selectorChartRawYAxis, selectorIsHydrated, _useChartAxisDomains.selectorChartYAxisDomainsForAutoSize, selectorDefaultTickLabelStyle, function selectorChartYAxisAutoSizeResults(yAxes, isHydrated, domainsMap, defaultTickLabelStyle) {
   const hasAutoAxis = yAxes?.some(axis => axis.width === 'auto');
   if (!hasAutoAxis || !isHydrated) {
     return EMPTY_RESULTS;
@@ -70,7 +74,8 @@ const selectorChartYAxisAutoSizeResults = exports.selectorChartYAxisAutoSizeResu
       const computed = (0, _computeAxisAutoSize.computeAxisAutoSize)({
         axis,
         direction: 'y',
-        domain: domainsMap[axis.id]
+        domain: domainsMap[axis.id],
+        defaultTickLabelStyle
       });
       if (computed !== undefined) {
         results[axis.id] = computed;

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

@@ -5,6 +5,9 @@ import { selectorChartXAxisDomainsForAutoSize, selectorChartYAxisDomainsForAutoS
 
 // Direct state access to avoid circular dependency
 const selectorIsHydrated = state => state.dimensions.width && state.dimensions.height;
+
+// Direct state access to avoid circular dependency
+const selectorDefaultTickLabelStyle = state => state.cartesianAxis?.defaultTickLabelStyle;
 const EMPTY_SIZES = {};
 const EMPTY_RESULTS = {};
 
@@ -12,7 +15,7 @@ const EMPTY_RESULTS = {};
  * Selector that computes full auto-size results for X axes that have `height: 'auto'`.
  * Returns a map of axis ID to full result (including group tick sizes for grouped axes).
  */
-export const selectorChartXAxisAutoSizeResults = createSelectorMemoized(selectorChartRawXAxis, selectorIsHydrated, selectorChartXAxisDomainsForAutoSize, function selectorChartXAxisAutoSizeResults(xAxes, isHydrated, domainsMap) {
+export const selectorChartXAxisAutoSizeResults = createSelectorMemoized(selectorChartRawXAxis, selectorIsHydrated, selectorChartXAxisDomainsForAutoSize, selectorDefaultTickLabelStyle, function selectorChartXAxisAutoSizeResults(xAxes, isHydrated, domainsMap, defaultTickLabelStyle) {
   const hasAutoAxis = xAxes?.some(axis => axis.height === 'auto');
   if (!hasAutoAxis || !isHydrated) {
     return EMPTY_RESULTS;
@@ -24,7 +27,8 @@ export const selectorChartXAxisAutoSizeResults = createSelectorMemoized(selector
       const computed = computeAxisAutoSize({
         axis,
         direction: 'x',
-        domain: domainsMap[axis.id]
+        domain: domainsMap[axis.id],
+        defaultTickLabelStyle
       });
       if (computed !== undefined) {
         results[axis.id] = computed;
@@ -53,7 +57,7 @@ export const selectorChartXAxisAutoSizes = createSelectorMemoized(selectorChartX
  * Selector that computes full auto-size results for Y axes that have `width: 'auto'`.
  * Returns a map of axis ID to full result (including group tick sizes for grouped axes).
  */
-export const selectorChartYAxisAutoSizeResults = createSelectorMemoized(selectorChartRawYAxis, selectorIsHydrated, selectorChartYAxisDomainsForAutoSize, function selectorChartYAxisAutoSizeResults(yAxes, isHydrated, domainsMap) {
+export const selectorChartYAxisAutoSizeResults = createSelectorMemoized(selectorChartRawYAxis, selectorIsHydrated, selectorChartYAxisDomainsForAutoSize, selectorDefaultTickLabelStyle, function selectorChartYAxisAutoSizeResults(yAxes, isHydrated, domainsMap, defaultTickLabelStyle) {
   const hasAutoAxis = yAxes?.some(axis => axis.width === 'auto');
   if (!hasAutoAxis || !isHydrated) {
     return EMPTY_RESULTS;
@@ -65,7 +69,8 @@ export const selectorChartYAxisAutoSizeResults = createSelectorMemoized(selector
       const computed = computeAxisAutoSize({
         axis,
         direction: 'y',
-        domain: domainsMap[axis.id]
+        domain: domainsMap[axis.id],
+        defaultTickLabelStyle
       });
       if (computed !== undefined) {
         results[axis.id] = computed;

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/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -20,6 +20,9 @@ var _useChartSeries2 = require("../../corePlugins/useChartSeries");
 var _useChartCartesianAxisRendering = require("../useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 var _getChartPoint = require("../../../getChartPoint");
 var _getItemAtAxisPosition = require("./utils/getItemAtAxisPosition");
+var _getItemAtRotationIndex = require("./utils/getItemAtRotationIndex");
+var _useChartPolarAxis = require("../useChartPolarAxis/useChartPolarAxis.selectors");
+var _useChartPolarInteraction = require("../useChartPolarAxis/useChartPolarInteraction.selectors");
 var _itemActivation = require("./itemActivation");
 var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation.selectors");
 /**
@@ -137,30 +140,55 @@ const useChartKeyboardNavigation = ({
   });
 
   /**
-   * The item a click landed on, read from the item the pointer is over. Falls back to the axis
-   * under the pointer, which covers the line and area paths, whose hovered item only knows its
-   * series.
+   * The item a click landed on, read from the item the pointer is over. An area or line path only
+   * knows its series, and a radar reports no item at all, so an incomplete one falls back to the
+   * axis under the pointer.
    *
    * A click that resolves nothing is left alone rather than focusing the chart. The drawing area
    * is a rectangle, but the data rarely fills it: taking the focus from a click next to a pie,
    * outside its circle, reads as the chart grabbing clicks that were not meant for it.
    */
   const resolveItemAtPointer = (0, _useEventCallback.default)(event => {
-    // Every series reports the item under the pointer, so the click itself needs no wiring.
+    const seriesConfig = (0, _useChartSeriesConfig.selectorChartSeriesConfig)(store.state);
     const hoveredItem = store.state.interaction?.hoveredItem;
-    if (hoveredItem != null) {
-      return hoveredItem;
+    // Cleaned before the check, because what a series stores is not always an identifier: the
+    // scatter reports its whole data point, whose optional `id` would read as an incomplete one.
+    const cleanedHoveredItem = hoveredItem == null ? null : (0, _cleanIdentifier.cleanIdentifier)(seriesConfig, hoveredItem);
+
+    // Series that report a complete item need no further wiring.
+    if (cleanedHoveredItem != null && isCompleteFocusIdentifier(cleanedHoveredItem)) {
+      return cleanedHoveredItem;
     }
     const element = chartsLayerContainerRef.current;
     const point = element === null ? null : (0, _getChartPoint.getChartPoint)(element, event);
-    const item = point && instance.isPointInside?.(point.x, point.y) ? (0, _getItemAtAxisPosition.getItemAtAxisPosition)({
+    if (!point || !instance.isPointInside?.(point.x, point.y)) {
+      return null;
+    }
+    const processedSeries = (0, _useChartSeries2.selectorChartSeriesProcessed)(store.state);
+    // An incomplete hovered item still names the series under the pointer, which is a better
+    // target than the focused one: a click on a series should stay on it.
+    const focusedItem = cleanedHoveredItem ?? store.state.keyboardNavigation.item;
+    const item = (0, _getItemAtAxisPosition.getItemAtAxisPosition)({
       point,
       xAxis: (0, _useChartCartesianAxisRendering.selectorChartXAxis)(store.state),
       yAxis: (0, _useChartCartesianAxisRendering.selectorChartYAxis)(store.state),
-      processedSeries: (0, _useChartSeries2.selectorChartSeriesProcessed)(store.state),
-      focusedItem: store.state.keyboardNavigation.item
-    }) : null;
-    return item;
+      processedSeries,
+      focusedItem
+    });
+    if (item !== null) {
+      return item;
+    }
+
+    // A radar area only covers the polygon the data draws, so a click inside the chart but outside
+    // it resolves nothing above. Fall back to the rotation axis, the same one the highlight uses.
+    if ((0, _useChartPolarAxis.selectorChartRotationAxis)(store.state).axisIds.length === 0) {
+      return null;
+    }
+    return (0, _getItemAtRotationIndex.getItemAtRotationIndex)({
+      dataIndex: (0, _useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex)(store.state),
+      processedSeries,
+      focusedItem
+    });
   });
   const activationRegistrationsRef = React.useRef(new Map());
   const nextRegistrationIdRef = React.useRef(0);
@@ -240,6 +268,11 @@ const useChartKeyboardNavigation = ({
       handler(event, focusedItem);
     }
     function keyboardHandler(event) {
+      // Item navigation only uses unmodified keys.
+      // Modified ones are left to the browser, and to chart interactions such as keyboard zoom and pan.
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = (0, _useChartSeriesConfig.selectorChartSeriesConfig)(store.state);
       let seriesType = newFocusedItem?.type;