@mui/x-charts 9.11.1 → 9.13.0

package/internals/ellipsize.d.ts

@@ -1,3 +1,4 @@
+import type { ChartsTextAnchor, ChartsTextBaseline } from "./getWordsByLines.js";
 interface EllipsizeConfig {
   width: number;
   height: number;
@@ -9,6 +10,35 @@ interface EllipsizeConfig {
   };
 }
 export declare function doesTextFitInRect(text: string, config: EllipsizeConfig): boolean;
+export interface RotatedTextBoundsConfig {
+  /** Angle, in degrees, in which the text is displayed. */
+  angle: number;
+  textAnchor?: ChartsTextAnchor;
+  dominantBaseline?: ChartsTextBaseline;
+  isRtl?: boolean;
+}
+export interface RotatedTextBounds {
+  /** Width of the text bounding box once rotated. */
+  width: number;
+  /** How far the text extends above its anchor point. */
+  above: number;
+  /** How far the text extends below its anchor point. */
+  below: number;
+}
+/**
+ * Returns the size of a rotated text, and how far it extends on each side of its anchor point.
+ *
+ * Which side of the anchor the text is drawn on depends on both the text anchoring and the rotation,
+ * so `above` and `below` are not necessarily equal. Either of them is negative when the whole text
+ * sits on the other side of the anchor point.
+ *
+ * @param textSize The size of the text before rotation.
+ * @param config How the text is anchored and rotated.
+ */
+export declare function getRotatedTextBounds(textSize: {
+  width: number;
+  height: number;
+}, config: RotatedTextBoundsConfig): RotatedTextBounds;
 /** This function finds the best place to clip the text to add an ellipsis.
  *  This function assumes that the {@link doesTextFit} never returns true for longer text after returning false for
  *  shorter text.

package/internals/ellipsize.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.doesTextFitInRect = doesTextFitInRect;
 exports.ellipsize = ellipsize;
+exports.getRotatedTextBounds = getRotatedTextBounds;
 var _getGraphemeCount = require("./getGraphemeCount");
 var _degToRad = require("./degToRad");
 var _sliceUntil = require("./sliceUntil");
@@ -22,6 +23,65 @@ function doesTextFitInRect(text, config) {
   return angledWidth <= width && angledHeight <= height;
 }
 
+/**
+ * Position of the text bounding box relative to its anchor point, as a fraction of the text width.
+ * `0` means the box starts at the anchor, `-1` that it ends there.
+ */
+function getHorizontalAnchorOffset(textAnchor, isRtl) {
+  const anchor = textAnchor ?? 'middle';
+  if (anchor === 'middle') {
+    return -1 / 2;
+  }
+  const startsAtAnchor = isRtl ? anchor === 'end' : anchor === 'start';
+  return startsAtAnchor ? 0 : -1;
+}
+
+/**
+ * Position of the text bounding box relative to its anchor point, as a fraction of the text height.
+ * `0` means the box starts at the anchor, `-1` that it ends there.
+ */
+function getVerticalAnchorOffset(dominantBaseline) {
+  switch (dominantBaseline ?? 'central') {
+    case 'hanging':
+    case 'text-before-edge':
+      return 0;
+    case 'central':
+      return -1 / 2;
+    default:
+      return -1;
+  }
+}
+/**
+ * Returns the size of a rotated text, and how far it extends on each side of its anchor point.
+ *
+ * Which side of the anchor the text is drawn on depends on both the text anchoring and the rotation,
+ * so `above` and `below` are not necessarily equal. Either of them is negative when the whole text
+ * sits on the other side of the anchor point.
+ *
+ * @param textSize The size of the text before rotation.
+ * @param config How the text is anchored and rotated.
+ */
+function getRotatedTextBounds(textSize, config) {
+  const angle = (0, _degToRad.degToRad)(config.angle);
+  const sin = Math.sin(angle);
+  const cos = Math.cos(angle);
+  const left = getHorizontalAnchorOffset(config.textAnchor, config.isRtl ?? false) * textSize.width;
+  const right = left + textSize.width;
+  const top = getVerticalAnchorOffset(config.dominantBaseline) * textSize.height;
+  const bottom = top + textSize.height;
+
+  /* A rotation by `angle` maps a point to `(x * cos - y * sin, x * sin + y * cos)`. Both terms of
+   * the vertical coordinate are independent, so the extrema of their sum are the sums of their
+   * extrema. */
+  const fromWidth = [left * sin, right * sin];
+  const fromHeight = [top * cos, bottom * cos];
+  return {
+    width: Math.abs(textSize.width * cos) + Math.abs(textSize.height * sin),
+    above: -(Math.min(...fromWidth) + Math.min(...fromHeight)),
+    below: Math.max(...fromWidth) + Math.max(...fromHeight)
+  };
+}
+
 /** This function finds the best place to clip the text to add an ellipsis.
  *  This function assumes that the {@link doesTextFit} never returns true for longer text after returning false for
  *  shorter text.

package/internals/ellipsize.mjs

@@ -15,6 +15,65 @@ export function doesTextFitInRect(text, config) {
   return angledWidth <= width && angledHeight <= height;
 }
 
+/**
+ * Position of the text bounding box relative to its anchor point, as a fraction of the text width.
+ * `0` means the box starts at the anchor, `-1` that it ends there.
+ */
+function getHorizontalAnchorOffset(textAnchor, isRtl) {
+  const anchor = textAnchor ?? 'middle';
+  if (anchor === 'middle') {
+    return -1 / 2;
+  }
+  const startsAtAnchor = isRtl ? anchor === 'end' : anchor === 'start';
+  return startsAtAnchor ? 0 : -1;
+}
+
+/**
+ * Position of the text bounding box relative to its anchor point, as a fraction of the text height.
+ * `0` means the box starts at the anchor, `-1` that it ends there.
+ */
+function getVerticalAnchorOffset(dominantBaseline) {
+  switch (dominantBaseline ?? 'central') {
+    case 'hanging':
+    case 'text-before-edge':
+      return 0;
+    case 'central':
+      return -1 / 2;
+    default:
+      return -1;
+  }
+}
+/**
+ * Returns the size of a rotated text, and how far it extends on each side of its anchor point.
+ *
+ * Which side of the anchor the text is drawn on depends on both the text anchoring and the rotation,
+ * so `above` and `below` are not necessarily equal. Either of them is negative when the whole text
+ * sits on the other side of the anchor point.
+ *
+ * @param textSize The size of the text before rotation.
+ * @param config How the text is anchored and rotated.
+ */
+export function getRotatedTextBounds(textSize, config) {
+  const angle = degToRad(config.angle);
+  const sin = Math.sin(angle);
+  const cos = Math.cos(angle);
+  const left = getHorizontalAnchorOffset(config.textAnchor, config.isRtl ?? false) * textSize.width;
+  const right = left + textSize.width;
+  const top = getVerticalAnchorOffset(config.dominantBaseline) * textSize.height;
+  const bottom = top + textSize.height;
+
+  /* A rotation by `angle` maps a point to `(x * cos - y * sin, x * sin + y * cos)`. Both terms of
+   * the vertical coordinate are independent, so the extrema of their sum are the sums of their
+   * extrema. */
+  const fromWidth = [left * sin, right * sin];
+  const fromHeight = [top * cos, bottom * cos];
+  return {
+    width: Math.abs(textSize.width * cos) + Math.abs(textSize.height * sin),
+    above: -(Math.min(...fromWidth) + Math.min(...fromHeight)),
+    below: Math.max(...fromWidth) + Math.max(...fromHeight)
+  };
+}
+
 /** This function finds the best place to clip the text to add an ellipsis.
  *  This function assumes that the {@link doesTextFit} never returns true for longer text after returning false for
  *  shorter text.

package/internals/index.d.mts

@@ -83,6 +83,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/index.d.ts

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

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/corePlugins/useChartElementRef/useChartElementRef.js

@@ -10,10 +10,12 @@ var React = _interopRequireWildcard(require("react"));
 const useChartElementRef = () => {
   const chartsLayerContainerRef = React.useRef(null);
   const chartRootRef = React.useRef(null);
+  const chartsAccessibilityProxyRef = React.useRef(null);
   return {
     instance: {
       chartsLayerContainerRef,
-      chartRootRef
+      chartRootRef,
+      chartsAccessibilityProxyRef
     }
   };
 };

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.mjs

@@ -4,10 +4,12 @@ import * as React from 'react';
 export const useChartElementRef = () => {
   const chartsLayerContainerRef = React.useRef(null);
   const chartRootRef = React.useRef(null);
+  const chartsAccessibilityProxyRef = React.useRef(null);
   return {
     instance: {
       chartsLayerContainerRef,
-      chartRootRef
+      chartRootRef,
+      chartsAccessibilityProxyRef
     }
   };
 };

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.types.d.mts

@@ -9,6 +9,11 @@ export interface UseChartElementRefInstance {
    * Reference to the chart root element.
    */
   chartRootRef: React.RefObject<Element | null>;
