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

package/LineChart/LineChart.js

@@ -125,6 +125,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.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
@@ -161,6 +162,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**

package/LineChart/LineHighlightPlot.js

@@ -79,7 +79,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
         if (xData === undefined) {
-          throw new Error(`MUI-X-Charts: ${xAxisKey === _constants.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 === _constants.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/LineChart/LinePlot.js

@@ -70,10 +70,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 === _constants.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 === _constants.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 = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/LineChart/MarkPlot.js

@@ -85,7 +85,7 @@ function MarkPlot(props) {
           return true;
         };
         if (xData === undefined) {
-          throw new Error(`MUI-X-Charts: ${xAxisKey === _constants.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 === _constants.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/LineChart/formatter.js

@@ -34,7 +34,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 = {};
@@ -61,7 +61,7 @@ const formatter = (params, dataset) => {
               warnedOnce = true;
               console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
             }
-            return 0;
+            return null;
           }
           return value;
         }) : series[id].data,

package/PieChart/PieArcLabel.d.ts

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

package/PieChart/PieArcLabel.js

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

package/PieChart/PieArcLabelPlot.d.ts

@@ -8,6 +8,11 @@ export interface PieArcLabelPlotSlotProps {
     pieArcLabel?: Partial<PieArcLabelProps>;
 }
 export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
+    /**
+     * Override the arc attibutes when it is faded.
+     * @default { additionalRadius: -5 }
+     */
+    faded?: DefaultizedPieSeriesType['faded'];
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PieArcLabelPlot.js

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

package/PieChart/PieArcPlot.d.ts

@@ -8,6 +8,11 @@ export interface PieArcPlotSlotProps {
     pieArc?: Partial<PieArcProps>;
 }
 export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
+    /**
+     * Override the arc attibutes when it is faded.
+     * @default { additionalRadius: -5 }
+     */
+    faded?: DefaultizedPieSeriesType['faded'];
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PieArcPlot.js

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

package/PieChart/PieChart.d.ts

@@ -8,12 +8,24 @@ import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
-import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
+import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
 export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+    /**
+     * Indicate which axis to display the bottom of the charts.
+     * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
+     * @default null
+     */
+    bottomAxis?: null | string | ChartsXAxisProps;
+    /**
+     * Indicate which axis to display the left of the charts.
+     * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
+     * @default null
+     */
+    leftAxis?: null | string | ChartsYAxisProps;
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;

package/PieChart/PieChart.js

@@ -116,7 +116,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.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.string,
@@ -144,6 +144,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**
@@ -165,7 +166,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.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.string,
@@ -246,6 +247,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
     arcLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['formattedValue', 'label', 'value']), _propTypes.default.func]),
     arcLabelMinAngle: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     cx: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -259,6 +261,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: _propTypes.default.number,
     faded: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      arcLabelRadius: _propTypes.default.number,
       color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,
@@ -267,6 +270,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     }),
     highlighted: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      arcLabelRadius: _propTypes.default.number,
       color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,

package/PieChart/PiePlot.js

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

package/PieChart/dataTransform/transition.js

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

package/PieChart/dataTransform/useTransformData.d.ts

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

package/PieChart/dataTransform/useTransformData.js

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

package/ResponsiveChartContainer/index.js

@@ -69,11 +69,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/ScatterChart/ScatterChart.js

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

package/SparkLineChart/SparkLineChart.d.ts

@@ -5,6 +5,7 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType/line';
+import { CardinalDirections } from '../models/layout';
 import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot';
 import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot';
 import { MarkPlotSlots, MarkPlotSlotProps } from '../LineChart/MarkPlot';
@@ -14,7 +15,7 @@ export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkP
 }
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {
 }
-export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis'> {
+export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'margin'> {
     /**
      * The xAxis configuration.
      * Notice it is a single configuration object, not an array of configuration.
@@ -35,6 +36,7 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
      * Formatter used by the tooltip.
      * @param {number} value The value to format.
      * @returns {string} the formatted value.
+     * @default (v: number) => v.toString()
      */
     valueFormatter?: (value: number) => string;
     /**
@@ -59,6 +61,18 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
      * @default 'linear'
      */
     curve?: LineSeriesType['curve'];
+    /**
+     * The margin between the SVG and the drawing area.
+     * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+     * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+     * @default {
+     *   top: 5,
+     *   bottom: 5,
+     *   left: 5,
+     *   right: 5,
+     * }
+     */
+    margin?: Partial<CardinalDirections<number>>;
     /**
      * Overridable component slots.
      * @default {}

package/SparkLineChart/SparkLineChart.js

@@ -128,6 +128,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**
@@ -158,7 +159,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
+   * @default {
+   *   top: 5,
+   *   bottom: 5,
+   *   left: 5,
+   *   right: 5,
+   * }
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -207,6 +213,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
+   * @default (v: number) => v.toString()
    */
   valueFormatter: _propTypes.default.func,
   viewBox: _propTypes.default.shape({

package/context/CartesianContextProvider.d.ts

@@ -50,7 +50,7 @@ export declare const CartesianContext: React.Context<{
  *
  * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
  */
-declare function CartesianContextProvider({ xAxis: inXAxis, yAxis: inYAxis, dataset, children, }: CartesianContextProviderProps): React.JSX.Element;
+declare function CartesianContextProvider(props: CartesianContextProviderProps): React.JSX.Element;
 declare namespace CartesianContextProvider {
     var propTypes: any;
 }

package/context/CartesianContextProvider.js

@@ -48,12 +48,13 @@ const CartesianContext = exports.CartesianContext = /*#__PURE__*/React.createCon
  *
  * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
  */
-function CartesianContextProvider({
-  xAxis: inXAxis,
-  yAxis: inYAxis,
-  dataset,
-  children
-}) {
+function CartesianContextProvider(props) {
+  const {
+    xAxis: inXAxis,
+    yAxis: inYAxis,
+    dataset,
+    children
+  } = props;
   const formattedSeries = React.useContext(_SeriesContextProvider.SeriesContext);
   const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
   const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
@@ -62,7 +63,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI X Charts: x-axis uses `dataKey` but no `dataset` is provided.');
     }
     return (0, _extends2.default)({}, axisConfig, {
       data: dataset.map(d => d[dataKey])
@@ -74,7 +75,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI X Charts: y-axis uses `dataKey` but no `dataset` is provided.');
     }
     return (0, _extends2.default)({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/context/DrawingProvider.d.ts

@@ -40,7 +40,7 @@ export declare const SVGContext: React.Context<React.RefObject<SVGSVGElement>>;
  *
  * - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
  */
-declare function DrawingProvider({ width, height, margin, svgRef, children }: DrawingProviderProps): React.JSX.Element;
+declare function DrawingProvider(props: DrawingProviderProps): React.JSX.Element;
 declare namespace DrawingProvider {
     var propTypes: any;
 }