@mui/x-charts 6.0.0-alpha.14 → 6.0.0-alpha.15

package/ChartsSurface.js

@@ -11,7 +11,7 @@ var _styles = require("@mui/material/styles");
 var React = _interopRequireWildcard(require("react"));
 var _useAxisEvents = require("./hooks/useAxisEvents");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
@@ -24,8 +24,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       width,
       height,
       viewBox,
-      disableAxisListener = false,
-      sx
+      disableAxisListener = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const svgView = (0, _extends2.default)({
@@ -39,14 +38,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
     width: width,
     height: height,
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref,
-    sx: [{
-      '--ChartsLegend-itemWidth': '100px',
-      '--ChartsLegend-itemMarkSize': '20px',
-      '--ChartsLegend-rootSpacing': '5px',
-      '--ChartsLegend-labelSpacing': '5px',
-      '--ChartsLegend-rootOffsetY': '-20px'
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    ref: ref
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: props.title

package/ChartsXAxis/ChartsXAxis.js

@@ -9,15 +9,17 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _ChartsText = require("../internals/components/ChartsText");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -33,7 +35,7 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
 const defaultProps = {
   position: 'bottom',
@@ -54,7 +56,7 @@ function ChartsXAxis(inProps) {
       xAxis: {
         [_props$axisId]: {
           scale: xScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
@@ -85,7 +87,7 @@ function ChartsXAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const xTicks = (0, _useTicks.default)({
     scale: xScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
   const positionSigne = position === 'bottom' ? 1 : -1;
@@ -93,10 +95,38 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
-  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
-  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
-  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const axisTickLabelProps = (0, _utils.useSlotProps)({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+      style: {
+        fontSize: tickFontSize
+      },
+      className: classes.tickLabel
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
+  const axisLabelProps = (0, _utils.useSlotProps)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+      style: {
+        fontSize: labelFontSize,
+        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
+      },
+      className: classes.label
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
@@ -120,24 +150,17 @@ function ChartsXAxis(inProps) {
         }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue
+          "transform-origin": `${xTickLabel}px ${yTickLabel}px`
+        }, axisTickLabelProps, {
+          text: formattedValue.toString()
         }))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {

package/ChartsYAxis/ChartsYAxis.js

@@ -9,15 +9,17 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _ChartsText = require("../internals/components/ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -33,7 +35,7 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
 const defaultProps = {
   position: 'left',
@@ -54,7 +56,7 @@ function ChartsYAxis(inProps) {
       yAxis: {
         [_props$axisId]: {
           scale: yScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
@@ -85,7 +87,7 @@ function ChartsYAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.default)({
     scale: yScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
   const positionSigne = position === 'right' ? 1 : -1;
@@ -93,10 +95,38 @@ function ChartsYAxis(inProps) {
     x: positionSigne * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
-  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
-  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const axisTickLabelProps = (0, _utils.useSlotProps)({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      textAnchor: position === 'right' ? 'start' : 'end',
+      dominantBaseline: 'central',
+      style: {
+        fontSize: tickFontSize
+      },
+      className: classes.tickLabel
+    },
+    ownerState: {}
+  });
+  const axisLabelProps = (0, _utils.useSlotProps)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: 'auto',
+      style: {
+        fontSize: labelFontSize,
+        transform: `rotate(${positionSigne * 90}deg)`,
+        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
+      },
+      className: classes.label
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
@@ -121,24 +151,15 @@ function ChartsYAxis(inProps) {
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue.toLocaleString()
-        }))]
+          text: formattedValue.toString()
+        }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transform: `rotate(${positionSigne * 90}deg)`,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {

package/LineChart/LineChart.d.ts

@@ -19,6 +19,9 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
     series: MakeOptional<LineSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
     /**
      * If `true`, render the line highlight item.

package/LineChart/LineChart.js

@@ -173,23 +173,19 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,

package/PieChart/PieChart.d.ts

@@ -17,6 +17,9 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
     onClick?: PiePlotProps['onClick'];
     slots?: PieChartSlotsComponent;

package/PieChart/PieChart.js

@@ -156,23 +156,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,

package/ScatterChart/ScatterChart.d.ts

@@ -16,6 +16,9 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
     /**
      * Overridable component slots.

package/ScatterChart/ScatterChart.js

@@ -136,23 +136,19 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,

package/constants.js

@@ -7,7 +7,7 @@ exports.DEFAULT_Y_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = exports.DEFAULT_MARGIN
 const DEFAULT_X_AXIS_KEY = exports.DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 const DEFAULT_Y_AXIS_KEY = exports.DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
-  top: 100,
+  top: 50,
   bottom: 50,
   left: 50,
   right: 50

package/context/CartesianContextProvider.js

@@ -119,13 +119,13 @@ function CartesianContextProvider({
           barGapRatio
         }, axis, {
           scale: (0, _d3Scale.scaleBand)(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
         completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
           scale: (0, _d3Scale.scalePoint)(axis.data, range),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -134,17 +134,17 @@ function CartesianContextProvider({
       }
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
-      const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
+      const tickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     const allYAxis = [...(yAxis?.map((axis, index) => (0, _extends2.default)({
@@ -167,13 +167,13 @@ function CartesianContextProvider({
           barGapRatio: 0
         }, axis, {
           scale: (0, _d3Scale.scaleBand)(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
         completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
           scale: (0, _d3Scale.scalePoint)(axis.data, [range[1], range[0]]),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -182,17 +182,17 @@ function CartesianContextProvider({
       }
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
-      const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
+      const tickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     return {

package/context/DrawingProvider.d.ts

@@ -10,6 +10,8 @@ export interface DrawingProviderProps extends LayoutConfig {
 export type DrawingArea = {
     left: number;
     top: number;
+    bottom: number;
+    right: number;
     width: number;
     height: number;
 };

package/context/DrawingProvider.js

@@ -20,6 +20,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const DrawingContext = exports.DrawingContext = /*#__PURE__*/React.createContext({
   top: 0,
   left: 0,
+  bottom: 0,
+  right: 0,
   height: 300,
   width: 400
 });

package/esm/BarChart/BarChart.js

@@ -162,23 +162,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
   margin: PropTypes.shape({
     bottom: PropTypes.number,