@mui/x-charts 8.0.0-alpha.12 → 8.0.0-alpha.13

package/ChartsYAxis/ChartsYAxis.js

@@ -47,7 +47,6 @@ const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   overridesResolver: (props, styles) => styles.root
 })({});
 const defaultProps = {
-  position: 'left',
   disableLine: false,
   disableTicks: false,
   tickSize: 6
@@ -93,13 +92,11 @@ function ChartsYAxis(inProps) {
     tickLabelPlacement,
     tickInterval,
     tickLabelInterval,
-    sx
+    sx,
+    offset
   } = defaultizedProps;
-  const theme = (0, _styles.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
-  const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
-    theme
-  }));
+  const classes = useUtilityClasses(defaultizedProps);
   const {
     instance
   } = (0, _ChartProvider.useChartContext)();
@@ -165,14 +162,16 @@ function ChartsYAxis(inProps) {
   });
   const domain = yScale.domain();
   const ordinalAxis = (0, _isBandScale.isBandScale)(yScale);
+
   // Skip axis rendering if no data is available
   // - The domain is an empty array for band/point scales.
   // - The domains contains Infinity for continuous scales.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity)) {
+  // - The position is 'none'.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity) || position === 'none') {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
-    transform: `translate(${position === 'right' ? left + width : left}, 0)`,
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
@@ -181,7 +180,7 @@ function ChartsYAxis(inProps) {
       className: classes.line
     }, lineSlotProps)), yTicks.map(({
       formattedValue,
-      offset,
+      offset: tickOffset,
       labelOffset,
       value
     }, index) => {
@@ -190,7 +189,7 @@ function ChartsYAxis(inProps) {
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
       const showLabel = instance.isPointInside({
         x: -1,
-        y: offset
+        y: tickOffset
       }, {
         direction: 'y'
       });
@@ -198,7 +197,7 @@ function ChartsYAxis(inProps) {
         return null;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        transform: `translate(0, ${offset})`,
+        transform: `translate(0, ${tickOffset})`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           x2: positionSign * tickSize,
@@ -222,6 +221,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  axis: _propTypes.default.oneOf(['y']),
   /**
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
@@ -254,10 +254,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The style applied to the axis label.
    */
   labelStyle: _propTypes.default.object,
-  /**
-   * Position of the axis.
-   */
-  position: _propTypes.default.oneOf(['left', 'right']),
   /**
    * The props used for each component slot.
    * @default {}

package/Gauge/Gauge.js

@@ -104,14 +104,15 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * The radius between circle center and the end of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.

package/Gauge/GaugeContainer.js

@@ -15,6 +15,7 @@ var _styles = require("@mui/material/styles");
 var _ChartsSurface = require("../ChartsSurface");
 var _GaugeProvider = require("./GaugeProvider");
 var _ChartProvider = require("../context/ChartProvider");
+var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
 const GStyled = (0, _styles.styled)('g')(({
@@ -48,12 +49,12 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
     pluginParams: {
       width: inWidth,
       height: inHeight,
-      margin: (0, _extends2.default)({
+      margin: (0, _defaultizeMargin.defaultizeMargin)(margin, {
         left: 10,
         right: 10,
         top: 10,
         bottom: 10
-      }, margin)
+      })
     },
     plugins: [],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
@@ -134,14 +135,15 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * The radius between circle center and the end of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.

package/LineChart/LineChart.d.ts

@@ -21,7 +21,7 @@ export interface LineChartProps extends Omit<ChartContainerProps<'line', LineCha
    * The series to display in the line chart.
    * An array of [[LineSeriesType]] objects.
    */
-  series: MakeOptional<LineSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<LineSeriesType, 'type'>[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

package/LineChart/LineChart.js

@@ -94,12 +94,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -150,12 +144,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: _propTypes.default.string,
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -164,14 +152,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * Callback fired when an area element is clicked.
    */
@@ -197,12 +186,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: _propTypes.default.func,
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The series to display in the line chart.
    * An array of [[LineSeriesType]] objects.
@@ -226,12 +209,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -242,6 +219,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -264,13 +242,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'top']),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -279,6 +259,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelMinGap: _propTypes.default.number,
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
@@ -294,6 +275,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -322,7 +304,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['left', 'right']),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -338,6 +321,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    width: _propTypes.default.number
   }))
 } : void 0;

package/LineChart/useLineChartProps.js

