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

package/internals/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getPercentageValue = getPercentageValue;
 exports.getSVGPoint = getSVGPoint;
 exports.getSymbol = getSymbol;
 // Returns the index of a defined shape
@@ -20,4 +21,33 @@ function getSVGPoint(svg, event) {
   pt.x = event.clientX;
   pt.y = event.clientY;
   return pt.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+/**
+ * Helper that converts values and percentages into values.
+ * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
+ * @param refValue The numerical value associated to 100%.
+ * @returns The numerical value associated to the provided value.
+ */
+function getPercentageValue(value, refValue) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (value === '100%') {
+    // Avoid potential rounding issues
+    return refValue;
+  }
+  if (value.endsWith('%')) {
+    const percentage = Number.parseFloat(value.slice(0, value.length - 1));
+    if (!Number.isNaN(percentage)) {
+      return percentage * refValue / 100;
+    }
+  }
+  if (value.endsWith('px')) {
+    const val = Number.parseFloat(value.slice(0, value.length - 2));
+    if (!Number.isNaN(val)) {
+      return val;
+    }
+  }
+  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/legacy/BarChart/BarPlot.js

@@ -9,7 +9,8 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -19,6 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize(_ref) {
   var W = _ref.bandWidth,
     N = _ref.numberOfGroups,
@@ -64,18 +66,18 @@ var useCompletedData = function useCompletedData() {
       var baseScaleConfig;
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " shoud have data property"));
         }
         baseScaleConfig = xAxisConfig;
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          throw new Error("MUI-X-Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          throw new Error("MUI-X-Charts: ".concat(yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : "The y-axis with id \"".concat(yAxisKey, "\""), " shoud have data property"));
         }
         baseScaleConfig = yAxisConfig;
       }

package/legacy/BarChart/formatter.js

