@mui/x-charts 9.12.0 → 9.13.0

package/ScatterChart/ScatterChart.js

@@ -280,7 +280,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
   /**
    * 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: _propTypes.default.func,

package/ScatterChart/ScatterChart.mjs

@@ -273,7 +273,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
   /**
    * 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: PropTypes.func,

package/SparkLineChart/SparkLineChart.js

@@ -460,7 +460,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * 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: _propTypes.default.func,

package/SparkLineChart/SparkLineChart.mjs

@@ -453,7 +453,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * 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: PropTypes.func,

package/constants/index.d.mts

@@ -10,4 +10,6 @@ export declare const DEFAULT_MARGINS: {
 };
 export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export declare const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.d.ts

@@ -10,4 +10,6 @@ export declare const DEFAULT_MARGINS: {
 };
 export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export declare const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_RADIUS_AXIS_KEY = exports.DEFAULT_MARGINS = exports.DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = void 0;
+exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_TICK_LABEL_FONT_SIZE = exports.DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_RADIUS_AXIS_KEY = exports.DEFAULT_MARGINS = exports.DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = void 0;
 const DEFAULT_X_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 const DEFAULT_Y_AXIS_KEY = exports.DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 const DEFAULT_ROTATION_AXIS_KEY = exports.DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
@@ -16,4 +16,7 @@ const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
 };
 const DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_WIDTH = 45;
 const DEFAULT_AXIS_SIZE_HEIGHT = exports.DEFAULT_AXIS_SIZE_HEIGHT = 25;
-const AXIS_LABEL_DEFAULT_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = 20;
+const AXIS_LABEL_DEFAULT_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = 20;
+
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+const DEFAULT_TICK_LABEL_FONT_SIZE = exports.DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/constants/index.mjs

@@ -10,4 +10,7 @@ export const DEFAULT_MARGINS = {
 };
 export const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export const DEFAULT_TICK_LABEL_FONT_SIZE = 12;

package/hooks/animation/index.d.mts

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.mjs";
 export * from "./useAnimateBar.mjs";
 export * from "./useAnimateBarLabel.mjs";
 export * from "./useAnimateLine.mjs";
+export * from "./useAnimateMark.mjs";
 export * from "./useAnimatePieArc.mjs";
 export * from "./useAnimatePieArcLabel.mjs";

package/hooks/animation/index.d.ts

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.js";
 export * from "./useAnimateBar.js";
 export * from "./useAnimateBarLabel.js";
 export * from "./useAnimateLine.js";
+export * from "./useAnimateMark.js";
 export * from "./useAnimatePieArc.js";
 export * from "./useAnimatePieArcLabel.js";

package/hooks/animation/index.js

@@ -58,6 +58,17 @@ Object.keys(_useAnimateLine).forEach(function (key) {
     }
   });
 });
+var _useAnimateMark = require("./useAnimateMark");
+Object.keys(_useAnimateMark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimateMark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimateMark[key];
+    }
+  });
+});
 var _useAnimatePieArc = require("./useAnimatePieArc");
 Object.keys(_useAnimatePieArc).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/animation/index.mjs

@@ -3,5 +3,6 @@ export * from "./useAnimateArea.mjs";
 export * from "./useAnimateBar.mjs";
 export * from "./useAnimateBarLabel.mjs";
 export * from "./useAnimateLine.mjs";
+export * from "./useAnimateMark.mjs";
 export * from "./useAnimatePieArc.mjs";
 export * from "./useAnimatePieArcLabel.mjs";

package/hooks/animation/useAnimateMark.d.mts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+type UseAnimateMarkParams = {
+  x: number;
+  y: number;
+  skipAnimation?: boolean;
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimateMarkReturn = {
+  ref: React.Ref<SVGPathElement>;
+  transform: string;
+};
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateMark(props: UseAnimateMarkParams): UseAnimateMarkReturn;
+export {};

package/hooks/animation/useAnimateMark.d.ts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+type UseAnimateMarkParams = {
+  x: number;
+  y: number;
+  skipAnimation?: boolean;
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimateMarkReturn = {
+  ref: React.Ref<SVGPathElement>;
+  transform: string;
+};
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateMark(props: UseAnimateMarkParams): UseAnimateMarkReturn;
+export {};

package/hooks/animation/useAnimateMark.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateMark = useAnimateMark;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./useAnimate");
+function markPropsInterpolator(from, to) {
+  const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
+  const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t)
+  });
+}
+
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+function useAnimateMark(props) {
+  return (0, _useAnimate.useAnimate)({
+    x: props.x,
+    y: props.y
+  }, {
+    createInterpolator: markPropsInterpolator,
+    transformProps: p => ({
+      transform: `translate(${p.x} ${p.y})`
+    }),
+    applyProps(element, animatedProps) {
+      element.setAttribute('transform', animatedProps.transform);
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/animation/useAnimateMark.mjs

@@ -0,0 +1,39 @@
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.mjs";
+function markPropsInterpolator(from, to) {
+  const interpolateX = interpolateNumber(from.x, to.x);
+  const interpolateY = interpolateNumber(from.y, to.y);
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t)
+  });
+}
+
+/**
+ * Animates the position of a line chart mark.
+ *
+ * The mark is placed with the SVG `transform` attribute, in `viewBox` units, because Safari resolves CSS pixel
+ * transforms of SVG children against the viewport instead of the scaled `viewBox`, which moves the mark away from the
+ * line under browser zoom. See https://github.com/mui/mui-x/issues/23377.
+ *
+ * Safari cannot transition the `transform` attribute with CSS, so the animation runs in JavaScript.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateMark(props) {
+  return useAnimate({
+    x: props.x,
+    y: props.y
+  }, {
+    createInterpolator: markPropsInterpolator,
+    transformProps: p => ({
+      transform: `translate(${p.x} ${p.y})`
+    }),
+    applyProps(element, animatedProps) {
+      element.setAttribute('transform', animatedProps.transform);
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.12.0
+ * @mui/x-charts v9.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.12.0
+ * @mui/x-charts v9.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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";