@mui/x-charts-pro 8.14.1 → 8.15.0

package/BarChartPro/BarChartPro.js

@@ -125,6 +125,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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/BarChartPro/BarChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginSignatures>;

package/BarChartPro/BarChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.BAR_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

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/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc2MDU3MjgwMDAwMA==";
+const releaseInfo = "MTc2MTE3NzYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartsBrushOverlay/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsBrushOverlay';

package/ChartsBrushOverlay/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsBrushOverlay = require("@mui/x-charts/ChartsBrushOverlay");
+Object.keys(_ChartsBrushOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsBrushOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsBrushOverlay[key];
+    }
+  });
+});

package/LineChartPro/LineChartPro.js

@@ -117,6 +117,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * 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/LineChartPro/LineChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginSignatures>;

package/LineChartPro/LineChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.LINE_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/ScatterChartPro/ScatterChartPro.js

@@ -111,6 +111,14 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * 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/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/ScatterChartPro/ScatterChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.SCATTER_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartClosestPoint, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartClosestPoint, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/esm/BarChartPro/BarChartPro.js

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

package/esm/BarChartPro/BarChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginSignatures>;

package/esm/BarChartPro/BarChartPro.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc2MDU3MjgwMDAwMA==";
+const releaseInfo = "MTc2MTE3NzYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartsBrushOverlay/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsBrushOverlay';

package/esm/ChartsBrushOverlay/index.js

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsBrushOverlay';

package/esm/LineChartPro/LineChartPro.js

@@ -110,6 +110,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/LineChartPro/LineChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginSignatures>;