@@ -10,9 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
-var _calculateMargins = require("../internals/calculateMargins");
 var _LineChart = require("./LineChart.plugins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -36,12 +35,7 @@ const useLineChartProps = props => {
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
-      hideLegend,
       grid,
-      topAxis,
-      leftAxis,
-      rightAxis,
-      bottomAxis,
       children,
       slots,
       slotProps,
@@ -61,12 +55,7 @@ const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin: (0, _calculateMargins.calculateMargins)({
-      margin,
-      hideLegend,
-      slotProps,
-      series
-    }),
+    margin,
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -116,10 +105,6 @@ const useLineChartProps = props => {
     loading
   };
   const chartsAxisProps = {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   };

package/PieChart/PieArcLabelPlot.js

@@ -140,7 +140,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     index: _propTypes.default.number.isRequired,
     label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
-    labelMarkType: _propTypes.default.oneOf(['circle', 'line', 'square']),
+    labelMarkType: _propTypes.default.oneOfType([_propTypes.default.oneOf(['circle', 'line', 'square']), _propTypes.default.func]),
     padAngle: _propTypes.default.number.isRequired,
     startAngle: _propTypes.default.number.isRequired,
     value: _propTypes.default.number.isRequired

package/PieChart/PieArcPlot.js

@@ -106,7 +106,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     index: _propTypes.default.number.isRequired,
     label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
-    labelMarkType: _propTypes.default.oneOf(['circle', 'line', 'square']),
+    labelMarkType: _propTypes.default.oneOfType([_propTypes.default.oneOf(['circle', 'line', 'square']), _propTypes.default.func]),
     padAngle: _propTypes.default.number.isRequired,
     startAngle: _propTypes.default.number.isRequired,
     value: _propTypes.default.number.isRequired

package/PieChart/PieChart.d.ts

@@ -15,7 +15,7 @@ export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartP
    * The series to display in the pie chart.
    * An array of [[PieSeriesType]] objects.
    */
-  series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
+  series: Readonly<MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[]>;
   /**
    * If `true`, the legend is not rendered.
    */

package/PieChart/PieChart.js

@@ -21,6 +21,7 @@ var _ChartDataProvider = require("../ChartDataProvider");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _PieChart = require("./PieChart.plugins");
+var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 const defaultMargin = {
@@ -64,7 +65,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
+  const margin = (0, _defaultizeMargin.defaultizeMargin)(marginProps, defaultMargin);
   const {
     chartDataProviderProps,
     chartsSurfaceProps
@@ -157,14 +158,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * The callback fired when the highlighted item changes.
    *

package/ScatterChart/ScatterChart.d.ts

@@ -19,7 +19,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * The series to display in the scatter chart.
    * An array of [[ScatterSeriesType]] objects.
    */
-  series: MakeOptional<ScatterSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<ScatterSeriesType, 'type'>[]>;
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.

package/ScatterChart/ScatterChart.js

@@ -85,12 +85,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -142,12 +136,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: _propTypes.default.string,
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -156,14 +144,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.shape({
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
     right: _propTypes.default.number,
     top: _propTypes.default.number
-  }),
+  })]),
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
@@ -183,12 +172,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeriesType]] objects.
@@ -212,12 +195,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.
@@ -233,6 +210,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -255,13 +233,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
+    height: _propTypes.default.number,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'top']),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -270,6 +250,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelMinGap: _propTypes.default.number,
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
@@ -285,6 +266,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
@@ -313,7 +295,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['left', 'right']),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -329,7 +312,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    width: _propTypes.default.number
   })),
   /**
    * The configuration of the z-axes.

package/ScatterChart/useScatterChartProps.js

@@ -8,9 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useScatterChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _calculateMargins = require("../internals/calculateMargins");
 var _ScatterChart = require("./ScatterChart.plugins");
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -27,17 +26,12 @@ const useScatterChartProps = props => {
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
-      hideLegend,
       width,
       height,
       margin,
       colors,
       sx,
       grid,
-      topAxis,
-      leftAxis,
-      rightAxis,
-      bottomAxis,
       onItemClick,
       children,
       slots,
@@ -54,12 +48,7 @@ const useScatterChartProps = props => {
     }, s)),
     width,
     height,
-    margin: (0, _calculateMargins.calculateMargins)({
-      margin,
-      hideLegend,
-      slotProps,
-      series
-    }),
+    margin,
     colors,
     xAxis,
     yAxis,
@@ -73,10 +62,6 @@ const useScatterChartProps = props => {
     plugins: _ScatterChart.SCATTER_CHART_PLUGINS
   });
   const chartsAxisProps = {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   };

package/SparkLineChart/SparkLineChart.d.ts

@@ -67,15 +67,11 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default {
-   *   top: 5,
-   *   bottom: 5,
-   *   left: 5,
-   *   right: 5,
-   * }
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
    */
-  margin?: Partial<ChartMargin>;
+  margin?: Partial<ChartMargin> | number;
   /**
    * Overridable component slots.
    * @default {}