@@ -4,13 +4,15 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+var warnOnce = false;
 var formatter = function formatter(params, dataset) {
+  var _ref;
   var seriesOrder = params.seriesOrder,
     series = params.series;
   var stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  var d3Dataset = dataset != null ? dataset : [];
+  var d3Dataset = (_ref = dataset) != null ? _ref : [];
   seriesOrder.forEach(function (id) {
     var data = series[id].data;
     if (data !== undefined) {
@@ -22,7 +24,7 @@ var formatter = function formatter(params, dataset) {
         }
       });
     } else if (dataset === undefined) {
-      throw new Error(["MUI: bar series with id='".concat(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='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   var completedSeries = {};
@@ -35,19 +37,31 @@ var formatter = function formatter(params, dataset) {
       // Use dataKey if needed and available
       var dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value(function (d, key) {
+      var _d$key;
+      return (_d$key = d[key]) != null ? _d$key : 0;
+    }) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
       var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
         layout: 'vertical'
       }, series[id], {
-        data: dataKey ? dataset.map(function (d) {
-          return d[dataKey];
+        data: dataKey ? dataset.map(function (data) {
+          var value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
+              warnOnce = true;
+              console.error(["MUI-X charts: your dataset key \"".concat(dataKey, "\" is used for plotting bars, but contains nonnumerical elements."), 'Bar plots only support numbers and null values.']);
+            }
+            return 0;
+          }
+          return value;
         }) : series[id].data,
-        stackedData: stackedSeries[index].map(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            a = _ref2[0],
-            b = _ref2[1];
+        stackedData: stackedSeries[index].map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            a = _ref3[0],
+            b = _ref3[1];
           return [a, b];
         })
       });

package/legacy/ChartsAxis/ChartsAxis.js

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

package/legacy/ChartsLegend/ChartsLegend.js

@@ -13,7 +13,8 @@ import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getLegendUtilityClass } from './chartsLegendClasses';
-import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {

package/legacy/ChartsReferenceLine/ChartsReferenceLine.js

@@ -6,10 +6,10 @@ 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: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    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: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error('MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
   if (props.x !== undefined) {
     return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));

package/legacy/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { useDrawingArea, useXScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/legacy/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { useDrawingArea, useYScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/legacy/{internals/components → ChartsText}/ChartsText.js

@@ -1,35 +1,26 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["x", "y", "style", "text", "ownerState"],
   _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 import * as React from 'react';
-import { getStringSize } from '../domUtils';
+import PropTypes from 'prop-types';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getWordsByLines(_ref) {
-  var style = _ref.style,
-    needsComputation = _ref.needsComputation,
-    text = _ref.text;
-  return text.split('\n').map(function (subText) {
-    return _extends({
-      text: subText
-    }, needsComputation ? getStringSize(subText, style) : {
-      width: 0,
-      height: 0
-    });
-  });
-}
-export function ChartsText(props) {
+/**
+ * Helper component to manage multiline text in SVG
+ */
+function ChartsText(props) {
   var x = props.x,
     y = props.y,
     styleProps = props.style,
     text = props.text,
     ownerState = props.ownerState,
     textProps = _objectWithoutProperties(props, _excluded);
-  var _ref2 = styleProps != null ? styleProps : {},
-    angle = _ref2.angle,
-    textAnchor = _ref2.textAnchor,
-    dominantBaseline = _ref2.dominantBaseline,
-    style = _objectWithoutProperties(_ref2, _excluded2);
+  var _ref = styleProps != null ? styleProps : {},
+    angle = _ref.angle,
+    textAnchor = _ref.textAnchor,
+    dominantBaseline = _ref.dominantBaseline,
+    style = _objectWithoutProperties(_ref, _excluded2);
   var wordsByLines = React.useMemo(function () {
     return getWordsByLines({
       style: style,
@@ -76,4 +67,29 @@ export function ChartsText(props) {
       }, index);
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsText.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Height of a text line (in `em`).
+   */
+  lineHeight: PropTypes.number,
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation: PropTypes.bool,
+  ownerState: PropTypes.any,
+  /**
+   * Style applied to text elements.
+   */
+  style: PropTypes.object,
+  /**
+   * Text displayed.
+   */
+  text: PropTypes.string.isRequired
+} : void 0;
+export { ChartsText };

package/legacy/ChartsText/index.js

@@ -0,0 +1 @@
+export { ChartsText } from './ChartsText';

package/legacy/ChartsXAxis/ChartsXAxis.js

@@ -12,9 +12,10 @@ import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {

package/legacy/ChartsYAxis/ChartsYAxis.js

@@ -10,7 +10,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/legacy/LineChart/AreaPlot.js

@@ -9,6 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { AreaElement } from './AreaElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -56,10 +57,10 @@ function AreaPlot(props) {
         var xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot."));
+            throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
           }
           if (xData.length < stackedData.length) {
-            throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)"));
+            throw new Error("MUI-X-Charts: The data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)"));
           }
         }
         var areaPath = d3Area().x(function (d) {

package/legacy/LineChart/LineHighlightPlot.js

@@ -8,6 +8,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineHighlightElement } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -63,7 +64,7 @@ function LineHighlightPlot(props) {
         var yScale = yAxis[yAxisKey].scale;
         var xData = xAxis[xAxisKey].data;
         if (xData === undefined) {
-          throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot."));
+          throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot."));
         }
         var x = xScale(xData[highlightedIndex]);
         var y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale

package/legacy/LineChart/LinePlot.js

@@ -9,6 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { LineElement } from './LineElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -55,10 +56,10 @@ function LinePlot(props) {
         var xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
+            throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot"));
           }
           if (xData.length < stackedData.length) {
-            throw new Error("MUI: data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)"));
+            throw new Error("MUI-X-Charts: The data length of the x axis (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)"));
           }
         }
         var linePath = d3Line().x(function (d) {

package/legacy/LineChart/MarkPlot.js

@@ -8,6 +8,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -71,7 +72,7 @@ function MarkPlot(props) {
           return true;
         };
         if (xData === undefined) {
-          throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot"));
+          throw new Error("MUI-X-Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(xAxisKey, "\""), " should have data property to be able to display a line plot"));
         }
         return xData == null ? void 0 : xData.map(function (x, index) {
           var value = data[index] == null ? null : stackedData[index][1];

package/legacy/LineChart/formatter.js

@@ -4,14 +4,17 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+var warnedOnce = false;
+
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 var formatter = function formatter(params, dataset) {
+  var _ref;
   var seriesOrder = params.seriesOrder,
     series = params.series;
   var stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  var d3Dataset = dataset != null ? dataset : [];
+  var d3Dataset = (_ref = dataset) != null ? _ref : [];
   seriesOrder.forEach(function (id) {
     var data = series[id].data;
     if (data !== undefined) {
@@ -23,7 +26,7 @@ var formatter = function formatter(params, dataset) {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error(["MUI: line series with id='".concat(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='".concat(id, "' has no data."), 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   var completedSeries = {};
@@ -44,13 +47,21 @@ var formatter = function formatter(params, dataset) {
     ids.forEach(function (id, index) {
       var dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
-        data: dataKey ? dataset.map(function (d) {
-          return d[dataKey];
+        data: dataKey ? dataset.map(function (data) {
+          var value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
+              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 null;
+          }
+          return value;
         }) : series[id].data,
-        stackedData: stackedSeries[index].map(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            a = _ref2[0],
-            b = _ref2[1];
+        stackedData: stackedSeries[index].map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            a = _ref3[0],
+            b = _ref3[1];
           return [a, b];
         })
       });

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,
@@ -155,7 +165,6 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   innerRadius: PropTypes.number,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: PropTypes.number.isRequired,
   /**

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,
@@ -145,7 +153,6 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   onClick: PropTypes.func,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: PropTypes.number.isRequired,
   /**