@mui/x-charts 7.0.0-beta.2 → 7.0.0-beta.4

package/Gauge/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useGaugeState: true
+};
+Object.defineProperty(exports, "useGaugeState", {
+  enumerable: true,
+  get: function () {
+    return _GaugeProvider.useGaugeState;
+  }
+});
+var _Gauge = require("./Gauge");
+Object.keys(_Gauge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Gauge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Gauge[key];
+    }
+  });
+});
+var _GaugeContainer = require("./GaugeContainer");
+Object.keys(_GaugeContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeContainer[key];
+    }
+  });
+});
+var _GaugeValueText = require("./GaugeValueText");
+Object.keys(_GaugeValueText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeValueText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeValueText[key];
+    }
+  });
+});
+var _GaugeValueArc = require("./GaugeValueArc");
+Object.keys(_GaugeValueArc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeValueArc[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeValueArc[key];
+    }
+  });
+});
+var _GaugeReferenceArc = require("./GaugeReferenceArc");
+Object.keys(_GaugeReferenceArc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GaugeReferenceArc[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GaugeReferenceArc[key];
+    }
+  });
+});
+var _gaugeClasses = require("./gaugeClasses");
+Object.keys(_gaugeClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gaugeClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gaugeClasses[key];
+    }
+  });
+});
+var _GaugeProvider = require("./GaugeProvider");

package/Gauge/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Gauge/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Gauge/utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Retruns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+export declare function getArcRatios(startAngle: number, endAngle: number): {
+    cx: number;
+    cy: number;
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};
+export declare function getAvailableRadius(cx: number, cy: number, width: number, height: number, { minX, maxX, minY, maxY, }: {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}): number;

package/Gauge/utils.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getArcRatios = getArcRatios;
+exports.getAvailableRadius = getAvailableRadius;
+function deg2rad(angle) {
+  return Math.PI * angle / 180;
+}
+function getPoint(angle) {
+  const radAngle = deg2rad(angle);
+  return [Math.sin(radAngle), -Math.cos(radAngle)];
+}
+
+/**
+ * Retruns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+function getArcRatios(startAngle, endAngle) {
+  // Set the start, end and center point.
+  const points = [[0, 0], getPoint(startAngle), getPoint(endAngle)];
+
+  // Add cardinal points included in the arc
+  const minAngle = Math.min(startAngle, endAngle);
+  const maxAngle = Math.max(startAngle, endAngle);
+  const initialAngle = Math.floor(minAngle / 90) * 90;
+  for (let step = 1; step <= 4; step += 1) {
+    const cartinalAngle = initialAngle + step * 90;
+    if (cartinalAngle < maxAngle) {
+      points.push(getPoint(cartinalAngle));
+    }
+  }
+  const minX = Math.min(...points.map(([x]) => x));
+  const maxX = Math.max(...points.map(([x]) => x));
+  const minY = Math.min(...points.map(([, y]) => y));
+  const maxY = Math.max(...points.map(([, y]) => y));
+  return {
+    cx: -minX / (maxX - minX),
+    cy: -minY / (maxY - minY),
+    minX,
+    maxX,
+    minY,
+    maxY
+  };
+}
+function getAvailableRadius(cx, cy, width, height, {
+  minX,
+  maxX,
+  minY,
+  maxY
+}) {
+  return Math.min(...[{
+    ratio: Math.abs(minX),
+    space: cx
+  }, {
+    ratio: Math.abs(maxX),
+    space: width - cx
+  }, {
+    ratio: Math.abs(minY),
+    space: cy
+  }, {
+    ratio: Math.abs(maxY),
+    space: height - cy
+  }].map(({
+    ratio,
+    space
+  }) => {
+    if (ratio < 0.00001) {
+      return Infinity;
+    }
+    return space / ratio;
+  }));
+}

package/LineChart/LineChart.d.ts

@@ -11,20 +11,30 @@ import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotProps, ChartsAxisSlots } from '../models/axis';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from './LineHighlightPlot';
+import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+    /**
+     * The series to display in the line chart.
+     */
     series: MakeOptional<LineSeriesType, 'type'>[];
+    /**
+     * The configuration of the tooltip.
+     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+     * @default { trigger: 'item' }
+     */
     tooltip?: ChartsTooltipProps;
     /**
-     * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
-     * The two properties accept the following values:
-     * - '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.
+     * Option to display a cartesian grid in the background.
+     */
+    grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+    /**
+     * The configuration of axes highlight.
+     * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
      * @default { x: 'line' }
      */
     axisHighlight?: ChartsAxisHighlightProps;
@@ -46,8 +56,17 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      * @default {}
      */
     slotProps?: LineChartSlotProps;
+    /**
+     * Callback fired when an area element is clicked.
+     */
     onAreaClick?: AreaPlotProps['onItemClick'];
+    /**
+     * Callback fired when a line element is clicked.
+     */
     onLineClick?: LinePlotProps['onItemClick'];
+    /**
+     * Callback fired when a mark element is clicked.
+     */
     onMarkClick?: MarkPlotProps['onItemClick'];
     /**
      * If `true`, animations are skipped.

package/LineChart/LineChart.js

@@ -20,6 +20,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsClipPath = require("../ChartsClipPath");
 var _LineHighlightPlot = require("./LineHighlightPlot");
+var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
@@ -55,6 +56,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     },
     disableLineItemHighlight,
     legend,
+    grid,
     topAxis,
     leftAxis,
     rightAxis,
@@ -89,6 +91,9 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
+    }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
       clipPath: `url(#${clipPathId})`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, {
@@ -134,11 +139,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
-   * The two properties accept the following values:
-   * - '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.
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: _propTypes.default.shape({
@@ -194,9 +196,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: _propTypes.default.shape({
+    horizontal: _propTypes.default.bool,
+    vertical: _propTypes.default.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
-   * @default undefined
    */
   height: _propTypes.default.number,
   /**
@@ -252,6 +260,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * Callback fired when an area element is clicked.
+   */
   onAreaClick: _propTypes.default.func,
   /**
    * The function called for onClick events.
@@ -260,7 +271,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when a line element is clicked.
+   */
   onLineClick: _propTypes.default.func,