package/esm/LineChartPro/LineChartPro.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const LINE_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const LINE_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -104,6 +104,14 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/esm/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.14.1
+ * @mui/x-charts-pro v8.15.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -14,7 +14,7 @@ export const usePanOnDrag = ({
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = useSelector(store, selectorPanInteractionConfig, ['drag']);
-  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnDragEnabled) {
       return;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -14,7 +14,7 @@ export const usePanOnPressAndDrag = ({
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = useSelector(store, selectorPanInteractionConfig, ['pressAndDrag']);
-  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnPressAndDragEnabled) {
       return;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts

@@ -26,7 +26,7 @@ export declare function getHorizontalCenterRatio(point: {
 }, area: {
   left: number;
   width: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
@@ -36,7 +36,7 @@ export declare function getVerticalCenterRatio(point: {
 }, area: {
   top: number;
   height: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Translate the zoom data by a given movement.
  */

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js

@@ -80,23 +80,25 @@ export function getWheelScaleRatio(event, step) {
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
-export function getHorizontalCenterRatio(point, area) {
+export function getHorizontalCenterRatio(point, area, reverse = false) {
   const {
     left,
     width
   } = area;
-  return (point.x - left) / width;
+  const ratio = (point.x - left) / width;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
-export function getVerticalCenterRatio(point, area) {
+export function getVerticalCenterRatio(point, area, reverse = false) {
   const {
     top,
     height
   } = area;
-  return (point.y - top) / height * -1 + 1;
+  const ratio = (top - point.y) / height + 1;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
@@ -113,7 +115,8 @@ export function translateZoom(initialZoomData, movement, drawingArea, optionsLoo
     const span = max - min;
     const MIN_PERCENT = options.minStart;
     const MAX_PERCENT = options.maxEnd;
-    const displacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const rawDisplacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const displacement = options.reverse ? -rawDisplacement : rawDisplacement;
     const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
     let newMinPercent = min - displacement / dimension * span;
     let newMaxPercent = max - displacement / dimension * span;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -13,7 +13,7 @@ export const useZoomOnPinch = ({
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const config = useSelector(store, selectorZoomInteractionConfig, ['pinch']);
-  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnPinchEnabled) {
       return;
@@ -46,7 +46,7 @@ export const useZoomOnPinch = ({
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
           if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.js

@@ -13,7 +13,7 @@ export const useZoomOnTapAndDrag = ({
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const config = useSelector(store, selectorZoomInteractionConfig, ['tapAndDrag']);
-  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnTapAndDragEnabled) {
       return;
@@ -51,7 +51,7 @@ export const useZoomOnTapAndDrag = ({
             clientX: event.detail.initialCentroid.x,
             clientY: event.detail.initialCentroid.y
           });
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
           if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -15,7 +15,7 @@ export const useZoomOnWheel = ({
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
   const config = useSelector(store, selectorZoomInteractionConfig, ['wheel']);
-  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnWheelEnabled) {
       return;
@@ -59,7 +59,7 @@ export const useZoomOnWheel = ({
           if (!option) {
             return zoom;
           }
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
           const {
             scaleRatio,
             isZoomIn

package/esm/tests/constants.js

@@ -0,0 +1 @@
+export const CHART_SELECTOR = 'svg:not([aria-hidden="true"])';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.14.1
+ * @mui/x-charts-pro v8.15.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -20,7 +20,7 @@ const usePanOnDrag = ({
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, ['drag']);
-  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnDragEnabled) {
       return;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -20,7 +20,7 @@ const usePanOnPressAndDrag = ({
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, ['pressAndDrag']);
-  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnPressAndDragEnabled) {
       return;

package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts

@@ -26,7 +26,7 @@ export declare function getHorizontalCenterRatio(point: {
 }, area: {
   left: number;
   width: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
@@ -36,7 +36,7 @@ export declare function getVerticalCenterRatio(point: {
 }, area: {
   top: number;
   height: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Translate the zoom data by a given movement.
  */

package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js

@@ -93,23 +93,25 @@ function getWheelScaleRatio(event, step) {
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
-function getHorizontalCenterRatio(point, area) {
+function getHorizontalCenterRatio(point, area, reverse = false) {
   const {
     left,
     width
   } = area;
-  return (point.x - left) / width;
+  const ratio = (point.x - left) / width;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
-function getVerticalCenterRatio(point, area) {
+function getVerticalCenterRatio(point, area, reverse = false) {
   const {
     top,
     height
   } = area;
-  return (point.y - top) / height * -1 + 1;
+  const ratio = (top - point.y) / height + 1;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
@@ -126,7 +128,8 @@ function translateZoom(initialZoomData, movement, drawingArea, optionsLookup) {
     const span = max - min;
     const MIN_PERCENT = options.minStart;
     const MAX_PERCENT = options.maxEnd;
-    const displacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const rawDisplacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const displacement = options.reverse ? -rawDisplacement : rawDisplacement;
     const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
     let newMinPercent = min - displacement / dimension * span;
     let newMaxPercent = max - displacement / dimension * span;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -19,7 +19,7 @@ const useZoomOnPinch = ({
   const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorZoomInteractionConfig, ['pinch']);
-  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnPinchEnabled) {
       return;
@@ -52,7 +52,7 @@ const useZoomOnPinch = ({
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });
-          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea, option.reverse) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
           if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.js

@@ -19,7 +19,7 @@ const useZoomOnTapAndDrag = ({
   const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorZoomInteractionConfig, ['tapAndDrag']);
-  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnTapAndDragEnabled) {
       return;
@@ -57,7 +57,7 @@ const useZoomOnTapAndDrag = ({
             clientX: event.detail.initialCentroid.x,
             clientY: event.detail.initialCentroid.y
           });
-          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea, option.reverse) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
           if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -21,7 +21,7 @@ const useZoomOnWheel = ({
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorZoomInteractionConfig, ['wheel']);
-  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnWheelEnabled) {
       return;
@@ -65,7 +65,7 @@ const useZoomOnWheel = ({
           if (!option) {
             return zoom;
           }
-          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea, option.reverse) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea, option.reverse);
           const {
             scaleRatio,
             isZoomIn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.14.1",
+  "version": "8.15.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,11 +31,11 @@
     "@mui/utils": "^7.3.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.14.1",
-    "@mui/x-charts-vendor": "8.14.1",
-    "@mui/x-internal-gestures": "0.3.3",
+    "@mui/x-charts-vendor": "8.15.0",
+    "@mui/x-charts": "8.15.0",
+    "@mui/x-internal-gestures": "0.3.4",
     "@mui/x-internals": "8.14.0",
-    "@mui/x-license": "8.14.1"
+    "@mui/x-license": "8.15.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/tests/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHART_SELECTOR = void 0;
+const CHART_SELECTOR = exports.CHART_SELECTOR = 'svg:not([aria-hidden="true"])';