@mui/x-charts 8.14.0 → 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/BarChart/useBarPlotData.js

@@ -36,6 +36,7 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
       const xAxisConfig = xAxes[xAxisId];
       const yAxisConfig = yAxes[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
+      const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
       (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
@@ -57,19 +58,20 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
         layout,
         minBarSize
       } = series[seriesId];
-      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
+      const seriesDataPoints = [];
+      for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
+        const baseValue = baseScaleConfig.data[dataIndex];
+        const seriesValue = currentSeriesData[dataIndex];
+        if (seriesValue == null) {
+          continue;
         }
         const values = stackedData[dataIndex];
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         const stackId = series[seriesId].stack;
-        const {
-          barSize,
-          startCoordinate
-        } = getValueCoordinate(verticalLayout, minValueCoord, maxValueCoord, currentSeriesData[dataIndex], minBarSize);
+        const barSize = seriesValue === 0 ? 0 : Math.max(minBarSize, maxValueCoord - minValueCoord);
+        const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
         const result = {
           seriesId,
           dataIndex,
@@ -85,7 +87,7 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
+          continue;
         }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
@@ -106,10 +108,11 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
         mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
         mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
         mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
+        const value = result.value ?? 0;
+        mask.hasNegative = mask.hasNegative || (reverse ? value > 0 : value < 0);
+        mask.hasPositive = mask.hasPositive || (reverse ? value < 0 : value > 0);
+        seriesDataPoints.push(result);
+      }
       return {
         seriesId,
         data: seriesDataPoints
@@ -149,25 +152,9 @@ function getBandSize({
     offset
   };
 }
-function getValueCoordinate(isVertical, minValueCoord, maxValueCoord, baseValue, minBarSize) {
-  if (baseValue === 0 || baseValue == null) {
-    return {
-      barSize: 0,
-      startCoordinate: minValueCoord
-    };
-  }
-  const isSizeLessThanMin = maxValueCoord - minValueCoord < minBarSize;
-  const barSize = isSizeLessThanMin ? minBarSize : maxValueCoord - minValueCoord;
-  const isVerticalAndPositive = isVertical && baseValue >= 0;
-  const isHorizontalAndNegative = !isVertical && baseValue < 0;
-  if (isSizeLessThanMin && (isVerticalAndPositive || isHorizontalAndNegative)) {
-    return {
-      barSize,
-      startCoordinate: maxValueCoord - barSize
-    };
-  }
-  return {
-    barSize,
-    startCoordinate: minValueCoord
-  };
+function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
+  const isVerticalAndPositive = verticalLayout && baseValue > 0;
+  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
+  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
+  return reverse ? !invertStartCoordinate : invertStartCoordinate;
 }

package/CHANGELOG.md

@@ -5,6 +5,208 @@
 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_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Charts have optimized data structures for closest point calculations — initial render times reduced by ~25% for 1,000+ data points, with greater gains at larger scales (#19790) @bernardobelchior
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@djpremier, @jacknot, @justdoit1897, @mellis481, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @noraleonte, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.14.1`
+
+- [DataGrid] Fix cell not rerendering on `isCellEditable` prop change (#19898) @cherniavskii
+- [DataGrid] Fix virtualizer memory leaks (#19886) @cherniavskii
+- [DataGrid] Fix tree data unable to deselect row for exclude model (#19846) @siriwatknp
+- [l10n] Improve Italian (it-IT) locale (#19322) @jacknot and (#19940) @justdoit1897
+
+#### `@mui/x-data-grid-pro@8.14.1` [![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.14.1`, plus:
+
+- [DataGridPro] Clear cache before new request to the nested request queue after a row has been edited (#19873) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.14.1` [![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.14.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.14.1`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.14.1` [![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.14.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.14.1`
+
+- [charts] Fix `minBarSize` when y-axis is reversed (#19932) @bernardobelchior
+- [charts] Fix bar chart border radius when axis is reversed (#19895) @bernardobelchior
+- [charts] Fix scatter chart `datasetKeys.id` not being optional (#19897) @bernardobelchior
+- [charts] Use more performant data structure for closest point (#19790) @bernardobelchior
+- [charts] Fix `GaugeValueArc` having wrong class (#19965) @bernardobelchior
+- [charts] Fix `undefined` path when highlight empty line chart axis (#19969) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.14.1` [![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.14.1`, plus:
+
+- [charts-pro] Add `highlighting` to Sankey chart (#19662) @JCQuintas
+
+#### `@mui/x-charts-premium@8.14.1` [![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.14.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.14.1`
+
+- [tree view] Do not forward the `ownerState` to the icon (#19772) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.14.1` [![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.14.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add `'bumpX'` and `'bumpY'` curve types to the interpolation demo (#19676) @djpremier
+- [docs] Add scatter chart with linear regression demo (#19900) @bernardobelchior
+- [docs] Correctly describe Data Grid's row selection behavior (#19968) @arminmeh
+- [docs] Fix `isExpanded` type in tree view docs (#19092) @mellis481
+
+### Core
+
+- [code-infra] Disable Netlify cache plugin (#19950) @Janpot
+- [code-infra] Lint json through eslint (#19890) @Janpot
+- [docs-infra] Use published netlify cache plugin package (#19929) @brijeshb42
+
 ## 8.14.0
 
 _Oct 9, 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