@mui/x-charts 6.18.0 → 6.18.2

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

@@ -30,5 +30,8 @@ export type PieArcProps = PieArcOwnerState & React.ComponentPropsWithoutRef<'pat
     highlightScope?: Partial<HighlightScope>;
     onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
 };
-export default function PieArc(props: PieArcProps): React.JSX.Element;
-export {};
+declare function PieArc(props: PieArcProps): React.JSX.Element;
+declare namespace PieArc {
+    var propTypes: any;
+}
+export { PieArc };

package/PieChart/PieArc.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = PieArc;
+exports.PieArc = PieArc;
 exports.getPieArcUtilityClass = getPieArcUtilityClass;
 exports.pieArcClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
 var _web = require("@react-spring/web");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -93,4 +94,18 @@ function PieArc(props) {
     seriesId: id,
     dataIndex
   })));
-}
+}
+process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
+  dataIndex: _propTypes.default.number.isRequired,
+  highlightScope: _propTypes.default.shape({
+    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
+    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
+  }),
+  isFaded: _propTypes.default.bool.isRequired,
+  isHighlighted: _propTypes.default.bool.isRequired
+} : void 0;

package/PieChart/PieArcLabel.d.ts

@@ -32,4 +32,4 @@ declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
 declare namespace PieArcLabel {
     var propTypes: any;
 }
-export default PieArcLabel;
+export { PieArcLabel };

package/PieChart/PieArcLabel.js

@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = PieArcLabel;
+exports.PieArcLabel = PieArcLabel;
 exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
 exports.pieArcLabelClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _web = require("@react-spring/web");
 var _d3Shape = require("d3-shape");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
@@ -109,12 +109,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
-  cornerRadius: _propTypes.default.number,
-  dataIndex: _propTypes.default.number.isRequired,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
-  innerRadius: _propTypes.default.number,
-  outerRadius: _propTypes.default.number.isRequired
+  formattedArcLabel: _propTypes.default.string,
+  isFaded: _propTypes.default.bool.isRequired,
+  isHighlighted: _propTypes.default.bool.isRequired
 } : void 0;

package/PieChart/PieArcLabelPlot.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _web = require("@react-spring/web");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
-var _PieArcLabel = _interopRequireDefault(require("./PieArcLabel"));
+var _PieArcLabel = require("./PieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
@@ -68,7 +68,7 @@ function PieArcLabelPlot(props) {
   if (data.length === 0) {
     return null;
   }
-  const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.default;
+  const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.PieArcLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: transition((_ref, item) => {
       let {

package/PieChart/PieArcPlot.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _web = require("@react-spring/web");
-var _PieArc = _interopRequireDefault(require("./PieArc"));
+var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,7 +53,7 @@ function PieArcPlot(props) {
   if (data.length === 0) {
     return null;
   }
-  const Arc = slots?.pieArc ?? _PieArc.default;
+  const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: transition((_ref, item, _, index) => {
       let {

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

@@ -1,4 +1,6 @@
 export { PiePlot } from './PiePlot';
 export { PieChart } from './PieChart';
-export * from './PieArc';
-export * from './PieArcLabel';
+export { PieArcLabel, getPieArcLabelUtilityClass, pieArcLabelClasses } from './PieArcLabel';
+export type { PieArcLabelClassKey, PieArcLabelClasses, PieArcLabelProps } from './PieArcLabel';
+export { PieArc, getPieArcUtilityClass, pieArcClasses } from './PieArc';
+export type { PieArcClassKey, PieArcClasses, PieArcProps } from './PieArc';

package/PieChart/index.js

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  PiePlot: true,
-  PieChart: true
-};
+Object.defineProperty(exports, "PieArc", {
+  enumerable: true,
+  get: function () {
+    return _PieArc.PieArc;
+  }
+});
+Object.defineProperty(exports, "PieArcLabel", {
+  enumerable: true,
+  get: function () {
+    return _PieArcLabel.PieArcLabel;
+  }
+});
 Object.defineProperty(exports, "PieChart", {
   enumerable: true,
   get: function () {
@@ -19,29 +27,31 @@ Object.defineProperty(exports, "PiePlot", {
     return _PiePlot.PiePlot;
   }
 });
+Object.defineProperty(exports, "getPieArcLabelUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _PieArcLabel.getPieArcLabelUtilityClass;
+  }
+});
+Object.defineProperty(exports, "getPieArcUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _PieArc.getPieArcUtilityClass;
+  }
+});
+Object.defineProperty(exports, "pieArcClasses", {
+  enumerable: true,
+  get: function () {
+    return _PieArc.pieArcClasses;
+  }
+});
+Object.defineProperty(exports, "pieArcLabelClasses", {
+  enumerable: true,
+  get: function () {
+    return _PieArcLabel.pieArcLabelClasses;
+  }
+});
 var _PiePlot = require("./PiePlot");
 var _PieChart = require("./PieChart");
-var _PieArc = require("./PieArc");
-Object.keys(_PieArc).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _PieArc[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _PieArc[key];
-    }
-  });
-});
 var _PieArcLabel = require("./PieArcLabel");
-Object.keys(_PieArcLabel).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _PieArcLabel[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _PieArcLabel[key];
-    }
-  });
-});
+var _PieArc = require("./PieArc");

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.

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[];
 }>;
 /**