@mui/x-charts 8.17.0 → 8.19.0

package/BarChart/BarLabel/BarLabel.d.ts

@@ -26,8 +26,14 @@ export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' |
    * Height of the bar this label belongs to.
    */
   height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
 };
-declare function BarLabel(inProps: BarLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function BarLabel(inProps: BarLabelProps): React.JSX.Element;
 declare namespace BarLabel {
   var propTypes: any;
 }

package/BarChart/BarLabel/BarLabel.js

@@ -16,7 +16,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useAnimateBarLabel = require("../../hooks/animation/useAnimateBarLabel");
 var _barLabelClasses = require("./barLabelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin"];
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement"];
 const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text', {
   name: 'MuiBarLabel',
   slot: 'Root',
@@ -31,8 +31,6 @@ const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text'
   stroke: 'none',
   fill: (theme.vars || theme)?.palette?.text?.primary,
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  textAnchor: 'middle',
-  dominantBaseline: 'central',
   pointerEvents: 'none',
   opacity: 1,
   [`&.${_barLabelClasses.barLabelClasses.faded}`]: {
@@ -46,7 +44,40 @@ function BarLabel(inProps) {
   });
   const otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const animatedProps = (0, _useAnimateBarLabel.useAnimateBarLabel)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({}, otherProps, animatedProps));
+  const textAnchor = getTextAnchor(props);
+  const dominantBaseline = getDominantBaseline(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline
+  }, otherProps, animatedProps));
+}
+function getTextAnchor({
+  placement,
+  layout,
+  xOrigin,
+  x
+}) {
+  if (placement === 'outside') {
+    if (layout === 'horizontal') {
+      return x < xOrigin ? 'end' : 'start';
+    }
+    return 'middle';
+  }
+  return 'middle';
+}
+function getDominantBaseline({
+  placement,
+  layout,
+  yOrigin,
+  y
+}) {
+  if (placement === 'outside') {
+    if (layout === 'horizontal') {
+      return 'central';
+    }
+    return y < yOrigin ? 'auto' : 'hanging';
+  }
+  return 'central';
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -62,6 +93,12 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired,
   layout: _propTypes.default.oneOf(['horizontal', 'vertical']).isRequired,
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement: _propTypes.default.oneOf(['center', 'outside']),
   seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   skipAnimation: _propTypes.default.bool.isRequired,
   /**

package/BarChart/BarLabel/BarLabelItem.d.ts

@@ -67,6 +67,12 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
    * @returns {string} The formatted label.
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  barLabelPlacement?: BarLabelProps['placement'];
 };
 /**
  * @ignore - internal component.

package/BarChart/BarLabel/BarLabelItem.js

@@ -16,7 +16,7 @@ var _getBarLabel = require("./getBarLabel");
 var _BarLabel = require("./BarLabel");
 var _useItemHighlighted = require("../../hooks/useItemHighlighted");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout"],
+const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement"],
   _excluded2 = ["ownerState"];
 /**
  * @ignore - internal component.
@@ -38,7 +38,8 @@ function BarLabelItem(props) {
       height,
       value,
       skipAnimation,
-      layout
+      layout,
+      barLabelPlacement
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -70,6 +71,7 @@ function BarLabelItem(props) {
         y,
         width,
         height,
+        placement: barLabelPlacement,
         className: classes.root
       }),
       ownerState

package/BarChart/BarLabel/BarLabelPlot.js

@@ -1,14 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarLabelPlot = BarLabelPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
 var _BarLabelItem = require("./BarLabelItem");
 var _barClasses = require("../barClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -59,7 +57,8 @@ function BarLabelPlot(props) {
       skipAnimation: skipAnimation ?? false,
       layout: layout ?? 'vertical'
     }, other, {
-      barLabel: barLabel
+      barLabel: barLabel,
+      barLabelPlacement: processedSeries.barLabelPlacement || 'center'
     }), dataIndex))
   }, seriesId);
 }

package/BarChart/BarPlot.js

@@ -162,6 +162,11 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @returns {string} The formatted label.
    */
   barLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered inside or outside the bar.
+   */
+  barLabelPlacement: _propTypes.default.oneOf(['outside', 'inside']),
   /**
    * Defines the border radius of the bar element.
    */

package/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -34,6 +34,20 @@ const seriesProcessor = (params, dataset) => {
     } else if (dataset === undefined) {
       throw new Error([`MUI X Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+        if (!dataKey) {
+          throw new Error([`MUI X Charts: bar series with id='${id}' has no data and no dataKey.`, 'You must provide a dataKey when using the dataset prop.'].join('\n'));
+        }
+        dataset.forEach((entry, index) => {
+          const value = entry[dataKey];
+          if (value != null && typeof value !== 'number') {
+            (0, _warning.warnOnce)([`MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.`, 'Bar plots only support numeric and null values.'].join('\n'));
+          }
+        });
+      }
+    }
   });
   const completedSeries = {};
   stackingGroups.forEach(stackingGroup => {
@@ -59,15 +73,7 @@ const seriesProcessor = (params, dataset) => {
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
-          if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production') {
-              if (value !== null) {
-                (0, _warning.warnOnce)([`MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
-              }
-            }
-            return null;
-          }
-          return value;
+          return typeof value === 'number' ? value : null;
         }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });

package/BarChart/types.d.ts

@@ -13,6 +13,7 @@ export interface ProcessedBarSeriesData {
   seriesId: SeriesId;
   data: ProcessedBarData[];
   barLabel?: BarSeriesType['barLabel'];
+  barLabelPlacement?: BarSeriesType['barLabelPlacement'];
 }
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;

package/BarChart/useBarPlotData.js

@@ -63,8 +63,8 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          xOrigin: xScale(0) ?? 0,
-          yOrigin: yScale(0) ?? 0
+          xOrigin: Math.round(xScale(0) ?? 0),
+          yOrigin: Math.round(yScale(0) ?? 0)
         }, barDimensions, {
           color: colorGetter(dataIndex),
           value: series[seriesId].data[dataIndex],
@@ -100,6 +100,7 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
       return {
         seriesId,
         barLabel: series[seriesId].barLabel,
+        barLabelPlacement: series[seriesId].barLabelPlacement,
         data: seriesDataPoints
       };
     });

package/CHANGELOG.md

@@ -5,6 +5,219 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.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.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.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.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.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.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.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.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.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.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.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.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
+## 8.18.0
+
+<!-- generated comparing v8.17.0..master -->
+
+_Nov 13, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `barLabelPlacement` property to customize the bar label position in bar charts, enabling labels to be placed above bars.
+
+  ![image](https://github.com/user-attachments/assets/4bc3a75b-74b8-4c6d-896b-5f5bf837bcda)
+
+- Add `source` property to the date/time picker lifecycle and event handler context, enabling clearer differentiation between changes initiated by the picker UI and those from direct field input.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@htollefsen, @sai6855, @Sigdriv
+
+The following team members contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @JCQuintas, @michelengelen, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.18.0`
+
+- [DataGrid] Allow default event in the column action cell item click event handler (#20272) @arminmeh
+- [DataGrid] Remove unnecessary generic from `useGridApiRef` (#20277) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.18.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.18.0`.
+
+#### `@mui/x-data-grid-premium@8.18.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.18.0`, plus:
+
+- [DataGridPremium] Return the correct `cellParams` value from the aggregation cells (#20224) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.18.0`
+
+- [pickers] Keep invalid date state consistent (#20040) @michelengelen
+- [pickers] Adds new `source` property to `onChange` and `onAccept` context object (#20234) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.18.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.18.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.18.0`
+
+- [charts] Add prop for positioning a bar label (#20194) @Sigdriv
+- [charts] Fix applying dark mode styles in `ChartAxisZoomSliderThumb` (#20232) @sai6855
+
+#### `@mui/x-charts-pro@8.18.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.18.0`, plus:
+
+- [charts-pro] Allow specifying Content Security Policy nonce on export (#20053) @bernardobelchior
+- [charts-pro] Fix applying dark mode styles to slider (#20220) @sai6855
+- [charts-pro] Sankey should respect node order (#20065) @JCQuintas
+
+#### `@mui/x-charts-premium@8.18.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.18.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.18.0`
+
+- [tree view] Prepare tests for the new store structure (#20225) @flaviendelangle
+- [tree view] Prepare the item plugin files for the store migration (#20240) @flaviendelangle
+- [tree view] Use `TreeItemId` type instead of raw string (#20233) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.18.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.18.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.18.0`
+
+Internal changes.
+
+### Docs
+
+- [charts] Add a demo for a custom tick label (#20073) @prakhargupta1
+- [charts] Create `useAxes()` hook documentation page (#20229) @JCQuintas
+- [charts] Fix logo alignment (#20228) @JCQuintas
+- [charts] Fixes typo in import example (#20236) @htollefsen
+- [Data Grid] Add recipe for cursor pagination with data source (#19700) @siriwatknp
+- [Data Grid] Add a demo for pinned rows aggregation (#20198) @cherniavskii
+
+### Core
+
+- [docs-infra] Use deployment config from docs-infra package (#20243) @brijeshb42
+
 ## 8.17.0
 
 _Nov 5, 2025_

package/ChartsSurface/ChartsSurface.js

@@ -21,6 +21,7 @@ var _useStore = require("../internals/store/useStore");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _chartsSurfaceClasses = require("./chartsSurfaceClasses");
+var _useChartCartesianAxisRendering = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "title", "desc"];
 const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
@@ -40,7 +41,7 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
-  touchAction: 'pan-y',
+  touchAction: ownerState.hasZoom ? 'pan-y' : undefined,
   userSelect: 'none',
   gridArea: 'chart',
   '&:focus': {
@@ -81,6 +82,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
   const propsHeight = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
   const hasFocusedItem = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsHasFocusedItem);
+  const hasZoom = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartHasZoom);
   const svgRef = (0, _useSvgRef.useSvgRef)();
   const handleRef = (0, _useForkRef.default)(svgRef, ref);
   const themeProps = (0, _styles.useThemeProps)({
@@ -99,7 +101,8 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
     ownerState: {
       width: propsWidth,
-      height: propsHeight
+      height: propsHeight,
+      hasZoom
     },
     viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: (0, _clsx.default)(classes.root, className),

package/LineChart/seriesConfig/seriesProcessor.js

@@ -10,7 +10,6 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _warning = require("@mui/x-internals/warning");
 var _stackSeries = require("../../internals/stackSeries");
 var _defaultizeValueFormatter = require("../../internals/defaultizeValueFormatter");
-// For now it's a copy past of bar charts formatter, but maybe will diverge later
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -39,6 +38,20 @@ const seriesProcessor = (params, dataset) => {
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+        if (!dataKey) {
+          throw new Error([`MUI X Charts: line series with id='${id}' has no data and no dataKey.`, 'You must provide a dataKey when using the dataset prop.'].join('\n'));
+        }
+        dataset.forEach((entry, index) => {
+          const value = entry[dataKey];
+          if (value != null && typeof value !== 'number') {
+            (0, _warning.warnOnce)([`MUI X Charts: your dataset key "${dataKey}" is used for plotting lines, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.`, 'Line plots only support numeric and null values.'].join('\n'));
+          }
+        });
+      }
+    }
   });
   const completedSeries = {};
   stackingGroups.forEach(stackingGroup => {
@@ -61,15 +74,7 @@ const seriesProcessor = (params, dataset) => {
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
-          if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production') {
-              if (value !== null) {
-                (0, _warning.warnOnce)([`MUI X Charts: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
-              }
-            }
-            return null;
-          }
-          return value;
+          return typeof value === 'number' ? value : null;
         }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });

package/PieChart/PieArcPlot.js

@@ -47,9 +47,11 @@ function PieArcPlot(props) {
     data
   });
   const {
-    dataIndex: focusedIndex = -1
+    dataIndex,
+    seriesId,
+    seriesType
   } = (0, _useFocusedItem.useFocusedItem)() ?? {};
-  const focusedItem = focusedIndex !== -1 ? transformedData[focusedIndex] : null;
+  const focusedItem = dataIndex !== undefined && seriesId === id && seriesType === 'pie' ? transformedData[dataIndex] : null;
   if (data.length === 0) {
     return null;
   }
@@ -90,7 +92,7 @@ function PieArcPlot(props) {
       stroke: (theme.vars ?? theme).palette.text.primary,
       id: id,
       className: _PieArc.pieArcClasses.focusIndicator,
-      dataIndex: focusedIndex,
+      dataIndex: focusedItem.dataIndex,
       isFaded: false,
       isHighlighted: false,
       isFocused: false,

package/esm/BarChart/BarLabel/BarLabel.d.ts

@@ -26,8 +26,14 @@ export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' |
    * Height of the bar this label belongs to.
    */
   height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
 };
-declare function BarLabel(inProps: BarLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function BarLabel(inProps: BarLabelProps): React.JSX.Element;
 declare namespace BarLabel {
   var propTypes: any;
 }

package/esm/BarChart/BarLabel/BarLabel.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin"];
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -23,8 +23,6 @@ export const BarLabelComponent = styled('text', {
   stroke: 'none',
   fill: (theme.vars || theme)?.palette?.text?.primary,
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  textAnchor: 'middle',
-  dominantBaseline: 'central',
   pointerEvents: 'none',
   opacity: 1,
   [`&.${barLabelClasses.faded}`]: {
@@ -38,7 +36,40 @@ function BarLabel(inProps) {
   });
   const otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const animatedProps = useAnimateBarLabel(props);
-  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps, animatedProps));
+  const textAnchor = getTextAnchor(props);
+  const dominantBaseline = getDominantBaseline(props);
+  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline
+  }, otherProps, animatedProps));
+}
+function getTextAnchor({
+  placement,
+  layout,
+  xOrigin,
+  x
+}) {
+  if (placement === 'outside') {
+    if (layout === 'horizontal') {
+      return x < xOrigin ? 'end' : 'start';
+    }
+    return 'middle';
+  }
+  return 'middle';
+}
+function getDominantBaseline({
+  placement,
+  layout,
+  yOrigin,
+  y
+}) {
+  if (placement === 'outside') {
+    if (layout === 'horizontal') {
+      return 'central';
+    }
+    return y < yOrigin ? 'auto' : 'hanging';
+  }
+  return 'central';
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -54,6 +85,12 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement: PropTypes.oneOf(['center', 'outside']),
   seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   skipAnimation: PropTypes.bool.isRequired,
   /**

package/esm/BarChart/BarLabel/BarLabelItem.d.ts

@@ -67,6 +67,12 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
    * @returns {string} The formatted label.
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  barLabelPlacement?: BarLabelProps['placement'];
 };
 /**
  * @ignore - internal component.