@mui/x-charts 9.12.0 → 9.14.0

package/internals/components/ChartsAccessibilityProxy/useZoomAnnouncement.mjs

@@ -0,0 +1,62 @@
+'use client';
+
+import * as React from 'react';
+import { useChartsLocalization } from "../../../hooks/index.mjs";
+import { useStore } from "../../store/useStore.mjs";
+import { selectorChartsZoomAnnouncement } from "../../plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
+import { selectorChartZoomMap, selectorChartZoomOptionsLookup } from "../../plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+
+/**
+ * Get the message announcing the visible range of the zoomable axes.
+ *
+ * The message is taken when the keyboard zoom and pan asks for it, not derived from the zoom
+ * itself: the zoom also moves on wheel, drag, and from the application, and the live region must
+ * stay silent then.
+ * @returns {string | null} the message to announce, or `null` when there is nothing to announce
+ */
+export function useZoomAnnouncement() {
+  const store = useStore();
+  const announcement = store.use(selectorChartsZoomAnnouncement);
+  const zoomMap = store.use(selectorChartZoomMap);
+  const optionsLookup = store.use(selectorChartZoomOptionsLookup);
+  const {
+    localeText
+  } = useChartsLocalization();
+  const [message, setMessage] = React.useState(null);
+
+  // The announcement is written from the values of the render the request lands on, so a later
+  // zoom coming from elsewhere does not rewrite the live region.
+  const currentValuesRef = React.useRef({
+    zoomMap,
+    optionsLookup,
+    localeText
+  });
+  currentValuesRef.current = {
+    zoomMap,
+    optionsLookup,
+    localeText
+  };
+  React.useEffect(() => {
+    if (announcement === 0) {
+      setMessage(null);
+      return;
+    }
+    const current = currentValuesRef.current;
+    if (!current.zoomMap) {
+      return;
+    }
+    const descriptions = Object.values(current.optionsLookup).map(options => {
+      const zoomData = current.zoomMap.get(options.axisId);
+      if (!zoomData) {
+        return null;
+      }
+      return current.localeText.zoomRangeDescription({
+        axisDirection: options.axisDirection,
+        start: zoomData.start,
+        end: zoomData.end
+      });
+    }).filter(Boolean);
+    setMessage(descriptions.length === 0 ? null : descriptions.join(current.localeText.a11yConnector));
+  }, [announcement]);
+  return message;
+}

package/internals/domUtils.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,7 +7,6 @@ exports.batchMeasureStrings = batchMeasureStrings;
 exports.clearStringMeasurementCache = clearStringMeasurementCache;
 exports.getStringSize = void 0;
 exports.getStyleString = getStyleString;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 // DOM utils adapted from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
 
@@ -64,6 +62,17 @@ function getStyleString(style) {
   return result;
 }
 
+/**
+ * Applies a style to a measurement element.
+ * Uses the CSS Object Model (CSSOM) to comply with Content Security Policy (CSP).
+ * https://en.wikipedia.org/wiki/Content_Security_Policy
+ */
+function applyStyle(element, style) {
+  for (const styleKey of Object.keys(style)) {
+    element.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
+  }
+}
+
 /**
  *
  * @param text The string to estimate
@@ -87,13 +96,7 @@ const getStringSize = (text, style = {}) => {
   try {
     const measurementSpanContainer = getMeasurementContainer();
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-
-    // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
-    // https://en.wikipedia.org/wiki/Content_Security_Policy
-    Object.keys(style).map(styleKey => {
-      measurementElem.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
-      return styleKey;
-    });
+    applyStyle(measurementElem, style);
     measurementElem.textContent = str;
     measurementSpanContainer.replaceChildren(measurementElem);
     const result = measureSVGTextElement(measurementElem);
@@ -134,16 +137,14 @@ function batchMeasureStrings(texts, style = {}) {
     }
   }
   const measurementContainer = getMeasurementContainer();
-  // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
-  // https://en.wikipedia.org/wiki/Content_Security_Policy
-  const measurementSpanStyle = (0, _extends2.default)({}, style);
-  Object.keys(measurementSpanStyle).map(styleKey => {
-    measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
-    return styleKey;
-  });
+
+  // The style goes on each text element rather than on the shared container. Styling the container
+  // leaks into every later measurement, because a call that omits one of those properties keeps the
+  // previous call's value and measures the wrong font.
   const measurementElements = [];
   for (const string of textToMeasure) {
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    applyStyle(measurementElem, style);
     measurementElem.textContent = `${string}`;
     measurementElements.push(measurementElem);
   }

package/internals/domUtils.mjs

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 // DOM utils adapted from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
 
@@ -54,6 +53,17 @@ export function getStyleString(style) {
   return result;
 }
 
+/**
+ * Applies a style to a measurement element.
+ * Uses the CSS Object Model (CSSOM) to comply with Content Security Policy (CSP).
+ * https://en.wikipedia.org/wiki/Content_Security_Policy
+ */
+function applyStyle(element, style) {
+  for (const styleKey of Object.keys(style)) {
+    element.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
+  }
+}
+
 /**
  *
  * @param text The string to estimate
@@ -77,13 +87,7 @@ export const getStringSize = (text, style = {}) => {
   try {
     const measurementSpanContainer = getMeasurementContainer();
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-
-    // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
-    // https://en.wikipedia.org/wiki/Content_Security_Policy
-    Object.keys(style).map(styleKey => {
-      measurementElem.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
-      return styleKey;
-    });
+    applyStyle(measurementElem, style);
     measurementElem.textContent = str;
     measurementSpanContainer.replaceChildren(measurementElem);
     const result = measureSVGTextElement(measurementElem);
@@ -123,16 +127,14 @@ export function batchMeasureStrings(texts, style = {}) {
     }
   }
   const measurementContainer = getMeasurementContainer();
-  // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
-  // https://en.wikipedia.org/wiki/Content_Security_Policy
-  const measurementSpanStyle = _extends({}, style);
-  Object.keys(measurementSpanStyle).map(styleKey => {
-    measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
-    return styleKey;
-  });
+
+  // The style goes on each text element rather than on the shared container. Styling the container
+  // leaks into every later measurement, because a call that omits one of those properties keeps the
+  // previous call's value and measures the wrong font.
   const measurementElements = [];
   for (const string of textToMeasure) {
     const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    applyStyle(measurementElem, style);
     measurementElem.textContent = `${string}`;
     measurementElements.push(measurementElem);
   }

package/internals/ellipsize.d.mts

@@ -1,3 +1,4 @@
+import type { ChartsTextAnchor, ChartsTextBaseline } from "./getWordsByLines.mjs";
 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.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/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;