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

package/esm/PieChart/PieArcLabelPlot.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -29,8 +29,9 @@ function PieArcLabelPlot(props) {
   const {
       slots,
       slotProps,
-      innerRadius = 0,
+      innerRadius,
       outerRadius,
+      arcLabelRadius,
       cornerRadius = 0,
       paddingAngle = 0,
       id,
@@ -48,6 +49,7 @@ function PieArcLabelPlot(props) {
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     paddingAngle,
     id,
@@ -71,6 +73,7 @@ function PieArcLabelPlot(props) {
           paddingAngle: pA,
           innerRadius: iR,
           outerRadius: oR,
+          arcLabelRadius: aLR,
           cornerRadius: cR
         } = _ref,
         style = _objectWithoutPropertiesLoose(_ref, _excluded2);
@@ -80,6 +83,7 @@ function PieArcLabelPlot(props) {
         paddingAngle: pA,
         innerRadius: iR,
         outerRadius: oR,
+        arcLabelRadius: aLR,
         cornerRadius: cR,
         style: style,
         id: id,
@@ -104,6 +108,11 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    * The minimal angle required to display the arc label.
    */
   arcLabelMinAngle: PropTypes.number,
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius: PropTypes.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -125,6 +134,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -136,6 +146,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,

package/esm/PieChart/PieArcPlot.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -88,6 +88,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.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -109,6 +114,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -120,6 +126,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,

package/esm/PieChart/PieChart.js

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

package/esm/PieChart/PiePlot.js

@@ -79,6 +79,7 @@ function PiePlot(props) {
       const {
         innerRadius: innerRadiusParam,
         outerRadius: outerRadiusParam,
+        arcLabelRadius: arcLabelRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
@@ -90,6 +91,7 @@ function PiePlot(props) {
       } = series[seriesId];
       const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
       const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
       const cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
       const cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
@@ -97,6 +99,7 @@ function PiePlot(props) {
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          arcLabelRadius: arcLabelRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

package/esm/PieChart/dataTransform/transition.js

@@ -70,6 +70,7 @@ export const defaultLabelTransitionConfig = {
   from: ({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     startAngle,
     endAngle,
@@ -78,6 +79,7 @@ export const defaultLabelTransitionConfig = {
     innerRadius,
     outerRadius: (innerRadius + outerRadius) / 2,
     cornerRadius,
+    arcLabelRadius,
     startAngle: (startAngle + endAngle) / 2,
     endAngle: (startAngle + endAngle) / 2,
     paddingAngle,
@@ -90,6 +92,7 @@ export const defaultLabelTransitionConfig = {
   }) => ({
     innerRadius,
     outerRadius: innerRadius,
+    arcLabelRadius: innerRadius,
     startAngle: (startAngle + endAngle) / 2,
     endAngle: (startAngle + endAngle) / 2,
     opacity: 0
@@ -98,12 +101,14 @@ export const defaultLabelTransitionConfig = {
     innerRadius,
     outerRadius,
     startAngle,
-    endAngle
+    endAngle,
+    arcLabelRadius
   }) => ({
     innerRadius,
     outerRadius,
     startAngle,
     endAngle,
+    arcLabelRadius,
     opacity: 1
   }),
   update: ({
@@ -112,7 +117,8 @@ export const defaultLabelTransitionConfig = {
     cornerRadius,
     startAngle,
     endAngle,
-    paddingAngle
+    paddingAngle,
+    arcLabelRadius
   }) => ({
     innerRadius,
     outerRadius,
@@ -120,6 +126,7 @@ export const defaultLabelTransitionConfig = {
     startAngle,
     endAngle,
     paddingAngle,
+    arcLabelRadius,
     opacity: 1
   }),
   config: {

package/esm/PieChart/dataTransform/useTransformData.js

@@ -11,6 +11,7 @@ export function useTransformData(series) {
     highlighted,
     paddingAngle: basePaddingAngle = 0,
     innerRadius: baseInnerRadius = 0,
+    arcLabelRadius: baseArcLabelRadius,
     outerRadius: baseOuterRadius,
     cornerRadius: baseCornerRadius = 0
   } = series;
@@ -34,26 +35,28 @@ export function useTransformData(series) {
     };
   }, [highlightScope, highlightedItem, seriesId]);
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
-    var _attibuesOverride$pad, _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
+    var _attributesOverride$p, _attributesOverride$i, _attributesOverride$o, _attributesOverride$c, _ref, _attributesOverride$a;
     const {
       isHighlighted,
       isFaded
     } = getHighlightStatus(itemIndex);
-    const attibuesOverride = _extends({
+    const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, Math.PI * ((_attibuesOverride$pad = attibuesOverride.paddingAngle) != null ? _attibuesOverride$pad : basePaddingAngle) / 180);
-    const innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
-    const outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
-    const cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
-    return _extends({}, item, attibuesOverride, {
+    const paddingAngle = Math.max(0, Math.PI * ((_attributesOverride$p = attributesOverride.paddingAngle) != null ? _attributesOverride$p : basePaddingAngle) / 180);
+    const innerRadius = Math.max(0, (_attributesOverride$i = attributesOverride.innerRadius) != null ? _attributesOverride$i : baseInnerRadius);
+    const outerRadius = Math.max(0, (_attributesOverride$o = attributesOverride.outerRadius) != null ? _attributesOverride$o : baseOuterRadius + attributesOverride.additionalRadius);
+    const cornerRadius = (_attributesOverride$c = attributesOverride.cornerRadius) != null ? _attributesOverride$c : baseCornerRadius;
+    const arcLabelRadius = (_ref = (_attributesOverride$a = attributesOverride.arcLabelRadius) != null ? _attributesOverride$a : baseArcLabelRadius) != null ? _ref : (innerRadius + outerRadius) / 2;
+    return _extends({}, 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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.5
+ * @mui/x-charts v7.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/defaultizeColor.d.ts

@@ -9,6 +9,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     type: "pie";
     innerRadius?: string | number | undefined;
     outerRadius?: string | number | undefined;
+    arcLabelRadius?: string | number | undefined;
     cornerRadius?: number | undefined;
     startAngle?: number | undefined;
     endAngle?: number | undefined;
@@ -24,6 +25,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         paddingAngle?: number | undefined;
+        arcLabelRadius?: number | undefined;
         color?: string | undefined;
     } | undefined;
     faded?: {
@@ -32,6 +34,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         paddingAngle?: number | undefined;
+        arcLabelRadius?: number | undefined;
         color?: string | undefined;
     } | undefined;
     id?: string | undefined;

package/legacy/LineChart/formatter.js

@@ -54,7 +54,7 @@ var formatter = function formatter(params, dataset) {
               warnedOnce = true;
               console.error(["MUI-X charts: your dataset key \"".concat(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/legacy/PieChart/PieArcLabel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+var _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';
@@ -44,7 +44,7 @@ var PieArcLabelRoot = styled(animated.text, {
  * It's not an inline function because we need it in inerpolation.
  */
 var getLabelPosition = function getLabelPosition(formattedArcLabel, variable) {
-  return function (startAngle, endAngle, padAngle, innerRadius, outerRadius, cornerRadius) {
+  return function (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) {
     if (!formattedArcLabel) {
       return 0;
     }
@@ -52,8 +52,8 @@ var getLabelPosition = function getLabelPosition(formattedArcLabel, variable) {
         padAngle: padAngle,
         startAngle: startAngle,
         endAngle: endAngle,
-        innerRadius: innerRadius,
-        outerRadius: outerRadius
+        innerRadius: arcLabelRadius,
+        outerRadius: arcLabelRadius
       }),
       _ref3 = _slicedToArray(_ref2, 2),
       x = _ref3[0],
@@ -71,8 +71,7 @@ function PieArcLabel(props) {
     startAngle = props.startAngle,
     endAngle = props.endAngle,
     paddingAngle = props.paddingAngle,
-    innerRadius = props.innerRadius,
-    outerRadius = props.outerRadius,
+    arcLabelRadius = props.arcLabelRadius,
     cornerRadius = props.cornerRadius,
     formattedArcLabel = props.formattedArcLabel,
     isHighlighted = props.isHighlighted,
@@ -91,8 +90,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
   }));

package/legacy/PieChart/PieArcLabelPlot.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+var _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -28,9 +28,9 @@ function PieArcLabelPlot(props) {
   var _slots$pieArcLabel;
   var slots = props.slots,
     slotProps = props.slotProps,
-    _props$innerRadius = props.innerRadius,
-    innerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
+    innerRadius = props.innerRadius,
     outerRadius = props.outerRadius,
+    arcLabelRadius = props.arcLabelRadius,
     _props$cornerRadius = props.cornerRadius,
     cornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
     _props$paddingAngle = props.paddingAngle,
@@ -51,6 +51,7 @@ function PieArcLabelPlot(props) {
   var transformedData = useTransformData({
     innerRadius: innerRadius,
     outerRadius: outerRadius,
+    arcLabelRadius: arcLabelRadius,
     cornerRadius: cornerRadius,
     paddingAngle: paddingAngle,
     id: id,
@@ -73,6 +74,7 @@ function PieArcLabelPlot(props) {
         pA = _ref.paddingAngle,
         iR = _ref.innerRadius,
         oR = _ref.outerRadius,
+        aLR = _ref.arcLabelRadius,
         cR = _ref.cornerRadius,
         style = _objectWithoutProperties(_ref, _excluded2);
       return /*#__PURE__*/_jsx(ArcLabel, _extends({
@@ -81,6 +83,7 @@ function PieArcLabelPlot(props) {
         paddingAngle: pA,
         innerRadius: iR,
         outerRadius: oR,
+        arcLabelRadius: aLR,
         cornerRadius: cR,
         style: style,
         id: id,
@@ -105,6 +108,11 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    * The minimal angle required to display the arc label.
    */
   arcLabelMinAngle: PropTypes.number,
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius: PropTypes.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -126,6 +134,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -137,6 +146,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,

package/legacy/PieChart/PieArcPlot.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -55,6 +55,7 @@ function PieArcPlot(props) {
         endAngle = _ref.endAngle,
         pA = _ref.paddingAngle,
         iR = _ref.innerRadius,
+        arcLabelRadius = _ref.arcLabelRadius,
         oR = _ref.outerRadius,
         cR = _ref.cornerRadius,
         style = _objectWithoutProperties(_ref, _excluded2);
@@ -88,6 +89,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.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -109,6 +115,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -120,6 +127,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,

package/legacy/PieChart/PieChart.js

@@ -250,6 +250,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   series: PropTypes.arrayOf(PropTypes.shape({
     arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
     arcLabelMinAngle: PropTypes.number,
+    arcLabelRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -263,6 +264,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: PropTypes.number,
     faded: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      arcLabelRadius: PropTypes.number,
       color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
@@ -271,6 +273,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     }),
     highlighted: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      arcLabelRadius: PropTypes.number,
       color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,

package/legacy/PieChart/PiePlot.js

@@ -73,6 +73,7 @@ function PiePlot(props) {
       var _series$seriesId2 = series[seriesId],
         innerRadiusParam = _series$seriesId2.innerRadius,
         outerRadiusParam = _series$seriesId2.outerRadius,
+        arcLabelRadiusParam = _series$seriesId2.arcLabelRadius,
         cornerRadius = _series$seriesId2.cornerRadius,
         paddingAngle = _series$seriesId2.paddingAngle,
         arcLabel = _series$seriesId2.arcLabel,
@@ -83,6 +84,7 @@ function PiePlot(props) {
         highlightScope = _series$seriesId2.highlightScope;
       var outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
       var innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      var arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
       var cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
       var cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
@@ -90,6 +92,7 @@ function PiePlot(props) {
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          arcLabelRadius: arcLabelRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

package/legacy/PieChart/dataTransform/transition.js

@@ -78,6 +78,7 @@ export var defaultLabelTransitionConfig = {
   from: function from(_ref5) {
     var innerRadius = _ref5.innerRadius,
       outerRadius = _ref5.outerRadius,
+      arcLabelRadius = _ref5.arcLabelRadius,
       cornerRadius = _ref5.cornerRadius,
       startAngle = _ref5.startAngle,
       endAngle = _ref5.endAngle,
@@ -86,6 +87,7 @@ export var defaultLabelTransitionConfig = {
       innerRadius: innerRadius,
       outerRadius: (innerRadius + outerRadius) / 2,
       cornerRadius: cornerRadius,
+      arcLabelRadius: arcLabelRadius,
       startAngle: (startAngle + endAngle) / 2,
       endAngle: (startAngle + endAngle) / 2,
       paddingAngle: paddingAngle,
@@ -99,6 +101,7 @@ export var defaultLabelTransitionConfig = {
     return {
       innerRadius: innerRadius,
       outerRadius: innerRadius,
+      arcLabelRadius: innerRadius,
       startAngle: (startAngle + endAngle) / 2,
       endAngle: (startAngle + endAngle) / 2,
       opacity: 0
@@ -108,12 +111,14 @@ export var defaultLabelTransitionConfig = {
     var innerRadius = _ref7.innerRadius,
       outerRadius = _ref7.outerRadius,
       startAngle = _ref7.startAngle,
-      endAngle = _ref7.endAngle;
+      endAngle = _ref7.endAngle,
+      arcLabelRadius = _ref7.arcLabelRadius;
     return {
       innerRadius: innerRadius,
       outerRadius: outerRadius,
       startAngle: startAngle,
       endAngle: endAngle,
+      arcLabelRadius: arcLabelRadius,
       opacity: 1
     };
   },
@@ -123,7 +128,8 @@ export var defaultLabelTransitionConfig = {
       cornerRadius = _ref8.cornerRadius,
       startAngle = _ref8.startAngle,
       endAngle = _ref8.endAngle,
-      paddingAngle = _ref8.paddingAngle;
+      paddingAngle = _ref8.paddingAngle,
+      arcLabelRadius = _ref8.arcLabelRadius;
     return {
       innerRadius: innerRadius,
       outerRadius: outerRadius,
@@ -131,6 +137,7 @@ export var defaultLabelTransitionConfig = {
       startAngle: startAngle,
       endAngle: endAngle,
       paddingAngle: paddingAngle,
+      arcLabelRadius: arcLabelRadius,
       opacity: 1
     };
   },

package/legacy/PieChart/dataTransform/useTransformData.js

@@ -12,6 +12,7 @@ export function useTransformData(series) {
     basePaddingAngle = _series$paddingAngle === void 0 ? 0 : _series$paddingAngle,
     _series$innerRadius = series.innerRadius,
     baseInnerRadius = _series$innerRadius === void 0 ? 0 : _series$innerRadius,
+    baseArcLabelRadius = series.arcLabelRadius,
     baseOuterRadius = series.outerRadius,
     _series$cornerRadius = series.cornerRadius,
     baseCornerRadius = _series$cornerRadius === void 0 ? 0 : _series$cornerRadius;
@@ -35,26 +36,28 @@ export function useTransformData(series) {
   }, [highlightScope, highlightedItem, seriesId]);
   var dataWithHighlight = React.useMemo(function () {
     return data.map(function (item, itemIndex) {
-      var _attibuesOverride$pad, _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
+      var _attributesOverride$p, _attributesOverride$i, _attributesOverride$o, _attributesOverride$c, _ref, _attributesOverride$a;
       var _getHighlightStatus = getHighlightStatus(itemIndex),
         isHighlighted = _getHighlightStatus.isHighlighted,
         isFaded = _getHighlightStatus.isFaded;
-      var attibuesOverride = _extends({
+      var attributesOverride = _extends({
         additionalRadius: 0
       }, isFaded && faded || isHighlighted && highlighted || {});
-      var paddingAngle = Math.max(0, Math.PI * ((_attibuesOverride$pad = attibuesOverride.paddingAngle) != null ? _attibuesOverride$pad : basePaddingAngle) / 180);
-      var innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
-      var outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
-      var cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
-      return _extends({}, item, attibuesOverride, {
+      var paddingAngle = Math.max(0, Math.PI * ((_attributesOverride$p = attributesOverride.paddingAngle) != null ? _attributesOverride$p : basePaddingAngle) / 180);
+      var innerRadius = Math.max(0, (_attributesOverride$i = attributesOverride.innerRadius) != null ? _attributesOverride$i : baseInnerRadius);
+      var outerRadius = Math.max(0, (_attributesOverride$o = attributesOverride.outerRadius) != null ? _attributesOverride$o : baseOuterRadius + attributesOverride.additionalRadius);
+      var cornerRadius = (_attributesOverride$c = attributesOverride.cornerRadius) != null ? _attributesOverride$c : baseCornerRadius;
+      var arcLabelRadius = (_ref = (_attributesOverride$a = attributesOverride.arcLabelRadius) != null ? _attributesOverride$a : baseArcLabelRadius) != null ? _ref : (innerRadius + outerRadius) / 2;
+      return _extends({}, item, attributesOverride, {
         isFaded: isFaded,
         isHighlighted: isHighlighted,
         paddingAngle: paddingAngle,
         innerRadius: innerRadius,
         outerRadius: outerRadius,
-        cornerRadius: cornerRadius
+        cornerRadius: cornerRadius,
+        arcLabelRadius: arcLabelRadius
       });
     });
-  }, [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
+  }, [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
   return dataWithHighlight;
 }

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.5
+ * @mui/x-charts v7.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the