@mui/x-charts 9.0.4 → 9.1.0

package/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -51,6 +51,8 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Bar series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/BarChart/seriesConfig/bar/seriesProcessor.mjs

@@ -44,6 +44,8 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Bar series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/CHANGELOG.md

@@ -1,5 +1,138 @@
 # Changelog
 
+## 9.1.0
+
+_May 8, 2026_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Add a WebGL renderer to the [Scatter chart](https://mui.com/x/react-charts/scatter/#webgl-renderer), and apply the same WebGL performance patterns to the candlestick and heatmap [Premium]
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @gaetanodanelli, @imazizbohra, @mustafajw07
+
+The following team members contributed to this release:
+@alexfauquette, @brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @mapache-salvaje, @MBilalShafi, @michelengelen, @oliviertassinari, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.1.0`
+
+- [DataGrid] Fix accessibility violation in detail panel toggle column header (#22178) @michelengelen
+- [DataGrid] Fix active filter detection for array values (#22340) @MBilalShafi
+- [DataGrid] Fix crash when grouping/tree-data values match `Object.prototype` property names (#22312) @LukasTy
+- [DataGrid] Position overlays below top pinned rows (#22341) @MBilalShafi
+- [l10n] Improve Italian (it-IT) locale (#22290) @gaetanodanelli
+
+#### `@mui/x-data-grid-pro@9.1.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.1.0`, plus:
+
+- [DataGridPro] Fix column unpin restoring stale position after reorder (#22250) @michelengelen
+
+#### `@mui/x-data-grid-premium@9.1.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.1.0`, plus:
+
+- [DataGridPremium] Fix aggregation column header title truncation without ellipsis (#22248) @michelengelen
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.1.0`
+
+- [pickers] Fix duplicate hour label in `MultiSectionDigitalClock` on DST day (#22110) @LukasTy
+- [l10n] Improve Italian (it-IT) locale (#22290) @gaetanodanelli
+
+#### `@mui/x-date-pickers-pro@9.1.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.1.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.1.0`
+
+- [charts] Add `ChartsAxisHighlightValue` component (#21803) @Copilot
+- [charts] Create `ChartsRadialAxisHighlight` (#22241) @alexfauquette
+- [charts] Remove useless extends (#22313) @alexfauquette
+- [charts] Use `PolarAxisConfig` in polar plugin internals (#22315) @alexfauquette
+
+#### `@mui/x-charts-pro@9.1.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.1.0`.
+
+#### `@mui/x-charts-premium@9.1.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.1.0`, plus:
+
+- [charts-premium] Add WebGL renderer to `ScatterChartPremium` (#22157) @JCQuintas
+- [charts-premium] Add highlight to the `RadialLineChart` (#22156) @alexfauquette
+- [charts-premium] Apply WebGL perf patterns to candlestick + heatmap (#22223) @JCQuintas
+- [charts-premium] Introduce the `RadialBarChart` (#22268) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@9.1.0`
+
+- [tree view] Fix stale Tree View `apiRef` after keyed remount (#22342) @MBilalShafi
+
+#### `@mui/x-tree-view-pro@9.1.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.1.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-alpha.5`
+
+- [scheduler] Make `EventItem` interactive by integrating button props for keyboard accessibility (#22160) @mustafajw07
+- [scheduler] Migrate color switch to Base UI `ToggleGroup` (#22254) @flaviendelangle
+- [scheduler] Rename Scheduler headless packages (#22273) @rita-codes
+- [scheduler] Use TreeView for the resource sidebar (#22261) @flaviendelangle
+- [scheduler] Use fieldset/legend instead of headings for form sections in the event dialog (#22095) @Anexus5919
+- [scheduler] Added `position: relative` for consistent layout (#22284) @mustafajw07
+- [l10n] Improve Italian (it-IT) locale (#22290) @gaetanodanelli
+
+#### `@mui/x-scheduler-premium@9.0.0-alpha.5` [![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-alpha.5`, plus:
+
+- [scheduler] Replace per-view headers with a generic `EventTimelinePremiumHeader` in the `EventTimeline` (#22222) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.1.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Migrate `FlightPicker` overview demo to v9 `slotProps` shape (#22272) @LukasTy
+- [docs] Standardize Scheduler docs style and formatting (#22161) @mapache-salvaje
+- [docs] Add feedback form to the scheduler docs (#22237) @rita-codes
+- [docs] Fix `GridToolbarCustom` demo crash in DataGrid (#21950) @MBilalShafi
+- [docs] Do not resolve axes in charts (#22307) @alexfauquette
+- [docs] Fix no longer valid link (#22371) @LukasTy
+- [docs] Replace broken CodeSandbox iframes in migration guides (#22352) @LukasTy
+
+### Core
+
+- [code-infra] Bump browser `testTimeout` to absorb React 19 slowness (#22236) @LukasTy
+- [code-infra] Use vale rules from code-infra package (#22256) @brijeshb42
+- [code-infra] Fix broken valelint and docs build (#22362) @LukasTy
+- [internal] Prepare renaming LICENSE file to LICENSE.md (#22055) @imazizbohra
+- [internal] Remove outdated .woff files (#22286) @oliviertassinari
+- [internal] Replace Codspeed with `@mui/internal-benchmark` for charts (#22243) @JCQuintas
+
+### Miscellaneous
+
+- [internal-gestures] Add passive option to `TurnWheelGesture` (#22349) @JCQuintas
+- [internal-gestures] Enforce pointer-type filter in `ShadowRoot` branch (#22327) @JCQuintas
+- [internal-gestures] Improve passive event listener handling (#22329) @JCQuintas
+- [internal-gestures] Inline wheel-delta clamp per axis (#22331) @JCQuintas
+- [internal-gestures] Return read-only pointer map without copy (#22330) @JCQuintas
+- [internal-gestures] Track multi-tap reset timeout to prevent leak (#22326) @JCQuintas
+
 ## 9.0.4
 
 _Apr 28, 2026_

package/ChartsAxisHighlightValue/ChartsAxisHighlightValue.d.mts

@@ -0,0 +1,55 @@
+import { type SxProps } from '@mui/material/styles';
+import { type AxisId } from "../models/axis.mjs";
+export type ChartsAxisHighlightValuePosition = 'start' | 'end' | 'both' | 'none';
+export interface ChartsAxisHighlightValueProps {
+  /**
+   * The axis direction.
+   */
+  axisDirection: 'x' | 'y';
+  /**
+   * The id of the axis.
+   * If not provided, defaults to the first axis.
+   */
+  axisId?: AxisId;
+  /**
+   * The position of the label relative to the drawing area.
+   * - `'start'`: at the beginning of the drawing area (top for x-axis, left for y-axis).
+   * - `'end'`: at the end of the drawing area (bottom for x-axis, right for y-axis).
+   * - `'both'`: at both positions.
+   * - `'none'`: no label is displayed.
+   * @default 'end'
+   */
+  labelPosition?: ChartsAxisHighlightValuePosition;
+  /**
+   * The value to display.
+   * If not defined, tracks the axis highlight value from user interaction.
+   */
+  value?: number | Date | string | null;
+  /**
+   * A function to format the displayed value.
+   * If not provided, uses the axis `valueFormatter`, or falls back to a default formatter.
+   * @param {number | Date | string} value The value to format.
+   * @returns {string} The formatted string.
+   */
+  valueFormatter?: (value: number | Date | string) => string;
+  sx?: SxProps;
+}
+/**
+ * A component that displays the axis value at the edge of the drawing area,
+ * aligned with the current axis highlight position.
+ *
+ * Renders as a portal into the ChartsLayerContainer, appearing as the last child.
+ *
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
+ */
+declare function ChartsAxisHighlightValue(props: ChartsAxisHighlightValueProps): import("react").ReactPortal | import("react/jsx-runtime").JSX.Element[] | null;
+declare namespace ChartsAxisHighlightValue {
+  var propTypes: any;
+}
+export { ChartsAxisHighlightValue };

package/ChartsAxisHighlightValue/ChartsAxisHighlightValue.d.ts

@@ -0,0 +1,55 @@
+import { type SxProps } from '@mui/material/styles';
+import { type AxisId } from "../models/axis.js";
+export type ChartsAxisHighlightValuePosition = 'start' | 'end' | 'both' | 'none';
+export interface ChartsAxisHighlightValueProps {
+  /**
+   * The axis direction.
+   */
+  axisDirection: 'x' | 'y';
+  /**
+   * The id of the axis.
+   * If not provided, defaults to the first axis.
+   */
+  axisId?: AxisId;
+  /**
+   * The position of the label relative to the drawing area.
+   * - `'start'`: at the beginning of the drawing area (top for x-axis, left for y-axis).
+   * - `'end'`: at the end of the drawing area (bottom for x-axis, right for y-axis).
+   * - `'both'`: at both positions.
+   * - `'none'`: no label is displayed.
+   * @default 'end'
+   */
+  labelPosition?: ChartsAxisHighlightValuePosition;
+  /**
+   * The value to display.
+   * If not defined, tracks the axis highlight value from user interaction.
+   */
+  value?: number | Date | string | null;
+  /**
+   * A function to format the displayed value.
+   * If not provided, uses the axis `valueFormatter`, or falls back to a default formatter.
+   * @param {number | Date | string} value The value to format.
+   * @returns {string} The formatted string.
+   */
+  valueFormatter?: (value: number | Date | string) => string;
+  sx?: SxProps;
+}
+/**
+ * A component that displays the axis value at the edge of the drawing area,
+ * aligned with the current axis highlight position.
+ *
+ * Renders as a portal into the ChartsLayerContainer, appearing as the last child.
+ *
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
+ */
+declare function ChartsAxisHighlightValue(props: ChartsAxisHighlightValueProps): import("react").ReactPortal | import("react/jsx-runtime").JSX.Element[] | null;
+declare namespace ChartsAxisHighlightValue {
+  var propTypes: any;
+}
+export { ChartsAxisHighlightValue };

package/ChartsAxisHighlightValue/ChartsAxisHighlightValue.js

@@ -0,0 +1,94 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxisHighlightValue = ChartsAxisHighlightValue;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useChartsLayerContainerRef = require("../hooks/useChartsLayerContainerRef");
+var _useAxisHighlightValue = require("./useAxisHighlightValue");
+var _ChartsAxisHighlightValueItem = require("./ChartsAxisHighlightValueItem");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A component that displays the axis value at the edge of the drawing area,
+ * aligned with the current axis highlight position.
+ *
+ * Renders as a portal into the ChartsLayerContainer, appearing as the last child.
+ *
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
+ */
+function ChartsAxisHighlightValue(props) {
+  const {
+    axisDirection,
+    axisId,
+    labelPosition,
+    value,
+    valueFormatter,
+    sx
+  } = props;
+  const chartsLayerContainerRef = (0, _useChartsLayerContainerRef.useChartsLayerContainerRef)();
+  const items = (0, _useAxisHighlightValue.useAxisHighlightValue)({
+    axisDirection,
+    axisId,
+    labelPosition,
+    value,
+    valueFormatter
+  });
+  if (items.length === 0) {
+    return null;
+  }
+  const content = items.map(itemProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightValueItem.ChartsAxisHighlightValueItem, (0, _extends2.default)({}, itemProps, {
+    sx: sx
+  })));
+  if (!chartsLayerContainerRef.current) {
+    return content;
+  }
+  return /*#__PURE__*/ReactDOM.createPortal(content, chartsLayerContainerRef.current);
+}
+ChartsAxisHighlightValue.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The axis direction.
+   */
+  axisDirection: _propTypes.default.oneOf(['x', 'y']).isRequired,
+  /**
+   * The id of the axis.
+   * If not provided, defaults to the first axis.
+   */
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The position of the label relative to the drawing area.
+   * - `'start'`: at the beginning of the drawing area (top for x-axis, left for y-axis).
+   * - `'end'`: at the end of the drawing area (bottom for x-axis, right for y-axis).
+   * - `'both'`: at both positions.
+   * - `'none'`: no label is displayed.
+   * @default 'end'
+   */
+  labelPosition: _propTypes.default.oneOf(['both', 'end', 'none', 'start']),
+  /**
+   * The value to display.
+   * If not defined, tracks the axis highlight value from user interaction.
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
+  /**
+   * A function to format the displayed value.
+   * If not provided, uses the axis `valueFormatter`, or falls back to a default formatter.
+   * @param {number | Date | string} value The value to format.
+   * @returns {string} The formatted string.
+   */
+  valueFormatter: _propTypes.default.func
+};

package/ChartsAxisHighlightValue/ChartsAxisHighlightValue.mjs

@@ -0,0 +1,88 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { useChartsLayerContainerRef } from "../hooks/useChartsLayerContainerRef.mjs";
+import { useAxisHighlightValue } from "./useAxisHighlightValue.mjs";
+import { ChartsAxisHighlightValueItem } from "./ChartsAxisHighlightValueItem.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A component that displays the axis value at the edge of the drawing area,
+ * aligned with the current axis highlight position.
+ *
+ * Renders as a portal into the ChartsLayerContainer, appearing as the last child.
+ *
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
+ */
+function ChartsAxisHighlightValue(props) {
+  const {
+    axisDirection,
+    axisId,
+    labelPosition,
+    value,
+    valueFormatter,
+    sx
+  } = props;
+  const chartsLayerContainerRef = useChartsLayerContainerRef();
+  const items = useAxisHighlightValue({
+    axisDirection,
+    axisId,
+    labelPosition,
+    value,
+    valueFormatter
+  });
+  if (items.length === 0) {
+    return null;
+  }
+  const content = items.map(itemProps => /*#__PURE__*/_jsx(ChartsAxisHighlightValueItem, _extends({}, itemProps, {
+    sx: sx
+  })));
+  if (!chartsLayerContainerRef.current) {
+    return content;
+  }
+  return /*#__PURE__*/ReactDOM.createPortal(content, chartsLayerContainerRef.current);
+}
+ChartsAxisHighlightValue.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The axis direction.
+   */
+  axisDirection: PropTypes.oneOf(['x', 'y']).isRequired,
+  /**
+   * The id of the axis.
+   * If not provided, defaults to the first axis.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The position of the label relative to the drawing area.
+   * - `'start'`: at the beginning of the drawing area (top for x-axis, left for y-axis).
+   * - `'end'`: at the end of the drawing area (bottom for x-axis, right for y-axis).
+   * - `'both'`: at both positions.
+   * - `'none'`: no label is displayed.
+   * @default 'end'
+   */
+  labelPosition: PropTypes.oneOf(['both', 'end', 'none', 'start']),
+  /**
+   * The value to display.
+   * If not defined, tracks the axis highlight value from user interaction.
+   */
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
+  /**
+   * A function to format the displayed value.
+   * If not provided, uses the axis `valueFormatter`, or falls back to a default formatter.
+   * @param {number | Date | string} value The value to format.
+   * @returns {string} The formatted string.
+   */
+  valueFormatter: PropTypes.func
+};
+export { ChartsAxisHighlightValue };

package/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.d.mts

@@ -0,0 +1,13 @@
+import { type SxProps } from '@mui/material/styles';
+export interface ChartsAxisHighlightValueItemProps {
+  x: number;
+  y: number;
+  formattedValue: string;
+  position: 'top' | 'right' | 'bottom' | 'left';
+  minCoord: number;
+  maxCoord: number;
+  space: number;
+  sx?: SxProps;
+}
+declare function ChartsAxisHighlightValueItem(props: ChartsAxisHighlightValueItemProps): import("react/jsx-runtime").JSX.Element;
+export { ChartsAxisHighlightValueItem };

package/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.d.ts

@@ -0,0 +1,13 @@
+import { type SxProps } from '@mui/material/styles';
+export interface ChartsAxisHighlightValueItemProps {
+  x: number;
+  y: number;
+  formattedValue: string;
+  position: 'top' | 'right' | 'bottom' | 'left';
+  minCoord: number;
+  maxCoord: number;
+  space: number;
+  sx?: SxProps;
+}
+declare function ChartsAxisHighlightValueItem(props: ChartsAxisHighlightValueItemProps): import("react/jsx-runtime").JSX.Element;
+export { ChartsAxisHighlightValueItem };

package/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.js

@@ -0,0 +1,86 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAxisHighlightValueItem = ChartsAxisHighlightValueItem;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _createStyled = require("@mui/system/createStyled");
+var _chartsAxisHighlightValueClasses = require("./chartsAxisHighlightValueClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const ChartsAxisHighlightValueText = (0, _styles.styled)('div', {
+  name: 'MuiChartsAxisHighlightValue',
+  slot: 'Root',
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'position'
+})(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.caption, {
+  padding: theme.spacing(0.5, 1),
+  border: `solid ${theme.palette.divider} 1px`,
+  backgroundColor: theme.palette.background.paper,
+  '--clamped-offset': 'calc(-1*min(var(--min),max(calc(100% - var(--max)),50%)))',
+  variants: [{
+    props: {
+      position: 'top'
+    },
+    style: {
+      translate: 'var(--clamped-offset) -100%'
+    }
+  }, {
+    props: {
+      position: 'bottom'
+    },
+    style: {
+      translate: 'var(--clamped-offset) 0'
+    }
+  }, {
+    props: {
+      position: 'left'
+    },
+    style: {
+      translate: '-100% var(--clamped-offset)'
+    }
+  }, {
+    props: {
+      position: 'right'
+    },
+    style: {
+      translate: '0 var(--clamped-offset)'
+    }
+  }]
+}));
+function ChartsAxisHighlightValueItem(props) {
+  const {
+    x,
+    y,
+    position,
+    formattedValue,
+    minCoord,
+    maxCoord,
+    space,
+    sx
+  } = props;
+  const classes = (0, _chartsAxisHighlightValueClasses.useUtilityClasses)({
+    position
+  });
+  const isXAxis = position === 'top' || position === 'bottom';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightValueText, {
+    className: classes.root,
+    position: position,
+    style: {
+      position: 'absolute',
+      top: y,
+      left: x,
+      '--min': `${isXAxis ? x - minCoord : y - minCoord}px`,
+      '--max': `${isXAxis ? maxCoord - x : maxCoord - y}px`,
+      '--space': `${space}px`
+    },
+    sx: sx,
+    children: formattedValue
+  });
+}

package/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.mjs

@@ -0,0 +1,80 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { useUtilityClasses } from "./chartsAxisHighlightValueClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChartsAxisHighlightValueText = styled('div', {
+  name: 'MuiChartsAxisHighlightValue',
+  slot: 'Root',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'position'
+})(({
+  theme
+}) => _extends({}, theme.typography.caption, {
+  padding: theme.spacing(0.5, 1),
+  border: `solid ${theme.palette.divider} 1px`,
+  backgroundColor: theme.palette.background.paper,
+  '--clamped-offset': 'calc(-1*min(var(--min),max(calc(100% - var(--max)),50%)))',
+  variants: [{
+    props: {
+      position: 'top'
+    },
+    style: {
+      translate: 'var(--clamped-offset) -100%'
+    }
+  }, {
+    props: {
+      position: 'bottom'
+    },
+    style: {
+      translate: 'var(--clamped-offset) 0'
+    }
+  }, {
+    props: {
+      position: 'left'
+    },
+    style: {
+      translate: '-100% var(--clamped-offset)'
+    }
+  }, {
+    props: {
+      position: 'right'
+    },
+    style: {
+      translate: '0 var(--clamped-offset)'
+    }
+  }]
+}));
+function ChartsAxisHighlightValueItem(props) {
+  const {
+    x,
+    y,
+    position,
+    formattedValue,
+    minCoord,
+    maxCoord,
+    space,
+    sx
+  } = props;
+  const classes = useUtilityClasses({
+    position
+  });
+  const isXAxis = position === 'top' || position === 'bottom';
+  return /*#__PURE__*/_jsx(ChartsAxisHighlightValueText, {
+    className: classes.root,
+    position: position,
+    style: {
+      position: 'absolute',
+      top: y,
+      left: x,
+      '--min': `${isXAxis ? x - minCoord : y - minCoord}px`,
+      '--max': `${isXAxis ? maxCoord - x : maxCoord - y}px`,
+      '--space': `${space}px`
+    },
+    sx: sx,
+    children: formattedValue
+  });
+}
+export { ChartsAxisHighlightValueItem };

package/ChartsAxisHighlightValue/chartsAxisHighlightValueClasses.d.mts

@@ -0,0 +1,18 @@
+export interface ChartsAxisHighlightValueClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the top axis highlight. */
+  top: string;
+  /** Styles applied to the bottom axis highlight. */
+  bottom: string;
+  /** Styles applied to the left axis highlight. */
+  left: string;
+  /** Styles applied to the right axis highlight. */
+  right: string;
+}
+export type ChartsAxisHighlightValueClassKey = keyof ChartsAxisHighlightValueClasses;
+export declare function getChartsAxisHighlightValueUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: {
+  position: "top" | "right" | "bottom" | "left";
+}) => Record<"root", string>;
+export declare const chartsAxisHighlightValueClasses: ChartsAxisHighlightValueClasses;