@mui/x-charts 6.18.2 → 6.18.4

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -11,9 +11,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";
 const useUtilityClasses = ownerState => {

package/esm/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";
@@ -75,6 +75,8 @@ function ChartsYAxis(inProps) {
     tickFontSize,
     label,
     labelFontSize,
+    labelStyle,
+    tickLabelStyle,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -109,11 +111,11 @@ function ChartsYAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
     additionalProps: {
-      style: {
+      style: _extends({
         fontSize: tickFontSize,
         textAnchor: position === 'right' ? 'start' : 'end',
         dominantBaseline: 'central'
-      },
+      }, tickLabelStyle),
       className: classes.tickLabel
     },
     ownerState: {}
@@ -122,12 +124,12 @@ function ChartsYAxis(inProps) {
     elementType: Label,
     externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
     additionalProps: {
-      style: {
+      style: _extends({
         fontSize: labelFontSize,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
-      }
+      }, labelStyle)
     },
     ownerState: {}
   });

package/esm/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:
@@ -62,10 +63,10 @@ function AreaPlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of 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: 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/esm/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:
@@ -70,7 +71,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
         if (xData === undefined) {
-          throw new Error(`Axis of 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/esm/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:
@@ -61,10 +62,10 @@ function LinePlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of 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: 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/esm/LineChart/MarkPlot.js

@@ -7,6 +7,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:
@@ -76,7 +77,7 @@ function MarkPlot(props) {
           return true;
         };
         if (xData === undefined) {
-          throw new Error(`Axis of 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 == null ? void 0 : xData.map((x, index) => {
           const value = data[index] == null ? null : stackedData[index][1];

package/esm/LineChart/extremums.js

@@ -7,6 +7,18 @@ export const getExtremumX = params => {
   const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
   return [minX, maxX];
 };
+function getSeriesExtremums(getValues, stackedData) {
+  if (stackedData.length === 0) {
+    return [null, null];
+  }
+  return stackedData.reduce((seriesAcc, stackedValue) => {
+    const [base, value] = getValues(stackedValue);
+    if (seriesAcc[0] === null) {
+      return [Math.min(base, value), Math.max(base, value)];
+    }
+    return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
+  }, getValues(stackedData[0]));
+}
 export const getExtremumY = params => {
   const {
     series,
@@ -14,16 +26,21 @@ export const getExtremumY = params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
-    const isArea = series[seriesId].area !== undefined;
-    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Id area should go from bottom to top, without area should only consider the top
+    const {
+      area,
+      stackedData
+    } = series[seriesId];
+    const isArea = area !== undefined;
+    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Since this series is not used to display an area, we do not consider the base (the d[0]).
 
-    const [seriesMin, seriesMax] = series[seriesId].stackedData.reduce((seriesAcc, stackedValue) => {
-      const [base, value] = getValues(stackedValue);
-      return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
-    }, getValues(series[seriesId].stackedData[0]));
-    if (acc[0] === null || acc[1] === null) {
-      return [seriesMin, seriesMax];
+    const seriesExtremums = getSeriesExtremums(getValues, stackedData);
+    if (acc[0] === null) {
+      return seriesExtremums;
+    }
+    if (seriesExtremums[0] === null) {
+      return acc;
     }
+    const [seriesMin, seriesMax] = seriesExtremums;
     return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
   }, [null, null]);
 };

package/esm/LineChart/formatter.js

@@ -2,8 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+let warnedOnce = false;
+
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 const formatter = (params, dataset) => {
+  var _ref;
   const {
     seriesOrder,
     series
@@ -11,7 +14,7 @@ const formatter = (params, dataset) => {
   const stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  const d3Dataset = dataset != null ? dataset : [];
+  const d3Dataset = (_ref = dataset) != null ? _ref : [];
   seriesOrder.forEach(id => {
     const data = series[id].data;
     if (data !== undefined) {
@@ -25,7 +28,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI: 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 = {};
@@ -48,7 +51,17 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({}, series[id], {
-        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
+        data: dataKey ? dataset.map(data => {
+          const 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 "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+            }
+            return 0;
+          }
+          return value;
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/esm/LineChart/index.js

@@ -1,8 +1,8 @@
-export { LinePlot } from './LinePlot';
-export { AreaPlot } from './AreaPlot';
-export { MarkPlot } from './MarkPlot';
-export { LineHighlightPlot } from './LineHighlightPlot';
-export { LineChart } from './LineChart';
+export * from './LineChart';
+export * from './LinePlot';
+export * from './AreaPlot';
+export * from './MarkPlot';
+export * from './LineHighlightPlot';
 export * from './AreaElement';
 export * from './LineElement';
 export * from './MarkElement';

package/esm/PieChart/PieArcLabelPlot.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { defaultLabelTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
@@ -23,7 +24,7 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   }
   return arcLabel(item);
 }
-export function PieArcLabelPlot(props) {
+function PieArcLabelPlot(props) {
   var _slots$pieArcLabel;
   const {
       slots,
@@ -89,4 +90,91 @@ export function PieArcLabelPlot(props) {
       }, slotProps == null ? void 0 : slotProps.pieArcLabel));
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The label displayed into the arc.
+   */
+  arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
+  /**
+   * The minimal angle required to display the arc label.
+   */
+  arcLabelMinAngle: PropTypes.number,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius: PropTypes.number,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    endAngle: PropTypes.number.isRequired,
+    formattedValue: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string,
+    padAngle: PropTypes.number.isRequired,
+    startAngle: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired
+  })).isRequired,
+  /**
+   * Override the arc attibutes when it is faded.
+   */
+  faded: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  /**
+   * Override the arc attibutes when it is highlighted.
+   */
+  highlighted: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  id: PropTypes.string.isRequired,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * @default 0
+   */
+  innerRadius: PropTypes.number,
+  /**
+   * The radius between circle center and the end of the arc.
+   */
+  outerRadius: PropTypes.number.isRequired,
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle: PropTypes.number,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { PieArcLabelPlot };

package/esm/PieChart/PieArcPlot.js

@@ -3,12 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { PieArc } from './PieArc';
 import { defaultTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function PieArcPlot(props) {
+function PieArcPlot(props) {
   var _slots$pieArc;
   const {
       slots,
@@ -81,4 +82,90 @@ export function PieArcPlot(props) {
       }, slotProps == null ? void 0 : slotProps.pieArc));
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius: PropTypes.number,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    endAngle: PropTypes.number.isRequired,
+    formattedValue: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string,
+    padAngle: PropTypes.number.isRequired,
+    startAngle: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired
+  })).isRequired,
+  /**
+   * Override the arc attibutes when it is faded.
+   */
+  faded: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  /**
+   * Override the arc attibutes when it is highlighted.
+   */
+  highlighted: PropTypes.shape({
+    additionalRadius: PropTypes.number,
+    color: PropTypes.string,
+    cornerRadius: PropTypes.number,
+    innerRadius: PropTypes.number,
+    outerRadius: PropTypes.number,
+    paddingAngle: PropTypes.number
+  }),
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  id: PropTypes.string.isRequired,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * @default 0
+   */
+  innerRadius: PropTypes.number,
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: PropTypes.func,
+  /**
+   * The radius between circle center and the end of the arc.
+   */
+  outerRadius: PropTypes.number.isRequired,
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle: PropTypes.number,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { PieArcPlot };

package/esm/PieChart/PieChart.js

@@ -240,8 +240,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     arcLabelMinAngle: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
-    cx: PropTypes.number,
-    cy: PropTypes.number,
+    cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     data: PropTypes.arrayOf(PropTypes.shape({
       color: PropTypes.string,
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -270,8 +270,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
     }),
     id: PropTypes.string,
-    innerRadius: PropTypes.number,
-    outerRadius: PropTypes.number,
+    innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     paddingAngle: PropTypes.number,
     sortingValues: PropTypes.oneOfType([PropTypes.oneOf(['asc', 'desc', 'none']), PropTypes.func]),
     startAngle: PropTypes.number,

package/esm/PieChart/PiePlot.js

@@ -4,6 +4,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
+import { getPercentageValue } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -34,10 +35,6 @@ function PiePlot(props) {
     return null;
   }
   const availableRadius = Math.min(width, height) / 2;
-  const center = {
-    x: left + width / 2,
-    y: top + height / 2
-  };
   const {
     series,
     seriesOrder
@@ -45,22 +42,26 @@ function PiePlot(props) {
   return /*#__PURE__*/_jsxs("g", {
     children: [seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlighted,
         faded,
         highlightScope
       } = series[seriesId];
+      const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      const cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
+      const cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
           innerRadius: innerRadius,
-          outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          outerRadius: outerRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -76,19 +77,23 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
         arcLabelMinAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlightScope
       } = series[seriesId];
+      const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      const cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
+      const cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius != null ? outerRadius : availableRadius,

package/esm/PieChart/index.js

@@ -1,4 +1,6 @@
-export { PiePlot } from './PiePlot';
-export { PieChart } from './PieChart';
-export { PieArcLabel, getPieArcLabelUtilityClass, pieArcLabelClasses } from './PieArcLabel';
-export { PieArc, getPieArcUtilityClass, pieArcClasses } from './PieArc';
+export * from './PieChart';
+export * from './PiePlot';
+export * from './PieArcPlot';
+export * from './PieArcLabelPlot';
+export * from './PieArc';
+export * from './PieArcLabel';

package/esm/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: Charts 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: Charts 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/esm/ScatterChart/Scatter.js

@@ -78,7 +78,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   color: PropTypes.string.isRequired,
   markerSize: PropTypes.number.isRequired,
   series: PropTypes.shape({
-    color: PropTypes.string,
+    color: PropTypes.string.isRequired,
     data: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       x: PropTypes.number.isRequired,

package/esm/ScatterChart/index.js

@@ -1,3 +1,3 @@
-export { ScatterPlot } from './ScatterPlot';
-export { ScatterChart } from './ScatterChart';
-export { Scatter } from './Scatter';
+export * from './ScatterChart';
+export * from './ScatterPlot';
+export * from './Scatter';

package/esm/context/CartesianContextProvider.js

@@ -52,7 +52,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])
@@ -64,7 +64,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/esm/context/SeriesContextProvider.js

@@ -40,7 +40,7 @@ const formatSeries = (series, colors, dataset) => {
       };
     }
     if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
-      throw new Error(`MUI: series' id "${id}" is not unique`);
+      throw new Error(`MUI-X-Charts: series' id "${id}" is not unique`);
     }
     seriesGroups[type].series[id] = _extends({
       id

package/esm/index.js

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsAxisHighlight';
 export * from './BarChart';