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

package/models/seriesType/pie.d.ts

@@ -29,6 +29,13 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
      * @default '100%'
      */
     outerRadius?: number | string;
+    /**
+     * The radius between circle center and the arc label.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the maximal radius that fit into the drawing area.
+     * @default (innerRadius - outerRadius) / 2
+     */
+    arcLabelRadius?: number | string;
     /**
      * The radius applied to arc corners (similar to border radius).
      * @default 0
@@ -56,6 +63,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
     /**
      * The minimal angle required to display the arc label.
+     * @default 0
      */
     arcLabelMinAngle?: number;
     /**
@@ -85,6 +93,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
         outerRadius?: number;
         cornerRadius?: number;
         paddingAngle?: number;
+        arcLabelRadius?: number;
         color?: string;
     };
     /**
@@ -100,6 +109,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
         outerRadius?: number;
         cornerRadius?: number;
         paddingAngle?: number;
+        arcLabelRadius?: number;
         color?: string;
     };
 }
@@ -128,4 +138,9 @@ export interface ComputedPieRadius {
      * The radius between circle center and the end of the arc.
      */
     outerRadius: number;
+    /**
+     * The radius between circle center and the arc label in px.
+     * @default (innerRadius - outerRadius) / 2
+     */
+    arcLabelRadius?: number;
 }

package/modern/BarChart/BarChart.js

@@ -153,6 +153,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

package/modern/BarChart/BarPlot.js

@@ -69,18 +69,18 @@ const useCompletedData = () => {
       let baseScaleConfig;
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property.`);
         }
         baseScaleConfig = xAxisConfig;
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error(`MUI-X-Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`MUI-X-Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property`);
+          throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property.`);
         }
         baseScaleConfig = yAxisConfig;
       }

package/modern/BarChart/formatter.js

@@ -25,7 +25,7 @@ const formatter = (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'));
+      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'));
     }
   });
   const completedSeries = {};

package/modern/ChartsAxis/ChartsAxis.js

@@ -58,16 +58,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis);
   const rightId = getAxisId(rightAxis);
   if (topId !== null && !xAxis[topId]) {
-    throw Error([`MUI-X-Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error([`MUI-X-Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error([`MUI-X-Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error([`MUI-X-Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -5,13 +5,17 @@ import { ChartsXReferenceLine } from './ChartsXReferenceLine';
 import { ChartsYReferenceLine } from './ChartsYReferenceLine';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsReferenceLine(props) {
-  if (props.x !== undefined && props.y !== undefined) {
-    throw new Error('MUI-X-Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
+  const {
+    x,
+    y
+  } = props;
+  if (x !== undefined && y !== undefined) {
+    throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
   }
-  if (props.x === undefined && props.y === undefined) {
-    throw new Error('MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+  if (x === undefined && y === undefined) {
+    throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
-  if (props.x !== undefined) {
+  if (x !== undefined) {
     return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
   }
   return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));

package/modern/ChartsSurface.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
 import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,7 +11,7 @@ const ChartChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
 })(() => ({}));
-export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
+const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
   const {
       children,
       width,
@@ -38,4 +39,36 @@ export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurfac
       children: props.desc
     }), children]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  className: PropTypes.string,
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  /**
+   * The height of the chart in px.
+   */
+  height: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  /**
+   * The width of the chart in px.
+   */
+  width: PropTypes.number.isRequired
+} : void 0;
+export { ChartsSurface };

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -59,6 +59,8 @@ export const ChartsTooltipCell = styled('td', {
     paddingRight: theme.spacing(2)
   }
 }));
+
+// eslint-disable-next-line material-ui/no-styled-box
 export const ChartsTooltipMark = styled(Box, {
   name: 'MuiChartsTooltip',
   slot: 'Mark'

package/modern/LineChart/AreaPlot.js

@@ -62,10 +62,10 @@ function AreaPlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+            throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
         const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));

package/modern/LineChart/LineChart.js

@@ -117,6 +117,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * - 'none': display nothing.
    * - 'line': display a line at the current mouse position.
    * - 'band': display a band at the current mouse position. Only available with band scale.
+   * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -153,6 +154,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

package/modern/LineChart/LineHighlightPlot.js

@@ -70,7 +70,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
         if (xData === undefined) {
-          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale

package/modern/LineChart/LinePlot.js

@@ -61,10 +61,10 @@ function LinePlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
+            throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
         const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/modern/LineChart/MarkPlot.js

@@ -76,7 +76,7 @@ function MarkPlot(props) {
           return true;
         };
         if (xData === undefined) {
-          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot`);
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
         return xData?.map((x, index) => {
           const value = data[index] == null ? null : stackedData[index][1];

package/modern/LineChart/formatter.js

@@ -27,7 +27,7 @@ const formatter = (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'));
+      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'));
     }
   });
   const completedSeries = {};
@@ -54,7 +54,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/modern/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
   }));

package/modern/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';
@@ -27,8 +27,9 @@ function PieArcLabelPlot(props) {
   const {
       slots,
       slotProps,
-      innerRadius = 0,
+      innerRadius,
       outerRadius,
+      arcLabelRadius,
       cornerRadius = 0,
       paddingAngle = 0,
       id,
@@ -46,6 +47,7 @@ function PieArcLabelPlot(props) {
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     paddingAngle,
     id,
@@ -69,6 +71,7 @@ function PieArcLabelPlot(props) {
           paddingAngle: pA,
           innerRadius: iR,
           outerRadius: oR,
+          arcLabelRadius: aLR,
           cornerRadius: cR
         } = _ref,
         style = _objectWithoutPropertiesLoose(_ref, _excluded2);
@@ -78,6 +81,7 @@ function PieArcLabelPlot(props) {
         paddingAngle: pA,
         innerRadius: iR,
         outerRadius: oR,
+        arcLabelRadius: aLR,
         cornerRadius: cR,
         style: style,
         id: id,
@@ -100,8 +104,14 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
   /**
    * The minimal angle required to display the arc label.
+   * @default 0
    */
   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
@@ -120,9 +130,11 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   })).isRequired,
   /**
    * Override the arc attibutes when it is faded.
+   * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -134,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/modern/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';
@@ -87,6 +87,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
@@ -105,9 +110,11 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   })).isRequired,
   /**
    * Override the arc attibutes when it is faded.
+   * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -119,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/modern/PieChart/PieChart.js

@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
+   * @default null
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.string,
@@ -136,6 +136,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -157,7 +158,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
+   * @default null
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.string,
@@ -238,6 +239,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 +253,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 +262,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/modern/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 ?? availableRadius, availableRadius);
       const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
+      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
       const cx = getPercentageValue(cxParam ?? '50%', width);
       const cy = getPercentageValue(cyParam ?? '50%', height);
       return /*#__PURE__*/_jsx("g", {
@@ -97,6 +99,7 @@ function PiePlot(props) {
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,
+          arcLabelRadius: arcLabelRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

package/modern/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/modern/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;
@@ -38,21 +39,23 @@ export function useTransformData(series) {
       isHighlighted,
       isFaded
     } = getHighlightStatus(itemIndex);
-    const attibuesOverride = _extends({
+    const attributesOverride = _extends({
       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 _extends({}, 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 _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/modern/ResponsiveChartContainer/index.js

@@ -60,11 +60,11 @@ const useChartDimensions = (inWidth, inHeight) => {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI-X-Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI-X-Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       displayError.current = false;
     }
   }

package/modern/ScatterChart/ScatterChart.js

@@ -118,6 +118,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**