+  /**
+   * Reference to the root of the accessibility proxy, the element owning the chart tab stop.
+   * It is `null` when keyboard navigation is disabled.
+   */
+  chartsAccessibilityProxyRef: React.RefObject<HTMLDivElement | null>;
 }
 export type UseChartElementRefSignature = ChartPluginSignature<{
   instance: UseChartElementRefInstance;

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.types.d.ts

@@ -9,6 +9,11 @@ export interface UseChartElementRefInstance {
    * Reference to the chart root element.
    */
   chartRootRef: React.RefObject<Element | null>;
+  /**
+   * Reference to the root of the accessibility proxy, the element owning the chart tab stop.
+   * It is `null` when keyboard navigation is disabled.
+   */
+  chartsAccessibilityProxyRef: React.RefObject<HTMLDivElement | null>;
 }
 export type UseChartElementRefSignature = ChartPluginSignature<{
   instance: UseChartElementRefInstance;

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -40,6 +40,7 @@ function useRegisterPointerInteractions() {
       const lastItem = lastItemRef.current;
       if (lastItem) {
         lastItemRef.current = undefined;
+        instance.clearHoveredItem(lastItem);
         instance.removeTooltipItem(lastItem);
         instance.clearHighlight();
       }
@@ -66,6 +67,7 @@ function useRegisterPointerInteractions() {
       }
       if (item) {
         instance.setLastUpdateSource('pointer');
+        instance.setHoveredItem(item);
         instance.setTooltipItem(item);
         instance.setHighlight(item);
         lastItemRef.current = item;
@@ -73,10 +75,18 @@ function useRegisterPointerInteractions() {
         reset();
       }
     };
+
+    // Touch has no hover phase, so a tap may never produce a `pointermove`. Resolving on
+    // `pointerdown` too is what makes the pointer item known for a stationary tap.
+    const onPointerDown = function onPointerDown(event) {
+      onPointerMove(event);
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     element.addEventListener('pointerleave', onPointerLeave);
     element.addEventListener('pointermove', onPointerMove);
     element.addEventListener('pointerenter', onPointerEnter);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       element.removeEventListener('pointerenter', onPointerEnter);
       element.removeEventListener('pointermove', onPointerMove);
       element.removeEventListener('pointerleave', onPointerLeave);

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs

@@ -34,6 +34,7 @@ export function useRegisterPointerInteractions() {
       const lastItem = lastItemRef.current;
       if (lastItem) {
         lastItemRef.current = undefined;
+        instance.clearHoveredItem(lastItem);
         instance.removeTooltipItem(lastItem);
         instance.clearHighlight();
       }
@@ -60,6 +61,7 @@ export function useRegisterPointerInteractions() {
       }
       if (item) {
         instance.setLastUpdateSource('pointer');
+        instance.setHoveredItem(item);
         instance.setTooltipItem(item);
         instance.setHighlight(item);
         lastItemRef.current = item;
@@ -67,10 +69,18 @@ export function useRegisterPointerInteractions() {
         reset();
       }
     };
+
+    // Touch has no hover phase, so a tap may never produce a `pointermove`. Resolving on
+    // `pointerdown` too is what makes the pointer item known for a stationary tap.
+    const onPointerDown = function onPointerDown(event) {
+      onPointerMove(event);
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     element.addEventListener('pointerleave', onPointerLeave);
     element.addEventListener('pointermove', onPointerMove);
     element.addEventListener('pointerenter', onPointerEnter);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       element.removeEventListener('pointerenter', onPointerEnter);
       element.removeEventListener('pointermove', onPointerMove);
       element.removeEventListener('pointerleave', onPointerLeave);

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;