@mui/x-charts 8.14.1 → 8.15.0

package/BarChart/BarChart.js

@@ -101,6 +101,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Defines the border radius of the bar element.
    */
   borderRadius: _propTypes.default.number,
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: _propTypes.default.shape({
+    enabled: _propTypes.default.bool,
+    preventHighlight: _propTypes.default.bool,
+    preventTooltip: _propTypes.default.bool
+  }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**

package/BarChart/BarChart.plugins.d.ts

@@ -4,5 +4,6 @@ import { UseChartInteractionSignature } from "../internals/plugins/featurePlugin
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/BarChart/BarChart.plugins.js

@@ -9,4 +9,5 @@ var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useCha
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
-const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
+const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/BarChart/useBarChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _BarChart = require("./BarChart.plugins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig"];
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -45,7 +45,8 @@ const useBarChartProps = props => {
       onHighlightChange,
       borderRadius,
       barLabel,
-      className
+      className,
+      brushConfig
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -102,6 +103,7 @@ const useBarChartProps = props => {
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
     skipAnimation,
+    brushConfig,
     plugins: _BarChart.BAR_CHART_PLUGINS
   });
   const barPlotProps = {

package/CHANGELOG.md

@@ -5,6 +5,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.15.0
+
+_Oct 23, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add new [`brush` charts interaction](https://mui.com/x/react-charts/brush/) for building custom behavior.
+  ![brush visualization example](https://github.com/user-attachments/assets/60c382a1-e418-4736-8dcb-1567c4e361e3)
+- ⚡️ Performance improvements for large bar charts
+- 🤖 Data Grid AI assistant can now [visualize the query results](https://mui.com/x/react-data-grid/ai-assistant/#data-visualization) by controlling the chart integration settings
+- 📦 DataGrid uses an internal MUI fork of ExcelJS that does not depend on vulnerable versions of NPM packages
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@ZagrebaAlex
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @brijeshb42, @noraleonte
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.15.0`
+
+- [DataGrid] Fix `dataSource.fetchRows` API's return type (#20068) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.15.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@8.15.0`, plus:
+
+- [DataGridPro] Keep children in the tree after parent row is re-fetched with the data source (#19934) @arminmeh
+- [DataGridPro] Support scroll shadows customization (#19982) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@8.15.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@8.15.0`, plus:
+
+- [DataGridPremium] Use ExcelJS fork (#19796) @cherniavskii
+- [DataGridPremium] Support data visualization in AI Assistant (#19831) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.15.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.15.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@8.15.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.15.0`
+
+- [charts] Add `ChartsBrushOverlay` and allow brush configuration (#19956) @JCQuintas
+- [charts] Add `getStringSize` benchmark. Remove benchmarks from built package. (#19995) @bernardobelchior
+- [charts] Batch string size measurement (#19994) @bernardobelchior
+- [charts] Fix console issue (#20025) @JCQuintas
+- [charts] Fix is[ZoomFeature]Enabled type (#20058) @alexfauquette
+- [charts] Fix reference line middle spacing (#20004) @JCQuintas
+- [charts] Improve `getStringSize` and `batchMeasureStrings` performance (#19996) @bernardobelchior
+- [charts] Improve deep export script (#20007) @JCQuintas
+- [charts] Improve string measurement benchmarks (#19999) @bernardobelchior
+- [charts] Measure string sizes using SVG elements (#19981) @bernardobelchior
+- [l10n] Improve Greek (gr-GR) locale (#20060) @ZagrebaAlex
+
+#### `@mui/x-charts-pro@8.15.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@8.15.0`, plus:
+
+- [charts-pro] Fix pan with `axis.reverse` (#20031) @JCQuintas
+
+#### `@mui/x-charts-premium@8.15.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@8.15.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.15.0`
+
+- [tree view] Multi character type-ahead (#19942) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.15.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@8.15.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add overview section for scatter chart and heatmap (#19888) @prakhargupta1
+- [docs] Add charts bell curve example (#20003) @JCQuintas
+- [docs] Add grouped multiple fields for Data Grid row grouping recipe (#19964) @siriwatknp
+- [docs] Add Data Grid loading state recipe (#19958) @siriwatknp
+
+### Core
+
+- [code-infra] Remove @mui/monorepo usage for react versioning (#19894) @Janpot
+- [code-infra] Remove invalid `environment: 'browser'` from vitest browser config (#19993) @bernardobelchior
+- [code-infra] Remove unused babel aliases (#19987) @Janpot
+- [code-infra] Turn on all testing-library eslint rules (#19946) @brijeshb42
+- [docs-infra] Fix broken hash link (#20062) @Janpot
+
 ## 8.14.1
 
 _Oct 16, 2025_

package/ChartContainer/ChartContainer.js

@@ -61,6 +61,14 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.object
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: _propTypes.default.shape({
+    enabled: _propTypes.default.bool,
+    preventHighlight: _propTypes.default.bool,
+    preventTooltip: _propTypes.default.bool
+  }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**

package/ChartContainer/useChartContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig"];
 const useChartContainerProps = (props, ref) => {
   const _ref = props,
     {
@@ -44,7 +44,8 @@ const useChartContainerProps = (props, ref) => {
       slots,
       slotProps,
       experimentalFeatures,
-      enableKeyboardNavigation
+      enableKeyboardNavigation,
+      brushConfig
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const chartsSurfaceProps = (0, _extends2.default)({
@@ -79,6 +80,7 @@ const useChartContainerProps = (props, ref) => {
     seriesConfig,
     experimentalFeatures,
     enableKeyboardNavigation,
+    brushConfig,
     plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS,
     slots,
     slotProps

package/ChartsBrushOverlay/ChartsBrushOverlay.classes.d.ts

@@ -0,0 +1,12 @@
+export interface BrushOverlayClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+}
+export type BrushOverlayClassKey = keyof BrushOverlayClasses;
+export declare const brushOverlayClasses: BrushOverlayClasses;

package/ChartsBrushOverlay/ChartsBrushOverlay.classes.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.brushOverlayClasses = void 0;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+const brushOverlayClasses = exports.brushOverlayClasses = (0, _generateUtilityClasses.default)('MuiChartsBrushOverlay', ['root', 'rect', 'x', 'y']);

package/ChartsBrushOverlay/ChartsBrushOverlay.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface ChartsBrushOverlayProps {}
+/**
+ * Component that renders visual feedback during brush interaction
+ */
+export declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): React.JSX.Element | null;

package/ChartsBrushOverlay/ChartsBrushOverlay.js

@@ -0,0 +1,102 @@
+"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.ChartsBrushOverlay = ChartsBrushOverlay;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _ChartsBrushOverlay = require("./ChartsBrushOverlay.classes");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
+var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _jsxRuntime = require("react/jsx-runtime");
+function BrushRect(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    className: _ChartsBrushOverlay.brushOverlayClasses.rect,
+    strokeWidth: 1,
+    fillOpacity: 0.2,
+    pointerEvents: 'none'
+  }, props));
+}
+/**
+ * Component that renders visual feedback during brush interaction
+ */
+function ChartsBrushOverlay(props) {
+  const store = (0, _useStore.useStore)();
+  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const theme = (0, _styles.useTheme)();
+  const brushStartX = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushStartX);
+  const brushStartY = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushStartY);
+  const brushCurrentX = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushCurrentX);
+  const brushCurrentY = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushCurrentY);
+  const brushConfig = (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushConfig);
+  if (brushStartX === null || brushStartY === null || brushCurrentX === null || brushCurrentY === null) {
+    return null;
+  }
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+
+  // Clamp coordinates to drawing area
+  const clampX = x => Math.max(left, Math.min(left + width, x));
+  const clampY = y => Math.max(top, Math.min(top + height, y));
+  const startX = clampX(brushStartX);
+  const startY = clampY(brushStartY);
+  const currentX = clampX(brushCurrentX);
+  const currentY = clampY(brushCurrentY);
+  const rectColor = theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white;
+
+  // For scatter charts, show only the rectangle without guide lines
+  if (brushConfig === 'xy') {
+    const rectWidth = currentX - startX;
+    const rectHeight = currentY - startY;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x, _ChartsBrushOverlay.brushOverlayClasses.y),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+        fill: rectColor,
+        x: rectWidth >= 0 ? startX : currentX,
+        y: rectHeight >= 0 ? startY : currentY,
+        width: Math.abs(rectWidth),
+        height: Math.abs(rectHeight)
+      }, props))
+    });
+  }
+  if (brushConfig === 'y') {
+    const minY = Math.min(startY, currentY);
+    const maxY = Math.max(startY, currentY);
+    const rectHeight = maxY - minY;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.y),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+        fill: rectColor,
+        x: left,
+        y: minY,
+        width: width,
+        height: rectHeight
+      }, props))
+    });
+  }
+  const minX = Math.min(startX, currentX);
+  const maxX = Math.max(startX, currentX);
+  const rectWidth = maxX - minX;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, (0, _extends2.default)({
+      fill: rectColor,
+      x: minX,
+      y: top,
+      width: rectWidth,
+      height: height
+    }, props))
+  });
+}

package/ChartsBrushOverlay/index.d.ts

@@ -0,0 +1,4 @@
+export { ChartsBrushOverlay } from "./ChartsBrushOverlay.js";
+export type { ChartsBrushOverlayProps } from "./ChartsBrushOverlay.js";
+export { brushOverlayClasses } from "./ChartsBrushOverlay.classes.js";
+export type { BrushOverlayClasses, BrushOverlayClassKey } from "./ChartsBrushOverlay.classes.js";

package/ChartsBrushOverlay/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChartsBrushOverlay", {
+  enumerable: true,
+  get: function () {
+    return _ChartsBrushOverlay.ChartsBrushOverlay;
+  }
+});
+Object.defineProperty(exports, "brushOverlayClasses", {
+  enumerable: true,
+  get: function () {
+    return _ChartsBrushOverlay2.brushOverlayClasses;
+  }
+});
+var _ChartsBrushOverlay = require("./ChartsBrushOverlay");
+var _ChartsBrushOverlay2 = require("./ChartsBrushOverlay.classes");

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
   /**
    * Additional space around the label in px.
    * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
-   * @default 5
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
    */
   spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     x: _propTypes.default.number,

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -21,12 +21,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 const getTextParams = ({
   top,
   height,
-  spacingY,
+  spacing,
+  position,
   labelAlign = 'middle'
 }) => {
+  const defaultSpacingOtherAxis = labelAlign === 'middle' ? _common.DEFAULT_SPACING_MIDDLE_OTHER_AXIS : _common.DEFAULT_SPACING;
+  const spacingX = (typeof spacing === 'object' ? spacing.x : spacing) ?? _common.DEFAULT_SPACING;
+  const spacingY = (typeof spacing === 'object' ? spacing.y : defaultSpacingOtherAxis) ?? defaultSpacingOtherAxis;
   switch (labelAlign) {
     case 'start':
       return {
+        x: position + spacingX,
         y: top + spacingY,
         style: {
           dominantBaseline: 'hanging',
@@ -35,6 +40,7 @@ const getTextParams = ({
       };
     case 'end':
       return {
+        x: position + spacingX,
         y: top + height - spacingY,
         style: {
           dominantBaseline: 'auto',
@@ -43,7 +49,8 @@ const getTextParams = ({
       };
     default:
       return {
-        y: top + height / 2,
+        x: position + spacingX,
+        y: top + height / 2 + spacingY,
         style: {
           dominantBaseline: 'central',
           textAnchor: 'start'
@@ -62,9 +69,9 @@ function ChartsXReferenceLine(props) {
   const {
     x,
     label = '',
-    spacing = 5,
+    spacing,
     classes: inClasses,
-    labelAlign,
+    labelAlign = 'middle',
     lineStyle,
     labelStyle,
     axisId
@@ -83,16 +90,14 @@ function ChartsXReferenceLine(props) {
   }
   const d = `M ${xPosition} ${top} l 0 ${height}`;
   const classes = getXReferenceLineClasses(inClasses);
-  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
-  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
   const textParams = (0, _extends2.default)({
-    x: xPosition + spacingX,
     text: label,
     fontSize: 12
   }, getTextParams({
     top,
     height,
-    spacingY,
+    spacing,
+    position: xPosition,
     labelAlign
   }), {
     className: classes.label

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -21,12 +21,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 const getTextParams = ({
   left,
   width,
-  spacingX,
+  spacing,
+  position,
   labelAlign = 'middle'
 }) => {
+  const defaultSpacingOtherAxis = labelAlign === 'middle' ? _common.DEFAULT_SPACING_MIDDLE_OTHER_AXIS : _common.DEFAULT_SPACING;
+  const spacingX = (typeof spacing === 'object' ? spacing.x : defaultSpacingOtherAxis) ?? defaultSpacingOtherAxis;
+  const spacingY = (typeof spacing === 'object' ? spacing.y : spacing) ?? _common.DEFAULT_SPACING;
   switch (labelAlign) {
     case 'start':
       return {
+        y: position - spacingY,
         x: left + spacingX,
         style: {
           dominantBaseline: 'auto',
@@ -35,6 +40,7 @@ const getTextParams = ({
       };
     case 'end':
       return {
+        y: position - spacingY,
         x: left + width - spacingX,
         style: {
           dominantBaseline: 'auto',
@@ -43,7 +49,8 @@ const getTextParams = ({
       };
     default:
       return {
-        x: left + width / 2,
+        y: position - spacingY,
+        x: left + width / 2 + spacingX,
         style: {
           dominantBaseline: 'auto',
           textAnchor: 'middle'
@@ -62,9 +69,9 @@ function ChartsYReferenceLine(props) {
   const {
     y,
     label = '',
-    spacing = 5,
+    spacing,
     classes: inClasses,
-    labelAlign,
+    labelAlign = 'middle',
     lineStyle,
     labelStyle,
     axisId
@@ -83,16 +90,14 @@ function ChartsYReferenceLine(props) {
   }
   const d = `M ${left} ${yPosition} l ${width} 0`;
   const classes = getYReferenceLineClasses(inClasses);
-  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
-  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
   const textParams = (0, _extends2.default)({
-    y: yPosition - spacingY,
     text: label,
     fontSize: 12
   }, getTextParams({
     left,
     width,
-    spacingX,
+    spacing,
+    position: yPosition,
     labelAlign
   }), {
     className: classes.label

package/ChartsReferenceLine/common.d.ts

@@ -1,6 +1,8 @@
 import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
 import { ChartsTextStyle } from "../ChartsText/index.js";
 import { AxisId } from "../models/axis.js";
+export declare const DEFAULT_SPACING = 5;
+export declare const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
 export type CommonChartsReferenceLineProps = {
   /**
    * The alignment if the label is in the chart drawing area.
@@ -14,7 +16,7 @@ export type CommonChartsReferenceLineProps = {
   /**
    * Additional space around the label in px.
    * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
-   * @default 5
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
    */
   spacing?: number | {
     x?: number;

package/ChartsReferenceLine/common.js

@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReferenceLineRoot = void 0;
+exports.ReferenceLineRoot = exports.DEFAULT_SPACING_MIDDLE_OTHER_AXIS = exports.DEFAULT_SPACING = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+const DEFAULT_SPACING = exports.DEFAULT_SPACING = 5;
+const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = exports.DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
 const ReferenceLineRoot = exports.ReferenceLineRoot = (0, _styles.styled)('g')(({
   theme
 }) => ({

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -26,9 +26,11 @@ var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useCha
 var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
 var _useAxisSystem = require("../hooks/useAxisSystem");
 var _hooks = require("../hooks");
+var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
+var _selectors = require("../internals/plugins/utils/selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["trigger", "classes", "children"];
-const noAxis = () => false;
+const selectorReturnFalse = () => false;
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiChartsTooltip',
   slot: 'Root'
@@ -38,6 +40,21 @@ const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
+const selectorSelectIsOpenSelector = (0, _selectors.createSelector)([_useChartBrush.selectorBrushShouldPreventTooltip, (_, trigger) => trigger, (_, __, axisSystem) => axisSystem], (shouldPreventBecauseOfBrush, trigger, axisSystem) => {
+  if (shouldPreventBecauseOfBrush) {
+    return selectorReturnFalse;
+  }
+  if (trigger === 'item') {
+    return _useChartInteraction.selectorChartsInteractionItemIsDefined;
+  }
+  if (axisSystem === 'polar') {
+    return _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip;
+  }
+  if (axisSystem === 'cartesian') {
+    return _useChartCartesianAxis.selectorChartsInteractionAxisTooltip;
+  }
+  return selectorReturnFalse;
+});
 
 /**
  * Demos:
@@ -70,7 +87,8 @@ function ChartsTooltipContainer(inProps) {
   }));
   const axisSystem = (0, _useAxisSystem.useAxisSystem)();
   const store = (0, _useStore.useStore)();
-  const isOpen = (0, _useSelector.useSelector)(store, trigger === 'axis' ? axisSystem === 'polar' && _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip || axisSystem === 'cartesian' && _useChartCartesianAxis.selectorChartsInteractionAxisTooltip || noAxis : _useChartInteraction.selectorChartsInteractionItemIsDefined);
+  const isOpenSelector = (0, _useSelector.useSelector)(store, selectorSelectIsOpenSelector, [trigger, axisSystem]);
+  const isOpen = (0, _useSelector.useSelector)(store, isOpenSelector);
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {