@mui/x-charts 6.18.0 → 7.0.0-alpha.0

package/ChartsSurface.d.ts

@@ -7,7 +7,13 @@ type ViewBox = {
     height?: number;
 };
 export interface ChartsSurfaceProps {
+    /**
+     * The width of the chart in px.
+     */
     width: number;
+    /**
+     * The height of the chart in px.
+     */
     height: number;
     viewBox?: ViewBox;
     className?: string;
@@ -15,6 +21,11 @@ export interface ChartsSurfaceProps {
     desc?: string;
     sx?: SxProps<Theme>;
     children?: React.ReactNode;
+    /**
+     * If `true`, the charts will not listen to the mouse move event.
+     * It might break interactive features, but will improve performance.
+     * @default false
+     */
     disableAxisListener?: boolean;
 }
 export declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -4,12 +4,12 @@ import { TriggerOptions } from './utils';
 import { ChartsItemContentProps } from './ChartsItemTooltipContent';
 import { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
 import { ChartsTooltipClasses } from './tooltipClasses';
-export interface ChartsTooltipSlotsComponent {
+export interface ChartsTooltipSlots {
     popper?: React.ElementType<PopperProps>;
     axisContent?: React.ElementType<ChartsAxisContentProps>;
     itemContent?: React.ElementType<ChartsItemContentProps>;
 }
-export interface ChartsTooltipSlotComponentProps {
+export interface ChartsTooltipSlotProps {
     popper?: Partial<PopperProps>;
     axisContent?: Partial<ChartsAxisContentProps>;
     itemContent?: Partial<ChartsItemContentProps>;
@@ -41,12 +41,12 @@ export type ChartsTooltipProps = {
      * Overridable component slots.
      * @default {}
      */
-    slots?: ChartsTooltipSlotsComponent;
+    slots?: ChartsTooltipSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: ChartsTooltipSlotComponentProps;
+    slotProps?: ChartsTooltipSlotProps;
 };
 /**
  * Demos:

package/ChartsXAxis/ChartsXAxis.js

@@ -114,17 +114,20 @@ function ChartsXAxis(inProps) {
     props: (0, _extends2.default)({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
   });
+  const {
+    xAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
   const _React$useContext = React.useContext(_CartesianContextProvider.CartesianContext),
-    _props$axisId = props.axisId,
+    _ref = props.axisId ?? xAxisIds[0],
     {
       xAxis: {
-        [_props$axisId]: {
+        [_ref]: {
           scale: xScale,
           tickNumber
         }
       }
     } = _React$useContext,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.xAxis[_props$axisId], _excluded);
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.xAxis[_ref], _excluded);
   const isMounted = (0, _useMounted.useMounted)();
   const defaultizedProps = (0, _extends2.default)({}, defaultProps, settings, props);
   const {
@@ -242,9 +245,10 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: _propTypes.default.string.isRequired,
+  axisId: _propTypes.default.string,
   /**
    * Override or extend the styles applied to the component.
    */

package/ChartsYAxis/ChartsYAxis.js

@@ -60,17 +60,20 @@ function ChartsYAxis(inProps) {
     props: (0, _extends2.default)({}, defaultProps, inProps),
     name: 'MuiChartsYAxis'
   });
+  const {
+    yAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
   const _React$useContext = React.useContext(_CartesianContextProvider.CartesianContext),
-    _props$axisId = props.axisId,
+    _ref = props.axisId ?? yAxisIds[0],
     {
       yAxis: {
-        [_props$axisId]: {
+        [_ref]: {
           scale: yScale,
           tickNumber
         }
       }
     } = _React$useContext,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.yAxis[_props$axisId], _excluded);
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.yAxis[_ref], _excluded);
   const defaultizedProps = (0, _extends2.default)({}, defaultProps, settings, props);
   const {
     position,
@@ -175,9 +178,10 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: _propTypes.default.string.isRequired,
+  axisId: _propTypes.default.string,
   /**
    * Override or extend the styles applied to the component.
    */

package/LineChart/AreaPlot.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { AreaElementProps } from './AreaElement';
-export interface AreaPlotSlotsComponent {
+export interface AreaPlotSlots {
     area?: React.JSXElementConstructor<AreaElementProps>;
 }
-export interface AreaPlotSlotComponentProps {
+export interface AreaPlotSlotProps {
     area?: Partial<AreaElementProps>;
 }
 export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps'> {

package/LineChart/LineChart.d.ts

@@ -1,23 +1,30 @@
 import * as React from 'react';
-import { AreaPlotSlotComponentProps, AreaPlotSlotsComponent } from './AreaPlot';
-import { LinePlotSlotComponentProps, LinePlotSlotsComponent } from './LinePlot';
+import { AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot';
+import { LinePlotSlotProps, LinePlotSlots } from './LinePlot';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
-import { MarkPlotSlotComponentProps, MarkPlotSlotsComponent } from './MarkPlot';
+import { MarkPlotSlotProps, MarkPlotSlots } from './MarkPlot';
 import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { LineSeriesType } from '../models/seriesType/line';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
-import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
+import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
+import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { ChartsAxisSlotComponentProps, ChartsAxisSlotsComponent } from '../models/axis';
-import { LineHighlightPlotSlotsComponent, LineHighlightPlotSlotComponentProps } from './LineHighlightPlot';
-export interface LineChartSlotsComponent extends ChartsAxisSlotsComponent, AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
+import { ChartsAxisSlotProps, ChartsAxisSlots } from '../models/axis';
+import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from './LineHighlightPlot';
+export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
-export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
+export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<LineSeriesType, 'type'>[];
     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.
+     */
     axisHighlight?: ChartsAxisHighlightProps;
     /**
      * @deprecated Consider using `slotProps.legend` instead.
@@ -31,12 +38,12 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      * Overridable component slots.
      * @default {}
      */
-    slots?: LineChartSlotsComponent;
+    slots?: LineChartSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: LineChartSlotComponentProps;
+    slotProps?: LineChartSlotProps;
 }
 /**
  * Demos:

package/LineChart/LineChart.js

@@ -119,6 +119,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | 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.
+   */
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
@@ -129,7 +136,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -156,13 +163,25 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   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,
   /**
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _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,
   /**
    * Indicate which axis to display the left of the charts.
@@ -170,7 +189,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -205,6 +224,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * 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.
+   */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
@@ -217,7 +242,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -287,7 +312,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -314,7 +339,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     x: _propTypes.default.number,
     y: _propTypes.default.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: _propTypes.default.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
@@ -345,6 +378,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,

package/LineChart/LineHighlightPlot.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { LineHighlightElementProps } from './LineHighlightElement';
-export interface LineHighlightPlotSlotsComponent {
+export interface LineHighlightPlotSlots {
     lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
 }
-export interface LineHighlightPlotSlotComponentProps {
+export interface LineHighlightPlotSlotProps {
     lineHighlight?: Partial<LineHighlightElementProps>;
 }
 export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
@@ -11,12 +11,12 @@ export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElemen
      * Overridable component slots.
      * @default {}
      */
-    slots?: LineHighlightPlotSlotsComponent;
+    slots?: LineHighlightPlotSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: LineHighlightPlotSlotComponentProps;
+    slotProps?: LineHighlightPlotSlotProps;
 }
 /**
  * Demos:

package/LineChart/LineHighlightPlot.js

@@ -81,7 +81,7 @@ function LineHighlightPlot(props) {
           throw new Error(`Axis of 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]);
+        const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
           id: seriesId,
           color: series[seriesId].color,

package/LineChart/LinePlot.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { LineElementProps } from './LineElement';
-export interface LinePlotSlotsComponent {
+export interface LinePlotSlots {
     line?: React.JSXElementConstructor<LineElementProps>;
 }
-export interface LinePlotSlotComponentProps {
+export interface LinePlotSlotProps {
     line?: Partial<LineElementProps>;
 }
 export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps'> {

package/LineChart/MarkPlot.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { MarkElementProps } from './MarkElement';
-export interface MarkPlotSlotsComponent {
+export interface MarkPlotSlots {
     mark?: React.JSXElementConstructor<MarkElementProps>;
 }
-export interface MarkPlotSlotComponentProps {
+export interface MarkPlotSlotProps {
     mark?: Partial<MarkElementProps>;
 }
 export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement> {
@@ -11,12 +11,12 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement> {
      * Overridable component slots.
      * @default {}
      */
-    slots?: MarkPlotSlotsComponent;
+    slots?: MarkPlotSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MarkPlotSlotComponentProps;
+    slotProps?: MarkPlotSlotProps;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -134,7 +134,8 @@ function MarkPlot(props) {
             shape: "circle",
             color: series[seriesId].color,
             x: x,
-            y: y,
+            y: y // Don't knwo why TS don't get from the filter that y can't be null
+            ,
             highlightScope: series[seriesId].highlightScope
           }, slotProps?.mark), `${seriesId}-${index}`);
         });

package/PieChart/PieArcLabelPlot.d.ts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
 import { PieArcLabelProps } from './PieArcLabel';
 import { DefaultizedProps } from '../models/helpers';
-export interface PieArcLabelPlotSlotsComponent {
+export interface PieArcLabelPlotSlots {
     pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
 }
-export interface PieArcLabelPlotSlotComponentProps {
+export interface PieArcLabelPlotSlotProps {
     pieArcLabel?: Partial<PieArcLabelProps>;
 }
 export interface PieArcLabelPlotProps extends DefaultizedProps<Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, 'outerRadius'> {
@@ -13,12 +13,12 @@ export interface PieArcLabelPlotProps extends DefaultizedProps<Pick<DefaultizedP
      * Overridable component slots.
      * @default {}
      */
-    slots?: PieArcLabelPlotSlotsComponent;
+    slots?: PieArcLabelPlotSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PieArcLabelPlotSlotComponentProps;
+    slotProps?: PieArcLabelPlotSlotProps;
     /**
      * If `true`, animations are skiped.
      * @default false

package/PieChart/PieArcPlot.d.ts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { PieArcProps } from './PieArc';
 import { DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from '../models/seriesType/pie';
 import { DefaultizedProps } from '../models/helpers';
-export interface PieArcPlotSlotsComponent {
+export interface PieArcPlotSlots {
     pieArc?: React.JSXElementConstructor<PieArcProps>;
 }
-export interface PieArcPlotSlotComponentProps {
+export interface PieArcPlotSlotProps {
     pieArc?: Partial<PieArcProps>;
 }
 export interface PieArcPlotProps extends DefaultizedProps<Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, 'outerRadius'> {
@@ -13,12 +13,12 @@ export interface PieArcPlotProps extends DefaultizedProps<Pick<DefaultizedPieSer
      * Overridable component slots.
      * @default {}
      */
-    slots?: PieArcPlotSlotsComponent;
+    slots?: PieArcPlotSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PieArcPlotSlotComponentProps;
+    slotProps?: PieArcPlotSlotProps;
     /**
      * Callback fired when a pie item is clicked.
      * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/PieChart/PieChart.d.ts

@@ -3,15 +3,15 @@ import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { PieSeriesType } from '../models/seriesType';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
-import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
+import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
+import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { PiePlotProps, PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
+import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
-import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
-export interface PieChartSlotsComponent extends ChartsAxisSlotsComponent, PiePlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
+import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
+export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
-export interface PieChartSlotComponentProps extends ChartsAxisSlotComponentProps, PiePlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
+export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
 export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
@@ -22,12 +22,12 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      */
     legend?: ChartsLegendProps;
     onClick?: PiePlotProps['onClick'];
-    slots?: PieChartSlotsComponent;
+    slots?: PieChartSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PieChartSlotComponentProps;
+    slotProps?: PieChartSlotProps;
 }
 /**
  * Demos:

package/PieChart/PieChart.js

@@ -119,7 +119,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -146,9 +146,21 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   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. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: _propTypes.default.number,
   /**
    * Indicate which axis to display the left of the charts.
@@ -156,7 +168,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -191,6 +203,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * 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.
+   */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
@@ -204,7 +222,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -295,7 +313,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -322,7 +340,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     x: _propTypes.default.number,
     y: _propTypes.default.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: _propTypes.default.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
@@ -353,6 +379,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,

package/PieChart/PiePlot.d.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { PieArcPlotProps, PieArcPlotSlotComponentProps, PieArcPlotSlotsComponent } from './PieArcPlot';
-import { PieArcLabelPlotSlotsComponent, PieArcLabelPlotSlotComponentProps } from './PieArcLabelPlot';
-export interface PiePlotSlotsComponent extends PieArcPlotSlotsComponent, PieArcLabelPlotSlotsComponent {
+import { PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from './PieArcPlot';
+import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps } from './PieArcLabelPlot';
+export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {
 }
-export interface PiePlotSlotComponentProps extends PieArcPlotSlotComponentProps, PieArcLabelPlotSlotComponentProps {
+export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {
 }
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onClick'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: PiePlotSlotsComponent;
+    slots?: PiePlotSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PiePlotSlotComponentProps;
+    slotProps?: PiePlotSlotProps;
 }
 /**
  * Demos:

package/ResponsiveChartContainer/index.d.ts

@@ -1,5 +1,15 @@
 import * as React from 'react';
 import { ChartContainerProps } from '../ChartContainer';
-import { MakeOptional } from '../models/helpers';
-export type ResponsiveChartContainerProps = MakeOptional<ChartContainerProps, 'width' | 'height'>;
-export declare const ResponsiveChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "height" | "width"> & Partial<Pick<ChartContainerProps, "height" | "width">> & React.RefAttributes<unknown>>;
+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;
+}
+export declare const ResponsiveChartContainer: React.ForwardRefExoticComponent<ResponsiveChartContainerProps & React.RefAttributes<unknown>>;