@mui/x-charts 9.12.0 → 9.13.0

package/BarChart/BarChart.js

@@ -275,7 +275,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes /* remove-proptypes *
   /**
    * 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/BarChart/BarChart.mjs

@@ -268,7 +268,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes /* remove-proptypes *
   /**
    * 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/CHANGELOG.md

@@ -1,5 +1,157 @@
 # Changelog
 
+## 9.13.0
+
+<!-- generated comparing v9.12.0..master -->
+
+_Sep 4, 2026_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦮 Improve keyboard navigation features of the Charts.
+- 🎨 Improved customization of the edit event dialog in the `EventCalendar`
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @jvskriubakken, @mustafajw07, @roychan1
+
+The following team members contributed to this release:
+@brijeshb42, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @noraleonte, @rita-codes, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.13.0`
+
+- [DataGrid] Call `onValueChange` after `setEditCellValue` in edit cells (#23417) @michelengelen
+- [DataGrid] Add support for replacing rows instead of merging updates (#23323) @jvskriubakken
+- [DataGrid] Always render `rowHeader` in virtualized setups (#23386) @silviuaavram
+- [DataGrid] Export `ToolbarRoot` (#23322) @JCQuintas
+- [DataGrid] Fix `rowsPerPage` selector appearing when `autoPageSize` is enabled and `pageSize` is one of `pageSizeOptions` (#23401) @roychan1
+- [DataGrid] Fix row tree reset when a data source grid becomes visible (#23288) @JCQuintas
+
+#### `@mui/x-data-grid-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.13.0`, plus:
+
+- [DataGridPro] Remove rows deleted server-side on nested lazy loading revalidation (#23320) @JCQuintas
+- [DataGridPro] Stop `disableDebounce` from reaching the DOM in multi select filter (#23445) @JCQuintas
+
+#### `@mui/x-data-grid-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.13.0`, plus:
+
+- [DataGridPremium] Refine cell selection and speed up clipboard copy (#23473) @michelengelen
+- [DataGridPremium] Select all cells with Ctrl+A (#23415) @michelengelen
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.13.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.13.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.13.0`
+
+- [charts] Activate the focused axis with Enter/Space (#23219) @JCQuintas
+- [charts] Add keyboard zoom and pan (#23369) @JCQuintas
+- [charts] Fix line mark position under browser zoom in Safari (#23387) @noraleonte
+- [charts] Fix y axis tick labels shortened near the top of the chart (#23435) @JCQuintas
+- [charts] Focus the clicked item on radar charts (#23287) @JCQuintas
+- [charts] Stop text measurements leaking into each other (#23430) @JCQuintas
+
+#### `@mui/x-charts-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.13.0`.
+
+#### `@mui/x-charts-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.13.0`
+
+- [tree view] Add `loading` prop and customizable loading UI (#22251) @michelengelen
+- [tree view] Reduce selector bundle size (#23412) @flaviendelangle
+- [tree view] Remove dead UI from community component (#23487) @noraleonte
+- [tree view] Remove unused dependencies (#23488) @noraleonte
+- [tree view] Use `useId` for the default tree id (#23341) @Anexus5919
+
+#### `@mui/x-tree-view-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.13.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.11`
+
+- [scheduler] Absorb un-acted `ResizeObserver` deliveries after rendering the timeline (#23444) @rita-codes
+- [scheduler] Add `EventContextMenu` with Edit and Delete actions (#23379) @mustafajw07
+- [scheduler] Add aria-hidden to collapsed side panel and refactor landmark structure (#23425) @mustafajw07
+- [scheduler] Add the `eventDialogGeneralTab` slot (#23338) @rita-codes
+- [scheduler] Fix the un-awaited act warning in the event dialog slot test (#23446) @JCQuintas
+- [scheduler] Improve timeline event layout performance (#23364) @flaviendelangle
+- [scheduler] Keep `aria-expanded` present when ViewSwitcher and PreferencesMenu menus are closed (#23427) @mustafajw07
+- [scheduler] Make the event dialog General-tab building blocks public (#23398) @rita-codes
+- [scheduler] Migrate to the pragmatic-drag-and-drop v3 entry points (#23442) @rita-codes
+- [scheduler] Reduce selector bundle size (#23413) @flaviendelangle
+- [scheduler] Reuse processed events between updates (#23363) @flaviendelangle
+- [scheduler] Add `aria-expanded` and `aria-controls` to side panel toggle button (#23402) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.11`, plus:
+
+- [scheduler-premium] Dependencies - Keep event drags working over the arrow hit-areas (#23441) @rita-codes
+- [scheduler-premium] Dependencies - Reject dependencies that would create a cycle (#23389) @rita-codes
+- [scheduler-premium] Key recurring `exDates` on their data-timezone day (#23467) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.13.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add synchronized tooltip and crosshair demo to charts (#23368) @JCQuintas
+- [docs] Add sticky headers recipe to `RichTreeView` customization (#22908) @michelengelen
+- [docs] Pin the visible date of the scheduler preferences demos (#23432) @rita-codes
+- [docs] Star-prefix bare :where() dark-mode selectors (#23419) @Janpot
+- [docs] Consolidate demo data into shared dataset files (#23496) @michelengelen
+
+### Core
+
+- [code-infra] Consume shared commands from code-infra orb (#23485) @brijeshb42
+- [code-infra] Move the shared spy helpers off Sinon (#23466) @JCQuintas
+- [code-infra] Point the support validator link at frontend-public (#23422) @Janpot
+- [code-infra] Reduce per-page memory in the browser test suite (#23424) @Janpot
+- [code-infra] Remove Sinon (#23476) @JCQuintas
+- [code-infra] Remove the explicit `styled-components` dependency (#23479) @LukasTy
+- [code-infra] Replace the mechanical sinon `spy()` usages with `vi.fn()` (#23443) @JCQuintas
+- [code-infra] Replace the sinon `spy(fn)` usages with `vi.fn(fn)` (#23460) @JCQuintas
+- [code-infra] Replace the sinon spy types with the Vitest ones (#23464) @JCQuintas
+- [code-infra] Replace the sinon spy-on-object calls with `vi.spyOn` (#23474) @JCQuintas
+- [code-infra] Replace the sinon stubs with Vitest mocks (#23472) @JCQuintas
+- [code-infra] Run TypeScript 7 alongside the TS6 JS API (#23471) @brijeshb42
+- [code-infra] Trim the shared browser test setup graph (#23426) @LukasTy
+- [code-infra] Update CircleCI orb (#23418) @JCQuintas
+- [code-infra] Use explicit vitest imports in test files (#23375) @michelengelen
+
+### Miscellaneous
+
+- [chat] Enforce top-level type imports (#23037) @Janpot
+- [chat] Fix global preload error from the `remend` import (#23263) @hasdfa
+- [ci] Add Claude PR review via mui-public reusable workflow (#23423) @Janpot
+- [telemetry] Fix get-context test leaking mock from sender test (#23447) @JCQuintas
+- [test] Fail the regression run when a webfont does not load (#23376) @LukasTy
+
 ## 9.12.0
 
 _Aug 21, 2026_

package/ChartsContainer/ChartsContainer.js

@@ -231,7 +231,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes /* remove-prop
   /**
    * 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/ChartsContainer/ChartsContainer.mjs

@@ -224,7 +224,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes /* remove-prop
   /**
    * 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/ChartsXAxis/useAxisTicksProps.js

@@ -16,6 +16,7 @@ var _useAxis = require("../hooks/useAxis");
 var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
 var _invertTextAnchor = require("../internals/invertTextAnchor");
 var _utilities = require("./utilities");
+var _constants = require("../constants");
 const _excluded = ["scale", "tickNumber", "reverse"];
 function useAxisTicksProps(inProps) {
   const {
@@ -57,7 +58,7 @@ function useAxisTicksProps(inProps) {
     // @ts-expect-error `useSlotProps` applies `WithCommonProps` with adds a `style: React.CSSProperties` prop automatically.
     additionalProps: {
       style: (0, _extends2.default)({}, theme.typography.caption, {
-        fontSize: 12,
+        fontSize: _constants.DEFAULT_TICK_LABEL_FONT_SIZE,
         lineHeight: 1.25,
         textAnchor: isRtl ? (0, _invertTextAnchor.invertTextAnchor)(defaultTextAnchor) : defaultTextAnchor,
         dominantBaseline: defaultDominantBaseline

package/ChartsXAxis/useAxisTicksProps.mjs

@@ -11,6 +11,7 @@ import { useXAxes } from "../hooks/useAxis.mjs";
 import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.mjs";
 import { invertTextAnchor } from "../internals/invertTextAnchor.mjs";
 import { defaultProps, useUtilityClasses } from "./utilities.mjs";
+import { DEFAULT_TICK_LABEL_FONT_SIZE } from "../constants/index.mjs";
 export function useAxisTicksProps(inProps) {
   const {
     xAxis,
@@ -51,7 +52,7 @@ export function useAxisTicksProps(inProps) {
     // @ts-expect-error `useSlotProps` applies `WithCommonProps` with adds a `style: React.CSSProperties` prop automatically.
     additionalProps: {
       style: _extends({}, theme.typography.caption, {
-        fontSize: 12,
+        fontSize: DEFAULT_TICK_LABEL_FONT_SIZE,
         lineHeight: 1.25,
         textAnchor: isRtl ? invertTextAnchor(defaultTextAnchor) : defaultTextAnchor,
         dominantBaseline: defaultDominantBaseline

package/ChartsYAxis/shortenLabels.js

@@ -11,34 +11,24 @@ var _domUtils = require("../internals/domUtils");
 function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
   const shortenedLabels = new Map();
   const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
-  let topBoundFactor = 1;
-  let bottomBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    topBoundFactor = Infinity;
-    bottomBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    topBoundFactor = 1;
-    bottomBoundFactor = Infinity;
-  } else {
-    topBoundFactor = 2;
-    bottomBoundFactor = 2;
-  }
-  if (angle > 180) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  if (isRtl) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
+  const boundsConfig = {
+    angle,
+    textAnchor: tickLabelStyle?.textAnchor,
+    dominantBaseline: tickLabelStyle?.dominantBaseline,
+    isRtl
+  };
+  const svgHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
   for (const item of visibleLabels) {
     if (item.formattedValue) {
-      // That maximum height of the tick depends on its proximity to the axis bounds.
-      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
-      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
-        width: maxWidth,
-        height,
-        angle,
-        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
-      });
+      // The label is anchored on the tick, so how far it can extend vertically depends on the
+      // proximity of the tick to the SVG bounds.
+      const anchor = item.offset + item.labelOffset;
+      const spaceAbove = anchor;
+      const spaceBelow = svgHeight - anchor;
+      const doesTextFit = text => {
+        const bounds = (0, _ellipsize.getRotatedTextBounds)((0, _domUtils.getStringSize)(text, tickLabelStyle), boundsConfig);
+        return bounds.width <= maxWidth && bounds.above <= spaceAbove && bounds.below <= spaceBelow;
+      };
       shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
     }
   }

package/ChartsYAxis/shortenLabels.mjs

@@ -1,39 +1,29 @@
 'use client';
 
 import { clampAngle } from "../internals/clampAngle.mjs";
-import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.mjs";
+import { ellipsize, getRotatedTextBounds } from "../internals/ellipsize.mjs";
 import { getStringSize } from "../internals/domUtils.mjs";
 export function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
   const shortenedLabels = new Map();
   const angle = clampAngle(tickLabelStyle?.angle ?? 0);
-  let topBoundFactor = 1;
-  let bottomBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    topBoundFactor = Infinity;
-    bottomBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    topBoundFactor = 1;
-    bottomBoundFactor = Infinity;
-  } else {
-    topBoundFactor = 2;
-    bottomBoundFactor = 2;
-  }
-  if (angle > 180) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  if (isRtl) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
+  const boundsConfig = {
+    angle,
+    textAnchor: tickLabelStyle?.textAnchor,
+    dominantBaseline: tickLabelStyle?.dominantBaseline,
+    isRtl
+  };
+  const svgHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
   for (const item of visibleLabels) {
     if (item.formattedValue) {
-      // That maximum height of the tick depends on its proximity to the axis bounds.
-      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
-      const doesTextFit = text => doesTextFitInRect(text, {
-        width: maxWidth,
-        height,
-        angle,
-        measureText: string => getStringSize(string, tickLabelStyle)
-      });
+      // The label is anchored on the tick, so how far it can extend vertically depends on the
+      // proximity of the tick to the SVG bounds.
+      const anchor = item.offset + item.labelOffset;
+      const spaceAbove = anchor;
+      const spaceBelow = svgHeight - anchor;
+      const doesTextFit = text => {
+        const bounds = getRotatedTextBounds(getStringSize(text, tickLabelStyle), boundsConfig);
+        return bounds.width <= maxWidth && bounds.above <= spaceAbove && bounds.below <= spaceBelow;
+      };
       shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
     }
   }

package/ChartsYAxis/useAxisTicksProps.js

@@ -16,6 +16,7 @@ var _useAxis = require("../hooks/useAxis");
 var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
 var _invertTextAnchor = require("../internals/invertTextAnchor");
 var _utilities = require("./utilities");
+var _constants = require("../constants");
 const _excluded = ["scale", "tickNumber", "reverse"];
 function useAxisTicksProps(inProps) {
   const {
@@ -45,7 +46,7 @@ function useAxisTicksProps(inProps) {
   const isRtl = (0, _RtlProvider.useRtl)();
   const classes = (0, _utilities.useUtilityClasses)(defaultizedProps);
   const positionSign = position === 'right' ? 1 : -1;
-  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : _constants.DEFAULT_TICK_LABEL_FONT_SIZE;
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
   const defaultTextAnchor = (0, _defaultTextPlacement.getDefaultTextAnchor)((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));

package/ChartsYAxis/useAxisTicksProps.mjs

@@ -11,6 +11,7 @@ import { useYAxes } from "../hooks/useAxis.mjs";
 import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.mjs";
 import { invertTextAnchor } from "../internals/invertTextAnchor.mjs";
 import { defaultProps, useUtilityClasses } from "./utilities.mjs";
+import { DEFAULT_TICK_LABEL_FONT_SIZE } from "../constants/index.mjs";
 export function useAxisTicksProps(inProps) {
   const {
     yAxis,
@@ -39,7 +40,7 @@ export function useAxisTicksProps(inProps) {
   const isRtl = useRtl();
   const classes = useUtilityClasses(defaultizedProps);
   const positionSign = position === 'right' ? 1 : -1;
-  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : DEFAULT_TICK_LABEL_FONT_SIZE;
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const defaultTextAnchor = getDefaultTextAnchor((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));

package/LineChart/LineChart.js

@@ -282,7 +282,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
   /**
    * 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/LineChart/LineChart.mjs

@@ -275,7 +275,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
   /**
    * 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/LineChart/MarkElement.js

@@ -18,6 +18,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useChartExperimentalFeature = require("../internals/plugins/corePlugins/useChartExperimentalFeature");
 var _useStore = require("../internals/store/useStore");
 var _getSymbol = require("../internals/getSymbol");
+var _useAnimateMark = require("../hooks/animation/useAnimateMark");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "seriesId", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
@@ -30,7 +31,8 @@ const MarkElementPath = (0, _styles.styled)('path', {
   fill: (theme.vars || theme).palette.background.paper,
   [`&.${_lineClasses.lineClasses.markAnimate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'transform, transform-origin, opacity',
+    // The position is animated in JS by `useAnimateMark`: Safari cannot transition the `transform` attribute.
+    transitionProperty: 'opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 }));
@@ -79,11 +81,16 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
-    style: (0, _extends2.default)({}, style, {
-      transform: `translate(${x}px, ${y}px)`,
-      transformOrigin: `${x}px ${y}px`
-    }),
+
+  // Positions the mark with the `transform` attribute, in `viewBox` units. A CSS `px` transform lands in the wrong
+  // place in Safari under browser zoom, see https://github.com/mui/mui-x/issues/23377
+  const animatedProps = (0, _useAnimateMark.useAnimateMark)({
+    x: Number(x),
+    y: Number(y),
+    skipAnimation
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, animatedProps, {
+    style: style,
     ownerState: ownerState,
     className: classes.mark,
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),

package/LineChart/MarkElement.mjs

@@ -12,6 +12,7 @@ import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
 import { selectorChartExperimentalFeaturesState } from "../internals/plugins/corePlugins/useChartExperimentalFeature/index.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { getSymbol } from "../internals/getSymbol.mjs";
+import { useAnimateMark } from "../hooks/animation/useAnimateMark.mjs";
 import { lineClasses, useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
@@ -23,7 +24,8 @@ const MarkElementPath = styled('path', {
   fill: (theme.vars || theme).palette.background.paper,
   [`&.${lineClasses.markAnimate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'transform, transform-origin, opacity',
+    // The position is animated in JS by `useAnimateMark`: Safari cannot transition the `transform` attribute.
+    transitionProperty: 'opacity',
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
   }
 }));
@@ -72,11 +74,16 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
-    style: _extends({}, style, {
-      transform: `translate(${x}px, ${y}px)`,
-      transformOrigin: `${x}px ${y}px`
-    }),
+
+  // Positions the mark with the `transform` attribute, in `viewBox` units. A CSS `px` transform lands in the wrong
+  // place in Safari under browser zoom, see https://github.com/mui/mui-x/issues/23377
+  const animatedProps = useAnimateMark({
+    x: Number(x),
+    y: Number(y),
+    skipAnimation
+  });
+  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, animatedProps, {
+    style: style,
     ownerState: ownerState,
     className: classes.mark,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),

package/RadarChart/RadarAxis/RadarAxis.utils.d.mts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
+  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
-  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
+  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
-  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarChart.js

@@ -231,7 +231,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   /**
    * 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/RadarChart/RadarChart.mjs

@@ -224,7 +224,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   /**
    * 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/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
+var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRegisterRadarItemActivation = require("./useRegisterRadarItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick", "classes"];
@@ -54,6 +55,9 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
   const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
+  // Clickable marks cover the area, so they report the series the same way it does. The index
+  // still comes from the rotation axis, which is why the identifier stays series-level.
+  const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   (0, _useRegisterRadarItemActivation.useRegisterRadarItemActivation)(seriesId, onItemClick, _useRegisterRadarItemActivation.RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -62,7 +66,7 @@ function RadarSeriesMarks(props) {
       hideMark,
       fillArea,
       hidden
-    }) => {
+    }, seriesIndex) => {
       if (hideMark || hidden) {
         return null;
       }
@@ -83,7 +87,7 @@ function RadarSeriesMarks(props) {
             dataIndex: index
           }),
           cursor: onItemClick ? 'pointer' : 'unset'
-        }, other), index))
+        }, interactionProps[seriesIndex], other), index))
       }, id);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
+import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
 import { RADAR_ACTIVATION_PRIORITY, useRegisterRadarItemActivation } from "./useRegisterRadarItemActivation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCircleProps(params) {
@@ -45,6 +46,9 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
   const classes = useUtilityClasses(inClasses);
   const getHighlightState = useItemHighlightStateGetter();
+  // Clickable marks cover the area, so they report the series the same way it does. The index
+  // still comes from the rotation axis, which is why the identifier stays series-level.
+  const interactionProps = useInteractionAllItemProps(seriesCoordinates);
   useRegisterRadarItemActivation(seriesId, onItemClick, RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -53,7 +57,7 @@ function RadarSeriesMarks(props) {
       hideMark,
       fillArea,
       hidden
-    }) => {
+    }, seriesIndex) => {
       if (hideMark || hidden) {
         return null;
       }
@@ -74,7 +78,7 @@ function RadarSeriesMarks(props) {
             dataIndex: index
           }),
           cursor: onItemClick ? 'pointer' : 'unset'
-        }, other), index))
+        }, interactionProps[seriesIndex], other), index))
       }, id);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -66,13 +66,14 @@ function RadarSeriesPlot(props) {
           getHighlightState,
           classes
         }), {
+          pointerEvents: onMarkClick ? undefined : 'none',
           onClick: event => onMarkClick?.(event, {
             type: 'radar',
             seriesId,
             dataIndex: index
           }),
           cursor: onMarkClick ? 'pointer' : 'unset'
-        }), index))]
+        }, interactionProps[seriesIndex]), index))]
       }, seriesId);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.mjs

@@ -59,13 +59,14 @@ function RadarSeriesPlot(props) {
           getHighlightState,
           classes
         }), {
+          pointerEvents: onMarkClick ? undefined : 'none',
           onClick: event => onMarkClick?.(event, {
             type: 'radar',
             seriesId,
             dataIndex: index
           }),
           cursor: onMarkClick ? 'pointer' : 'unset'
-        }), index))]
+        }, interactionProps[seriesIndex]), index))]
       }, seriesId);
     })
   });