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

package/ScatterChart/ScatterChart.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { ScatterPlotSlotComponentProps, ScatterPlotSlotsComponent } from './ScatterPlot';
+import { ScatterPlotSlotProps, ScatterPlotSlots } from './ScatterPlot';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ScatterSeriesType } from '../models/seriesType/scatter';
 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 { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
-export interface ScatterChartSlotsComponent extends ChartsAxisSlotsComponent, ScatterPlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
+import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
-export interface ScatterChartSlotComponentProps extends ChartsAxisSlotComponentProps, ScatterPlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
 export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<ScatterSeriesType, 'type'>[];
@@ -24,12 +24,12 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
      * Overridable component slots.
      * @default {}
      */
-    slots?: ScatterChartSlotsComponent;
+    slots?: ScatterChartSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: ScatterChartSlotComponentProps;
+    slotProps?: ScatterChartSlotProps;
 }
 /**
  * Demos:

package/ScatterChart/ScatterChart.js

@@ -96,7 +96,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -123,9 +123,21 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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.
@@ -133,7 +145,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -168,6 +180,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -180,7 +198,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -246,7 +264,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -273,7 +291,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -304,6 +330,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/ScatterChart/ScatterPlot.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ScatterProps } from './Scatter';
-export interface ScatterPlotSlotsComponent {
+export interface ScatterPlotSlots {
     scatter?: React.JSXElementConstructor<ScatterProps>;
 }
-export interface ScatterPlotSlotComponentProps {
+export interface ScatterPlotSlotProps {
     scatter?: Partial<ScatterProps>;
 }
 export interface ScatterPlotProps {
@@ -11,12 +11,12 @@ export interface ScatterPlotProps {
      * Overridable component slots.
      * @default {}
      */
-    slots?: ScatterPlotSlotsComponent;
+    slots?: ScatterPlotSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: ScatterPlotSlotComponentProps;
+    slotProps?: ScatterPlotSlotProps;
 }
 /**
  * Demos:

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
-import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType/line';
-import { AreaPlotSlotsComponent, AreaPlotSlotComponentProps } from '../LineChart/AreaPlot';
-import { LinePlotSlotsComponent, LinePlotSlotComponentProps } from '../LineChart/LinePlot';
-import { MarkPlotSlotsComponent, MarkPlotSlotComponentProps } from '../LineChart/MarkPlot';
-import { LineHighlightPlotSlotsComponent, LineHighlightPlotSlotComponentProps } from '../LineChart/LineHighlightPlot';
-import { BarPlotSlotsComponent, BarPlotSlotComponentProps } from '../BarChart/BarPlot';
-export interface SparkLineChartSlotsComponent extends AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, BarPlotSlotsComponent, ChartsTooltipSlotsComponent {
+import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot';
+import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot';
+import { MarkPlotSlots, MarkPlotSlotProps } from '../LineChart/MarkPlot';
+import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from '../LineChart/LineHighlightPlot';
+import { BarPlotSlots, BarPlotSlotProps } from '../BarChart/BarPlot';
+export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, BarPlotSlots, ChartsTooltipSlots {
 }
-export interface SparkLineChartSlotComponentProps extends AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, BarPlotSlotComponentProps, ChartsTooltipSlotComponentProps {
+export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {
 }
 export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis'> {
     /**
@@ -63,12 +63,12 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
      * Overridable component slots.
      * @default {}
      */
-    slots?: SparkLineChartSlotsComponent;
+    slots?: SparkLineChartSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: SparkLineChartSlotComponentProps;
+    slotProps?: SparkLineChartSlotProps;
 }
 /**
  * Demos:

package/SparkLineChart/SparkLineChart.js

@@ -137,10 +137,28 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Data to plot.
    */
   data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  /**
+   * 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,
+  /**
+   * 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,
@@ -196,6 +214,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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 xAxis configuration.

package/context/CartesianContextProvider.d.ts

@@ -4,8 +4,19 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { DatasetType } from '../models/seriesType/config';
 import { MakeOptional } from '../models/helpers';
 export type CartesianContextProviderProps = {
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+     */
     xAxis?: MakeOptional<AxisConfig, 'id'>[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+     */
     yAxis?: MakeOptional<AxisConfig, 'id'>[];
+    /**
+     * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+     */
     dataset?: DatasetType;
     children: React.ReactNode;
 };
