@mui/x-charts 8.14.0 → 8.15.0

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) {

package/ChartsXAxis/getVisibleLabels.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getVisibleLabels = getVisibleLabels;
 var _geometry = require("../internals/geometry");
-var _getWordsByLines = require("../internals/getWordsByLines");
+var _domUtils = require("../internals/domUtils");
 /* Returns a set of indices of the tick labels that should be visible.  */
 function getVisibleLabels(xTicks, {
   tickLabelStyle: style,
@@ -16,23 +16,6 @@ function getVisibleLabels(xTicks, {
   isMounted,
   isXInside
 }) {
-  const getTickLabelSize = tick => {
-    if (!isMounted || tick.formattedValue === undefined) {
-      return {
-        width: 0,
-        height: 0
-      };
-    }
-    const tickSizes = (0, _getWordsByLines.getWordsByLines)({
-      style,
-      needsComputation: true,
-      text: tick.formattedValue
-    });
-    return {
-      width: Math.max(...tickSizes.map(size => size.width)),
-      height: Math.max(tickSizes.length * tickSizes[0].height)
-    };
-  };
   if (typeof tickLabelInterval === 'function') {
     return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
   }
@@ -40,7 +23,7 @@ function getVisibleLabels(xTicks, {
   // Filter label to avoid overlap
   let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
-  return new Set(xTicks.filter((item, labelIndex) => {
+  const candidateTickLabels = xTicks.filter(item => {
     const {
       offset,
       labelOffset,
@@ -50,18 +33,25 @@ function getVisibleLabels(xTicks, {
       return false;
     }
     const textPosition = offset + labelOffset;
+    return isXInside(textPosition);
+  });
+  const sizeMap = measureTickLabels(candidateTickLabels, style);
+  return new Set(candidateTickLabels.filter((item, labelIndex) => {
+    const {
+      offset,
+      labelOffset
+    } = item;
+    const textPosition = offset + labelOffset;
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;
     }
-    if (!isXInside(textPosition)) {
-      return false;
-    }
-
-    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
     const {
       width,
       height
-    } = getTickLabelSize(item);
+    } = isMounted ? getTickLabelSize(sizeMap, item) : {
+      width: 0,
+      height: 0
+    };
     const distance = (0, _geometry.getMinXTranslation)(width, height, style?.angle);
     const currentTextLimit = textPosition - direction * distance / 2;
     if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
@@ -72,4 +62,34 @@ function getVisibleLabels(xTicks, {
     previousTextLimit = textPosition + direction * distance / 2;
     return true;
   }));
+}
+function getTickLabelSize(sizeMap, tick) {
+  if (tick.formattedValue === undefined) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  let width = 0;
+  let height = 0;
+  for (const line of tick.formattedValue.split('\n')) {
+    const lineSize = sizeMap.get(line);
+    if (lineSize) {
+      width = Math.max(width, lineSize.width);
+      height += lineSize.height;
+    }
+  }
+  return {
+    width,
+    height
+  };
+}
+function measureTickLabels(ticks, style) {
+  const strings = new Set();
+  for (const tick of ticks) {
+    if (tick.formattedValue) {
+      tick.formattedValue.split('\n').forEach(line => strings.add(line));
+    }
+  }
+  return (0, _domUtils.batchMeasureStrings)(strings, style);
 }

package/Gauge/Gauge.js

@@ -25,10 +25,7 @@ const useUtilityClasses = props => {
     classes
   } = props;
   const slots = {
-    root: ['root'],
-    valueArc: ['valueArc'],
-    referenceArc: ['referenceArc'],
-    valueText: ['valueText']
+    root: ['root']
   };
   return (0, _composeClasses.default)(slots, _gaugeClasses.getGaugeUtilityClass, classes);
 };
@@ -44,13 +41,9 @@ const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GaugeContainer.GaugeContainer, (0, _extends2.default)({}, other, {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
-      className: classes.referenceArc
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
-      className: classes.valueArc,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
       skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueText.GaugeValueText, {
-      className: classes.valueText,
       text: text
     }), children]
   }));

package/Gauge/GaugeReferenceArc.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;
+export declare function GaugeReferenceArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'>): React.JSX.Element;

package/Gauge/GaugeReferenceArc.js

@@ -1,18 +1,22 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeReferenceArc = GaugeReferenceArc;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _GaugeProvider = require("./GaugeProvider");
+var _gaugeClasses = require("./gaugeClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
 const StyledPath = (0, _styles.styled)('path', {
   name: 'MuiGauge',
   slot: 'ReferenceArc'
@@ -21,7 +25,11 @@ const StyledPath = (0, _styles.styled)('path', {
 }) => ({
   fill: (theme.vars || theme).palette.divider
 }));
-function GaugeReferenceArc(props) {
+function GaugeReferenceArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
     startAngle,
     endAngle,
@@ -32,6 +40,7 @@ function GaugeReferenceArc(props) {
     cy
   } = (0, _GaugeProvider.useGaugeState)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPath, (0, _extends2.default)({
+    className: (0, _clsx.default)(_gaugeClasses.gaugeClasses.referenceArc, className),
     transform: `translate(${cx}, ${cy})`,
     d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)({
       startAngle,
@@ -39,5 +48,5 @@ function GaugeReferenceArc(props) {
       innerRadius,
       outerRadius
     })
-  }, props));
+  }, other));
 }

package/Gauge/GaugeValueArc.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+declare function GaugeValueArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'> & {
   skipAnimation?: boolean;
 }): React.JSX.Element | null;
 declare namespace GaugeValueArc {

package/Gauge/GaugeValueArc.js

@@ -7,25 +7,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeValueArc = GaugeValueArc;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useAnimateGaugeValueArc = require("../hooks/animation/useAnimateGaugeValueArc");
 var _GaugeProvider = require("./GaugeProvider");
+var _gaugeClasses = require("./gaugeClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
+const _excluded = ["className"],
+  _excluded2 = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 const StyledPath = (0, _styles.styled)('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc'
+  slot: 'ValueArc'
 })(({
   theme
 }) => ({
   fill: (theme.vars || theme).palette.primary.main
 }));
-function GaugeValueArc(props) {
+function GaugeValueArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
     value,
     valueMin,
@@ -42,7 +49,8 @@ function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedGaugeValueArc, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedGaugeValueArc, (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(_gaugeClasses.gaugeClasses.valueArc, className),
     cx: cx,
     cy: cy,
     startAngle: startAngle,
@@ -59,7 +67,7 @@ process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
   // ----------------------------------------------------------------------
   skipAnimation: _propTypes.default.bool
 } : void 0;
-function AnimatedGaugeValueArc(_ref) {
+function AnimatedGaugeValueArc(_ref2) {
   let {
       cx,
       cy,
@@ -69,8 +77,8 @@ function AnimatedGaugeValueArc(_ref) {
       innerRadius,
       outerRadius,
       skipAnimation: inSkipAnimation
-    } = _ref,
-    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    } = _ref2,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
   const animatedProps = (0, _useAnimateGaugeValueArc.useAnimateGaugeValueArc)({
     startAngle,

package/Gauge/GaugeValueText.js

@@ -11,8 +11,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _GaugeProvider = require("./GaugeProvider");
 var _ChartsText = require("../ChartsText");
+var _gaugeClasses = require("./gaugeClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["text", "className"];
 function defaultFormatter({
@@ -42,7 +44,7 @@ function GaugeValueText(props) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    className: className,
+    className: (0, _clsx.default)(_gaugeClasses.gaugeClasses.valueText, className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, (0, _extends2.default)({
       x: cx,
       y: cy,

package/LineChart/LineChart.js

@@ -97,6 +97,14 @@ process.env.NODE_ENV !== "production" ? LineChart.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/LineChart/LineChart.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 LineChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/LineChart/LineChart.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 LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
+const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/LineChart/useLineChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _LineChart = require("./LineChart.plugins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "brushConfig"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -45,7 +45,8 @@ const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      brushConfig
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -74,6 +75,7 @@ const useLineChartProps = props => {
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
     skipAnimation,
+    brushConfig,
     plugins: _LineChart.LINE_CHART_PLUGINS
   });
   const gridProps = {

package/ScatterChart/ScatterChart.js

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

@@ -5,5 +5,6 @@ import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/ScatterChart/ScatterChart.plugins.js

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

package/ScatterChart/seriesConfig/seriesProcessor.js

@@ -12,7 +12,7 @@ const seriesProcessor = ({
 }, dataset) => {
   const completeSeries = Object.fromEntries(Object.entries(series).map(([seriesId, seriesData]) => {
     const datasetKeys = seriesData?.datasetKeys;
-    const missingKeys = ['x', 'y', 'id'].filter(key => typeof datasetKeys?.[key] !== 'string');
+    const missingKeys = ['x', 'y'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
       throw new Error([`MUI X Charts: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
     }

package/ScatterChart/useScatterChartProps.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _ScatterChart = require("./ScatterChart.plugins");
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -42,7 +42,8 @@ const useScatterChartProps = props => {
       highlightedItem,
       onHighlightChange,
       className,
-      renderer
+      renderer,
+      brushConfig
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
@@ -66,7 +67,8 @@ const useScatterChartProps = props => {
     className,
     plugins: _ScatterChart.SCATTER_CHART_PLUGINS,
     slots,
-    slotProps
+    slotProps,
+    brushConfig
   });
   const chartsAxisProps = {
     slots,

package/SparkLineChart/SparkLineChart.js

@@ -186,6 +186,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 0
    */
   baseline: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'min']), _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/esm/BarChart/BarChart.js

@@ -94,6 +94,14 @@ process.env.NODE_ENV !== "production" ? BarChart.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/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/esm/BarChart/BarChart.plugins.js

@@ -3,4 +3,5 @@ import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useCh
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const BAR_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];
+import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export const BAR_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];