@mui/x-charts 8.18.0 → 8.20.0

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/CHANGELOG.md

@@ -5,6 +5,181 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.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.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.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.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.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.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.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.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
+## 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 -->

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -8,11 +8,15 @@ exports.ChartsGridHorizontal = ChartsGridHorizontal;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
 function ChartsGridHorizontal(props) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     axis,
     start,
@@ -34,7 +38,7 @@ function ChartsGridHorizontal(props) {
     children: yTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
+    }) => !instance.isYInside(offset) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: offset,
       y2: offset,
       x1: start,

package/ChartsGrid/ChartsVerticalGrid.js

@@ -8,11 +8,15 @@ exports.ChartsGridVertical = ChartsGridVertical;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
 function ChartsGridVertical(props) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     axis,
     start,
@@ -34,7 +38,7 @@ function ChartsGridVertical(props) {
     children: xTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
+    }) => !instance.isXInside(offset) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: start,
       y2: end,
       x1: offset,

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/ChartsTooltip/ChartsTooltipContainer.js

@@ -92,7 +92,7 @@ function ChartsTooltipContainer(inProps) {
   const isOpen = (0, _useSelector.useSelector)(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
   const lastInteraction = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = (0, _useSelector.useSelector)(store, trigger === 'item' && computedAnchor === 'node' ? _useChartInteraction.selectorChartsTooltipItemPosition : () => null, [position]);
+  const itemPosition = (0, _useSelector.useSelector)(store, trigger === 'item' && computedAnchor === 'node' ? _useChartInteraction.selectorChartsTooltipItemPosition : () => null, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

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/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -16,7 +16,7 @@ var _useRadarSeriesData = require("./useRadarSeriesData");
 var _getAreaPath = require("./getAreaPath");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
-var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick"];
@@ -54,7 +54,7 @@ function RadarSeriesArea(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(seriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
-  const interactionProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(seriesCoordinates);
+  const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const {
     isFaded,
     isHighlighted

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -8,7 +8,7 @@ exports.RadarSeriesPlot = RadarSeriesPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
-var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _RadarSeriesArea = require("./RadarSeriesArea");
@@ -24,7 +24,7 @@ function RadarSeriesPlot(props) {
   } = props;
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(inSeriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
-  const interactionProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(seriesCoordinates);
+  const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const {
     isFaded,
     isHighlighted

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SeriesItemIdentifierWithData } from "../../models/seriesType/index.js";
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<"radar">[], skip?: boolean) => {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+}[];

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInteractionAllItemProps = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+const useInteractionAllItemProps = (data, skip) => {
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const results = React.useMemo(() => {
+    return data.map(item => {
+      return skip ? {} : (0, _useInteractionItemProps.getInteractionItemProps)(instance, {
+        type: 'radar',
+        seriesId: item.seriesId,
+        dataIndex: item.dataIndex
+      });
+    });
+  }, [data, instance, skip]);
+  return results;
+};
+exports.useInteractionAllItemProps = useInteractionAllItemProps;

package/esm/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -27,6 +27,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') {
+            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 => {
@@ -52,15 +66,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) {
-                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/esm/ChartsGrid/ChartsHorizontalGrid.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
 import { GridLine } from "./styledComponents.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 export function ChartsGridHorizontal(props) {
+  const {
+    instance
+  } = useChartContext();
   const {
     axis,
     start,
@@ -27,7 +31,7 @@ export function ChartsGridHorizontal(props) {
     children: yTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
+    }) => !instance.isYInside(offset) ? null : /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
       x1: start,

package/esm/ChartsGrid/ChartsVerticalGrid.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
 import { GridLine } from "./styledComponents.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 export function ChartsGridVertical(props) {
+  const {
+    instance
+  } = useChartContext();
   const {
     axis,
     start,
@@ -27,7 +31,7 @@ export function ChartsGridVertical(props) {
     children: xTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
+    }) => !instance.isXInside(offset) ? null : /*#__PURE__*/_jsx(GridLine, {
       y1: start,
       y2: end,
       x1: offset,

package/esm/ChartsSurface/ChartsSurface.js

@@ -15,6 +15,7 @@ import { useStore } from "../internals/store/useStore.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth, selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useUtilityClasses } from "./chartsSurfaceClasses.js";
+import { selectorChartHasZoom } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -33,7 +34,7 @@ const ChartsSurfaceStyles = 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': {
@@ -74,6 +75,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   const propsHeight = useSelector(store, selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = useSelector(store, selectorChartsIsKeyboardNavigationEnabled);
   const hasFocusedItem = useSelector(store, selectorChartsHasFocusedItem);
+  const hasZoom = useSelector(store, selectorChartHasZoom);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
@@ -92,7 +94,8 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
     ownerState: {
       width: propsWidth,
-      height: propsHeight
+      height: propsHeight,
+      hasZoom
     },
     viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: clsx(classes.root, className),

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -85,7 +85,7 @@ function ChartsTooltipContainer(inProps) {
   const isOpen = useSelector(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
   const lastInteraction = useSelector(store, selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : () => null, [position]);
+  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : () => null, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

package/esm/LineChart/seriesConfig/seriesProcessor.js

@@ -3,7 +3,6 @@ import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../../internals/stackSeries.js";
 import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
-// For now it's a copy past of bar charts formatter, but maybe will diverge later
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -32,6 +31,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') {
+            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 => {
@@ -54,15 +67,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) {
-                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])
       });