@@ -14,15 +25,24 @@ type DefaultizedAxisConfig = {
 };
 export declare const CartesianContext: React.Context<{
     /**
-     * Mapping from axis key to scaling function
+     * Mapping from x-axis key to scaling configuration.
      */
     xAxis: {
         DEFAULT_X_AXIS_KEY: AxisDefaultized;
     } & DefaultizedAxisConfig;
+    /**
+     * Mapping from y-axis key to scaling configuration.
+     */
     yAxis: {
         DEFAULT_X_AXIS_KEY: AxisDefaultized;
     } & DefaultizedAxisConfig;
+    /**
+     * The x-axes IDs sorted by order they got provided.
+     */
     xAxisIds: string[];
+    /**
+     * The y-axes IDs sorted by order they got provided.
+     */
     yAxisIds: string[];
 }>;
 /**

package/context/CartesianContextProvider.js

@@ -225,7 +225,14 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
+  /**
+   * 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),
+  /**
+   * 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,
@@ -256,6 +263,10 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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/context/DrawingProvider.d.ts

@@ -8,11 +8,29 @@ export interface DrawingProviderProps extends LayoutConfig {
  * Defines the area in which it is possible to draw the charts.
  */
 export type DrawingArea = {
+    /**
+     * The gap between the left border of the SVG and the drawing area.
+     */
     left: number;
+    /**
+     * The gap between the top border of the SVG and the drawing area.
+     */
     top: number;
+    /**
+     * The gap between the bottom border of the SVG and the drawing area.
+     */
     bottom: number;
+    /**
+     * The gap between the right border of the SVG and the drawing area.
+     */
     right: number;
+    /**
+     * The width of the drawing area.
+     */
     width: number;
+    /**
+     * The height of the drawing area.
+     */
     height: number;
 };
 export declare const DrawingContext: React.Context<DrawingArea>;

package/context/DrawingProvider.js

@@ -57,6 +57,12 @@ process.env.NODE_ENV !== "production" ? DrawingProvider.propTypes = {
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   height: _propTypes.default.number.isRequired,
+  /**
+   * 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,

package/context/HighlightProvider.d.ts

@@ -7,7 +7,21 @@ export type ItemHighlighData<T extends ChartSeriesType> = ChartItemIdentifier<T>
 export type HighlightOptions = 'none' | 'item' | 'series';
 export type FadeOptions = 'none' | 'series' | 'global';
 export type HighlightScope = {
+    /**
+     * The scope of highlighted elements.
+     * - 'none': no highlight.
+     * - 'item': only highlight the item.
+     * - 'series': highlight all elements of the same series.
+     * @default 'none'
+     */
     highlighted: HighlightOptions;
+    /**
+     * The scope of faded elements.
+     * - 'none': no fading.
+     * - 'series': only fade element of the same series.
+     * - 'global': fade all elements that are not highlighted.
+     * @default 'none'
+     */
     faded: FadeOptions;
 };
 type HighlighActions<T extends ChartSeriesType = ChartSeriesType> = {
@@ -19,6 +33,9 @@ type HighlighActions<T extends ChartSeriesType = ChartSeriesType> = {
     item: ItemHighlighData<T>;
 };
 type HighlighState = {
+    /**
+     * The item that triggers the highlight state.
+     */
     item: null | ItemHighlighData<ChartSeriesType>;
     scope: HighlightScope;
     dispatch: React.Dispatch<HighlighActions>;

package/context/InteractionProvider.d.ts

@@ -25,7 +25,13 @@ type InteractionActions<T extends ChartSeriesType = ChartSeriesType> = {
     data: AxisInteractionData;
 };
 type InteractionState = {
+    /**
+     * The item currently interacting.
+     */
     item: null | ItemInteractionData<ChartSeriesType>;
+    /**
+     * The x- and y-axes currently interacting.
+     */
     axis: AxisInteractionData;
     dispatch: React.Dispatch<InteractionActions>;
 };

package/context/SeriesContextProvider.d.ts

@@ -4,6 +4,11 @@ import { ChartSeriesType, DatasetType, FormatterResult } from '../models/seriesT
 import { ChartsColorPalette } from '../colorPalettes';
 export type SeriesContextProviderProps = {
     dataset?: DatasetType;
+    /**
+     * The array of series to display.
+     * Each type of series has its own specificity.
+     * Please refer to the appropriate docs page to learn more about it.
+     */
     series: AllSeriesType[];
     /**
      * Color palette used to colorize multiple series.

package/esm/BarChart/BarChart.js

@@ -114,6 +114,13 @@ process.env.NODE_ENV !== "production" ? BarChart.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.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -124,7 +131,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -151,9 +158,21 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.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.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: PropTypes.number,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
@@ -162,7 +181,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -197,6 +216,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.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.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
@@ -209,7 +234,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -280,7 +305,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -307,7 +332,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: PropTypes.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.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -338,6 +371,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.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.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,

package/esm/ChartsAxis/ChartsAxis.js

@@ -11,7 +11,8 @@ const getAxisId = propsValue => {
     return null;
   }
   if (typeof propsValue === 'object') {
-    return propsValue.axisId;
+    var _propsValue$axisId;
+    return (_propsValue$axisId = propsValue.axisId) != null ? _propsValue$axisId : null;
   }
   return propsValue;
 };
@@ -100,7 +101,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -127,7 +128,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -154,7 +155,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -191,7 +192,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,