@mui/x-charts 6.18.0 → 6.18.1

package/ChartsReferenceLine/chartsReferenceLineClasses.d.ts

@@ -0,0 +1,15 @@
+export interface ChartsReferenceLineClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the reference line is vertical. */
+    vertical: string;
+    /** Styles applied to the root element if the reference line is horizontal. */
+    horizontal: string;
+    /** Styles applied to the reference line. */
+    line: string;
+    /** Styles applied to the reference label. */
+    label: string;
+}
+export type ChartsReferenceLineClassKey = keyof ChartsReferenceLineClasses;
+export declare function getReferenceLineUtilityClass(slot: string): string;
+export declare const referenceLineClasses: ChartsReferenceLineClasses;

package/ChartsReferenceLine/chartsReferenceLineClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReferenceLineUtilityClass = getReferenceLineUtilityClass;
+exports.referenceLineClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getReferenceLineUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsReferenceLine', slot);
+}
+const referenceLineClasses = exports.referenceLineClasses = (0, _generateUtilityClasses.default)('MuiChartsReferenceLine', ['root', 'vertical', 'horizontal', 'line', 'label']);

package/ChartsReferenceLine/common.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
+import { ChartsTextStyle } from '../internals/components/ChartsText';
+export type CommonChartsReferenceLineProps = {
+    /**
+     * The alignment if the label is in the chart drawing area.
+     * @default 'middle'
+     */
+    labelAlign?: 'start' | 'middle' | 'end';
+    /**
+     * The label to display along the reference line.
+     */
+    label?: string;
+    /**
+     * Additional space arround the label in px.
+     * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+     * @default 5
+     */
+    spacing?: number | {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * The id of the axis used for the reference value.
+     * @default The `id` of the first defined axis.
+     */
+    axisId?: string;
+    /**
+     * The style applied to the label.
+     */
+    labelStyle?: ChartsTextStyle;
+    /**
+     * The style applied to the line.
+     */
+    lineStyle?: React.CSSProperties;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsReferenceLineClasses>;
+};
+export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGGElement>, {}>;

package/ChartsReferenceLine/common.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReferenceLineRoot = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+const ReferenceLineRoot = exports.ReferenceLineRoot = (0, _styles.styled)('g')(({
+  theme
+}) => ({
+  [`& .${_chartsReferenceLineClasses.referenceLineClasses.line}`]: {
+    fill: 'none',
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1,
+    pointerEvents: 'none'
+  },
+  [`& .${_chartsReferenceLineClasses.referenceLineClasses.label}`]: (0, _extends2.default)({
+    fill: (theme.vars || theme).palette.text.primary,
+    stroke: 'none',
+    pointerEvents: 'none',
+    fontSize: 12
+  }, theme.typography.body1)
+}));

package/ChartsReferenceLine/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChartsReferenceLine';
+export * from './chartsReferenceLineClasses';

package/ChartsReferenceLine/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsReferenceLine = require("./ChartsReferenceLine");
+Object.keys(_ChartsReferenceLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsReferenceLine[key];
+    }
+  });
+});
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+Object.keys(_chartsReferenceLineClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsReferenceLineClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsReferenceLineClasses[key];
+    }
+  });
+});

package/ChartsReferenceLine/package.json

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

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/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/LineChart.d.ts

@@ -18,6 +18,13 @@ export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProp
 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.

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.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/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/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/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>>;

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/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.