+  /**
+   * Callback fired when a mark element is clicked.
+   */
   onMarkClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
@@ -289,6 +306,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * The series to display in the line chart.
+   */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -307,6 +327,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: _propTypes.default.shape({
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
@@ -350,7 +375,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
-   * @default undefined
    */
   width: _propTypes.default.number,
   /**

package/PieChart/PieArc.d.ts

@@ -22,14 +22,14 @@ interface PieArcOwnerState {
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
 export type PieArcProps = Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & PieArcOwnerState & {
-    startAngle: SpringValue<number>;
+    cornerRadius: SpringValue<number>;
     endAngle: SpringValue<number>;
+    highlightScope?: Partial<HighlightScope>;
     innerRadius: SpringValue<number>;
+    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
     outerRadius: SpringValue<number>;
-    cornerRadius: SpringValue<number>;
     paddingAngle: SpringValue<number>;
-    highlightScope?: Partial<HighlightScope>;
-    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+    startAngle: SpringValue<number>;
 };
 declare function PieArc(props: PieArcProps): React.JSX.Element;
 declare namespace PieArc {

package/PieChart/PieArc.js

@@ -19,7 +19,7 @@ var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "highlightScope", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
 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 getPieArcUtilityClass(slot) {
@@ -51,20 +51,20 @@ const PieArcRoot = (0, _styles.styled)(_web.animated.path, {
 }));
 function PieArc(props) {
   const {
-      id,
-      dataIndex,
       classes: innerClasses,
       color,
+      cornerRadius,
+      dataIndex,
+      endAngle,
       highlightScope,
-      onClick,
+      id,
+      innerRadius,
       isFaded,
       isHighlighted,
-      startAngle,
-      endAngle,
-      paddingAngle,
-      innerRadius,
+      onClick,
       outerRadius,
-      cornerRadius
+      paddingAngle,
+      startAngle
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {

package/PieChart/PieArcLabelPlot.js

@@ -14,7 +14,7 @@ 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", "arcLabelRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "highlightScope", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
   _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; }
@@ -34,23 +34,23 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
 }
 function PieArcLabelPlot(props) {
   const {
-      slots,
-      slotProps,
-      innerRadius,
-      outerRadius,
+      arcLabel,
+      arcLabelMinAngle = 0,
       arcLabelRadius,
       cornerRadius = 0,
-      paddingAngle = 0,
-      id,
-      highlightScope,
-      highlighted,
+      data,
       faded = {
         additionalRadius: -5
       },
-      data,
-      arcLabel,
-      arcLabelMinAngle = 0,
-      skipAnimation
+      highlighted,
+      highlightScope,
+      id,
+      innerRadius,
+      outerRadius,
+      paddingAngle = 0,
+      skipAnimation,
+      slotProps,
+      slots
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const transformedData = (0, _useTransformData.useTransformData)({

package/PieChart/PieChart.d.ts

@@ -26,14 +26,36 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      * @default null
      */
     leftAxis?: null | string | ChartsYAxisProps;
+    /**
+     * The series to display in the pie chart.
+     */
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
+    /**
+     * The configuration of the tooltip.
+     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+     * @default { trigger: 'item' }
+     */
     tooltip?: ChartsTooltipProps;
+    /**
+     * The configuration of axes highlight.
+     * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+     * @default { x: 'none', y: 'none' }
+     */
     axisHighlight?: ChartsAxisHighlightProps;
     /**
+     * The props of the legend.
+     * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
      * @deprecated Consider using `slotProps.legend` instead.
      */
     legend?: ChartsLegendProps;
+    /**
+     * Callback fired when a pie arc is clicked.
+     */
     onItemClick?: PiePlotProps['onItemClick'];
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
     slots?: PieChartSlots;
     /**
      * The props used for each component slot.

package/PieChart/PieChart.js

@@ -109,6 +109,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
@@ -160,7 +165,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   disableAxisListener: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
-   * @default undefined
    */
   height: _propTypes.default.number,
   /**
@@ -191,6 +195,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
+   * The props of the legend.
+   * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
    * @deprecated Consider using `slotProps.legend` instead.
    */
   legend: _propTypes.default.shape({
@@ -216,6 +222,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
   onItemClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
@@ -244,6 +253,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * The series to display in the pie chart.
+   */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -255,9 +267,18 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default {}
    */
   slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: _propTypes.default.shape({
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
@@ -301,7 +322,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
-   * @default undefined
    */
   width: _propTypes.default.number,
   /**

package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts

@@ -3,12 +3,10 @@ import { ChartContainerProps } from '../ChartContainer';
 export interface ResponsiveChartContainerProps extends Omit<ChartContainerProps, 'width' | 'height'> {
     /**
      * The width of the chart in px. If not defined, it takes the width of the parent element.
-     * @default undefined
      */
     width?: number;
     /**
      * The height of the chart in px. If not defined, it takes the height of the parent element.
-     * @default undefined
      */
     height?: number;
 }