@mui/x-charts 7.0.0-alpha.5 → 7.0.0-alpha.7

package/CHANGELOG.md

@@ -3,6 +3,146 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.7
+
+_Jan 5, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 New component to create a Tree View from a structured data source:
+
+  You can now directly pass your data to the `RichTreeView` component instead of manually converting it into JSX `TreeItem` components:
+
+  ```tsx
+  const ITEMS = [
+    {
+      id: 'node-1',
+      label: 'Node 1',
+      children: [
+        { id: 'node-1-1', label: Node 1.1' },
+        { id: 'node-1-2', label: Node 1.2' },
+      ],
+    },
+    {
+      id: 'node-2',
+      label: 'Node 2',
+    },
+  ];
+  
+  <RichTreeView
+    items={MUI_X_PRODUCTS}
+    defaultCollapseIcon={<ExpandMoreIcon />}
+    defaultExpandIcon={<ChevronRightIcon />}
+  />
+  ```
+
+- 🌍 Improve Czech (cs-CZ) locale on the Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.0.0-alpha.7`
+
+- [DataGrid] Don't evaluate `hasEval` when `disableEval` is set (#11516) @reihwald
+- [DataGrid] follow warning message guideline for `autoPageSize` and `autoHeight` (#11585) @Sboonny
+- [DataGrid] Replace `eval` with `new Function` (#11557) @oliviertassinari
+- [DataGrid] Warn devs when `autoPageSize` is used with `autoHeight` (#11554) @Sboonny
+- [l10n] Improve Czech (cs-CZ) locale (#11526) @fdebef
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.7` [![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@7.0.0-alpha.7`.
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.7` [![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@7.0.0-alpha.7`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-alpha.7`
+
+- [pickers] Fix views management (#11419) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.7` [![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@7.0.0-alpha.7`.
+
+### Charts / `@mui/x-charts@7.0.0-alpha.7`
+
+- [charts] Add `arcLabelRadius` property (#11487) @alexfauquette
+- [charts] Fix `null` in line chart using dataset (#11550) @alexfauquette
+
+### Tree View
+
+#### Breaking changes
+
+- The expansion props have been renamed to better describe their behaviors:
+
+  | Old name          | New name                |
+  | :---------------- | :---------------------- |
+  | `onNodeToggle`    | `onExpandedNodesChange` |
+  | `expanded`        | `expandedNodes`         |
+  | `defaultExpanded` | `defaultExpandedNodes`  |
+
+  ```diff
+    <TreeView
+  -   onNodeToggle={handleExpansionChange}
+  +   onExpandedNodesChange={handleExpansionChange}
+  
+  -   expanded={expandedNodes}
+  +   expandedNodes={expandedNodes}
+  
+  -   defaultExpanded={defaultExpandedNodes}
+  +   defaultExpandedNodes={defaultExpandedNodes}
+    />
+  ```
+
+- The selection props have been renamed to better describe their behaviors:
+
+  | Old name          | New name                |
+  | :---------------- | :---------------------- |
+  | `onNodeSelect`    | `onSelectedNodesChange` |
+  | `selected`        | `selectedNodes`         |
+  | `defaultSelected` | `defaultSelectedNodes`  |
+
+  ```diff
+    <TreeView
+  -   onNodeSelect={handleSelectionChange}
+  +   onSelectedNodesChange={handleSelectionChange}
+
+  -   selected={selectedNodes}
+  +   selectedNodes={selectedNodes}
+
+  -   defaultSelected={defaultSelectedNodes}
+  +   defaultSelectedNodes={defaultSelectedNodes}
+    />
+  ```
+
+#### `@mui/x-tree-view@7.0.0-alpha.7`
+
+- [TreeView] Improve the expansion API (#11476) @flaviendelangle
+- [TreeView] Improve the selection API (#11560) @flaviendelangle
+- [TreeView] Introduce the `items` prop (#11059) @flaviendelangle
+
+### Docs
+
+- [docs] Add example for TreeView `onNodeExpansionToggle` prop (#11547) @flaviendelangle
+- [docs] Clarify Pickers usage with Luxon (#11545) @LukasTy
+- [docs] Complete transition to next branch (#11521) @oliviertassinari
+- [docs] Fix 404 links in the docs @oliviertassinari
+- [docs] Fix over page fetching @oliviertassinari
+- [docs] Lint `next.config.js` (#11514) @oliviertassinari
+
+### Core
+
+- [core] Fix release changelog (#11496) @romgrk
+- [core] Fix use of ::before & ::after (#11515) @oliviertassinari
+- [core] Localize the issue template to MUI X (#11511) @oliviertassinari
+- [core] Regen api files (#11542) @flaviendelangle
+- [core] Remove issue emoji @oliviertassinari
+- [core] Sync the release instructions with MUI Core @oliviertassinari
+- [core] Yaml format match most common convention @oliviertassinari
+
 ## 7.0.0-alpha.6
 
 _Dec 22, 2023_
@@ -65,7 +205,6 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.6`.
 - [fields] Adjust `PickersInput` sizing styles (#11392) @noraleonte
 - [fields] Fix section pasting (#11447) @LukasTy
 - [pickers] Add `PickersTextField` `standard` and `filled` variants (#11250) @noraleonte
-- [pickers] Add missing breaking changes to changelog (#11420) @MBilalShafi
 - [pickers] Cleanup error messages in `PickersSectionList` (#11449) @flaviendelangle
 - [pickers] Create new component `PickersSectionList` (#11352) @flaviendelangle
 
@@ -73,7 +212,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.6`.
 
 Same changes as in `@mui/x-date-pickers@7.0.0-alpha.6`.
 
-### Charts / `@mui/x-charts@7.0.0-alpha.6`
+### Charts / `@mui/x-charts@7.0.0-alpha.5`
 
 - [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
 - [charts] Improve dataset typing (#11372) @alexfauquette
@@ -88,6 +227,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.6`.
 
 ### Core
 
+- [core] Add missing breaking changes to changelog (#11420) @MBilalShafi
 - [core] Cherry pick follow up (#11469) @LukasTy
 - [core] Fix `cherry-pick` action (#11446) @LukasTy
 - [core] Fix security regressions in cherry-pick-next-to-master.yml (#11482) @MBilalShafi
@@ -1200,6 +1340,48 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.18.7
+
+_Jan 5, 2024_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Czech (cs-CZ) locale on Data Grid (#11429) @wensiet
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.7`
+
+- [DataGrid] Don't evaluate `hasEval` when `disableEval` is set (#11553) @reihwald
+- [l10n] Update Czech (cs-CZ) locale (#11498) @fdebef
+
+#### `@mui/x-data-grid-pro@6.18.7` [![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@6.18.7`.
+
+#### `@mui/x-data-grid-premium@6.18.7` [![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@6.18.7`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.7`
+
+- [pickers] Fix views management (@LukasTy) (#11572)
+
+#### `@mui/x-date-pickers-pro@6.18.7` [![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@6.18.7`.
+
+### Charts / `@mui/x-charts@6.18.7`
+
+- [charts] Fix `null` in line chart using dataset (@alexfauquette) (#11561)
+
+### Docs
+
+- [docs] Clarify Pickers usage with Luxon (#11566) @LukasTy
+
 ## 6.18.6
 
 _Dec 22, 2023_
@@ -1234,7 +1416,7 @@ Same changes as in `@mui/x-data-grid-pro@6.18.6`.
 
 Same changes as in `@mui/x-date-pickers@6.18.6`.
 
-### Charts / `@mui/x-charts@6.18.6`
+### Charts / `@mui/x-charts@6.18.4`
 
 - [charts] Allow percentage values for pie chart center and radius (#11464) @alexfauquette
 - [charts] Make error message more explicit (#11457) @alexfauquette

package/LineChart/formatter.js

@@ -61,7 +61,7 @@ const formatter = (params, dataset) => {
               warnedOnce = true;
               console.error([`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 0;
+            return null;
           }
           return value;
         }) : series[id].data,

package/PieChart/PieArcLabel.d.ts

@@ -23,6 +23,7 @@ export type PieArcLabelProps = PieArcLabelOwnerState & React.ComponentPropsWitho
     endAngle: SpringValue<number>;
     innerRadius: SpringValue<number>;
     outerRadius: SpringValue<number>;
+    arcLabelRadius: SpringValue<number>;
     cornerRadius: SpringValue<number>;
     paddingAngle: SpringValue<number>;
 } & {

package/PieChart/PieArcLabel.js

@@ -18,7 +18,7 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getPieArcLabelUtilityClass(slot) {
@@ -52,7 +52,7 @@ const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
  * Helper to compute label position.
  * It's not an inline function because we need it in inerpolation.
  */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, innerRadius, outerRadius, cornerRadius) => {
+const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
   if (!formattedArcLabel) {
     return 0;
   }
@@ -60,8 +60,8 @@ const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle,
     padAngle,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius
   });
   if (variable === 'x') {
     return x;
@@ -76,8 +76,7 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -97,8 +96,8 @@ function PieArcLabel(props) {
     className: classes.root
   }, other, {
     style: (0, _extends2.default)({
-      x: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-      y: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+      x: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+      y: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
     }, style),
     children: formattedArcLabel
   }));

package/PieChart/PieArcLabelPlot.js

@@ -14,8 +14,8 @@ var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RATIO = 180 / Math.PI;
@@ -36,8 +36,9 @@ function PieArcLabelPlot(props) {
   const {
       slots,
       slotProps,
-      innerRadius = 0,
+      innerRadius,
       outerRadius,
+      arcLabelRadius,
       cornerRadius = 0,
       paddingAngle = 0,
       id,
@@ -55,6 +56,7 @@ function PieArcLabelPlot(props) {
   const transformedData = (0, _useTransformData.useTransformData)({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     paddingAngle,
     id,
@@ -78,6 +80,7 @@ function PieArcLabelPlot(props) {
           paddingAngle: pA,
           innerRadius: iR,
           outerRadius: oR,
+          arcLabelRadius: aLR,
           cornerRadius: cR
         } = _ref,
         style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
@@ -87,6 +90,7 @@ function PieArcLabelPlot(props) {
         paddingAngle: pA,
         innerRadius: iR,
         outerRadius: oR,
+        arcLabelRadius: aLR,
         cornerRadius: cR,
         style: style,
         id: id,
@@ -111,6 +115,11 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    * The minimal angle required to display the arc label.
    */
   arcLabelMinAngle: _propTypes.default.number,
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius: _propTypes.default.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -132,6 +141,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   faded: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,
@@ -143,6 +153,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   highlighted: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,

package/PieChart/PieArcPlot.js

@@ -15,7 +15,7 @@ var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function PieArcPlot(props) {
@@ -96,6 +96,11 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius: _propTypes.default.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -117,6 +122,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   faded: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,
@@ -128,6 +134,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   highlighted: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,

package/PieChart/PieChart.js

@@ -246,6 +246,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
     arcLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['formattedValue', 'label', 'value']), _propTypes.default.func]),
     arcLabelMinAngle: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     cx: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -259,6 +260,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: _propTypes.default.number,
     faded: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      arcLabelRadius: _propTypes.default.number,
       color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,
@@ -267,6 +269,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     }),
     highlighted: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      arcLabelRadius: _propTypes.default.number,
       color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,

package/PieChart/PiePlot.js

@@ -87,6 +87,7 @@ function PiePlot(props) {
       const {
         innerRadius: innerRadiusParam,
         outerRadius: outerRadiusParam,
+        arcLabelRadius: arcLabelRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
@@ -98,6 +99,7 @@ function PiePlot(props) {
       } = series[seriesId];
       const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _utils.getPercentageValue)(arcLabelRadiusParam, availableRadius);
       const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
       const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
@@ -105,6 +107,7 @@ function PiePlot(props) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,
+          arcLabelRadius: arcLabelRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

package/PieChart/dataTransform/transition.js

@@ -76,6 +76,7 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
   from: ({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     startAngle,
     endAngle,
@@ -84,6 +85,7 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
     innerRadius,
     outerRadius: (innerRadius + outerRadius) / 2,
     cornerRadius,
+    arcLabelRadius,
     startAngle: (startAngle + endAngle) / 2,
     endAngle: (startAngle + endAngle) / 2,
     paddingAngle,
@@ -96,6 +98,7 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
   }) => ({
     innerRadius,
     outerRadius: innerRadius,
+    arcLabelRadius: innerRadius,
     startAngle: (startAngle + endAngle) / 2,
     endAngle: (startAngle + endAngle) / 2,
     opacity: 0
@@ -104,12 +107,14 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
     innerRadius,
     outerRadius,
     startAngle,
-    endAngle
+    endAngle,
+    arcLabelRadius
   }) => ({
     innerRadius,
     outerRadius,
     startAngle,
     endAngle,
+    arcLabelRadius,
     opacity: 1
   }),
   update: ({
@@ -118,7 +123,8 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
     cornerRadius,
     startAngle,
     endAngle,
-    paddingAngle
+    paddingAngle,
+    arcLabelRadius
   }) => ({
     innerRadius,
     outerRadius,
@@ -126,6 +132,7 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
     startAngle,
     endAngle,
     paddingAngle,
+    arcLabelRadius,
     opacity: 1
   }),
   config: {

package/PieChart/dataTransform/useTransformData.d.ts

@@ -2,6 +2,7 @@ import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType }
 export interface AnimatedObject {
     innerRadius: number;
     outerRadius: number;
+    arcLabelRadius: number;
     cornerRadius: number;
     startAngle: number;
     endAngle: number;

package/PieChart/dataTransform/useTransformData.js

@@ -20,6 +20,7 @@ function useTransformData(series) {
     highlighted,
     paddingAngle: basePaddingAngle = 0,
     innerRadius: baseInnerRadius = 0,
+    arcLabelRadius: baseArcLabelRadius,
     outerRadius: baseOuterRadius,
     cornerRadius: baseCornerRadius = 0
   } = series;
@@ -47,21 +48,23 @@ function useTransformData(series) {
       isHighlighted,
       isFaded
     } = getHighlightStatus(itemIndex);
-    const attibuesOverride = (0, _extends2.default)({
+    const attributesOverride = (0, _extends2.default)({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, Math.PI * (attibuesOverride.paddingAngle ?? basePaddingAngle) / 180);
-    const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius);
-    const outerRadius = Math.max(0, attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius);
-    const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius;
-    return (0, _extends2.default)({}, item, attibuesOverride, {
+    const paddingAngle = Math.max(0, Math.PI * (attributesOverride.paddingAngle ?? basePaddingAngle) / 180);
+    const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
+    const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
+    const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
+    const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
+    return (0, _extends2.default)({}, item, attributesOverride, {
       isFaded,
       isHighlighted,
       paddingAngle,
       innerRadius,
       outerRadius,
-      cornerRadius
+      cornerRadius,
+      arcLabelRadius
     });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
   return dataWithHighlight;
 }

package/esm/LineChart/formatter.js

@@ -58,7 +58,7 @@ const formatter = (params, dataset) => {
               warnedOnce = true;
               console.error([`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 0;
+            return null;
           }
           return value;
         }) : series[id].data,

package/esm/PieChart/PieArcLabel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';
@@ -41,7 +41,7 @@ const PieArcLabelRoot = styled(animated.text, {
  * Helper to compute label position.
  * It's not an inline function because we need it in inerpolation.
  */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, innerRadius, outerRadius, cornerRadius) => {
+const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
   if (!formattedArcLabel) {
     return 0;
   }
@@ -49,8 +49,8 @@ const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle,
     padAngle,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius
   });
   if (variable === 'x') {
     return x;
@@ -65,8 +65,7 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -86,8 +85,8 @@ function PieArcLabel(props) {
     className: classes.root
   }, other, {
     style: _extends({
-      x: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-      y: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+      x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+      y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
     }, style),
     children: formattedArcLabel
   }));