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

package/ChartsSurface.d.ts

@@ -28,5 +28,5 @@ export interface ChartsSurfaceProps {
      */
     disableAxisListener?: boolean;
 }
-export declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;
-export {};
+declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;
+export { ChartsSurface };

package/ChartsSurface.js

@@ -8,6 +8,7 @@ exports.ChartsSurface = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styles = require("@mui/material/styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _useAxisEvents = require("./hooks/useAxisEvents");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -46,4 +47,35 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       children: props.desc
     }), children]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  desc: _propTypes.default.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: _propTypes.default.bool,
+  /**
+   * The height of the chart in px.
+   */
+  height: _propTypes.default.number.isRequired,
+  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,
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  /**
+   * The width of the chart in px.
+   */
+  width: _propTypes.default.number.isRequired
+} : void 0;

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -5,7 +5,7 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
 export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
 export declare const ChartsTooltipMark: import("@emotion/styled").StyledComponent<Pick<import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme>>, "hidden" | "content" | "style" | "translate" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, keyof import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme>>, "hidden" | "content" | "style" | "translate" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("@mui/system/Box").BoxOwnProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: {
         color: string;
     };

package/ChartsTooltip/ChartsTooltipTable.js

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

package/LineChart/AreaPlot.js

@@ -71,10 +71,10 @@ function AreaPlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`MUI-X-Charts: ${xAxisKey === _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 areaPath = (0, _d3Shape.area)().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/LineChart/LineChart.d.ts

@@ -24,6 +24,7 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      * - '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?: ChartsAxisHighlightProps;
     /**

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 = {};

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

@@ -113,6 +113,7 @@ 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,
   /**
@@ -138,6 +139,7 @@ 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,

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

@@ -119,6 +119,7 @@ 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,

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,

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;
 }

package/context/DrawingProvider.js

@@ -34,13 +34,14 @@ const SVGContext = exports.SVGContext = /*#__PURE__*/React.createContext({
  *
  * - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
  */
-function DrawingProvider({
-  width,
-  height,
-  margin,
-  svgRef,
-  children
-}) {
+function DrawingProvider(props) {
+  const {
+    width,
+    height,
+    margin,
+    svgRef,
+    children
+  } = props;
   const drawingArea = (0, _useChartDimensions.default)(width, height, margin);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SVGContext.Provider, {
     value: svgRef,

package/context/HighlightProvider.d.ts

@@ -41,5 +41,5 @@ type HighlighState = {
     dispatch: React.Dispatch<HighlighActions>;
 };
 export declare const HighlighContext: React.Context<HighlighState>;
-export declare function HighlightProvider({ children }: HighlightProviderProps): React.JSX.Element;
-export {};
+declare function HighlightProvider(props: HighlightProviderProps): React.JSX.Element;
+export { HighlightProvider };

package/context/HighlightProvider.js

@@ -39,9 +39,10 @@ const dataReducer = (prevState, action) => {
       return prevState;
   }
 };
-function HighlightProvider({
-  children
-}) {
+function HighlightProvider(props) {
+  const {
+    children
+  } = props;
   const [data, dispatch] = React.useReducer(dataReducer, {
     item: null,
     scope: defaultScope

package/context/InteractionProvider.d.ts

@@ -46,5 +46,5 @@ type InteractionState = {
     dispatch: React.Dispatch<InteractionActions>;
 };
 export declare const InteractionContext: React.Context<InteractionState>;
-export declare function InteractionProvider({ children }: InteractionProviderProps): React.JSX.Element;
-export {};
+declare function InteractionProvider(props: InteractionProviderProps): React.JSX.Element;
+export { InteractionProvider };

package/context/InteractionProvider.js

@@ -60,9 +60,10 @@ const dataReducer = (prevState, action) => {
       return prevState;
   }
 };
-function InteractionProvider({
-  children
-}) {
+function InteractionProvider(props) {
+  const {
+    children
+  } = props;
   const [data, dispatch] = React.useReducer(dataReducer, {
     item: null,
     axis: {

package/context/SeriesContextProvider.d.ts

@@ -12,6 +12,7 @@ export type SeriesContextProviderProps = {
     series: AllSeriesType[];
     /**
      * Color palette used to colorize multiple series.
+     * @default blueberryTwilightPalette
      */
     colors?: ChartsColorPalette;
     children: React.ReactNode;
@@ -20,4 +21,5 @@ export type FormattedSeries = {
     [type in ChartSeriesType]?: FormatterResult<type>;
 };
 export declare const SeriesContext: React.Context<FormattedSeries>;
-export declare function SeriesContextProvider({ series, dataset, colors, children, }: SeriesContextProviderProps): React.JSX.Element;
+declare function SeriesContextProvider(props: SeriesContextProviderProps): React.JSX.Element;
+export { SeriesContextProvider };

package/context/SeriesContextProvider.js

@@ -49,7 +49,7 @@ const formatSeries = (series, colors, dataset) => {
       };
     }
     if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI-X-Charts: series' id "${id}" is not unique`);
+      throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
     }
     seriesGroups[type].series[id] = (0, _extends2.default)({
       id
@@ -65,12 +65,13 @@ const formatSeries = (series, colors, dataset) => {
   });
   return formattedSeries;
 };
-function SeriesContextProvider({
-  series,
-  dataset,
-  colors = _colorPalettes.blueberryTwilightPalette,
-  children
-}) {
+function SeriesContextProvider(props) {
+  const {
+    series,
+    dataset,
+    colors = _colorPalettes.blueberryTwilightPalette,
+    children
+  } = props;
   const theme = (0, _styles.useTheme)();
   const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset), [series, colors, theme.palette.mode, dataset]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesContext.Provider, {

package/esm/BarChart/BarChart.js

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

package/esm/BarChart/BarPlot.js

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

package/esm/BarChart/formatter.js

@@ -26,7 +26,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined) {
-      throw new Error([`MUI-X-Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};