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

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -1,15 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsText } from '../internals/components/ChartsText';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -47,7 +49,7 @@ function ChartsXAxis(inProps) {
       xAxis: {
         [_props$axisId]: {
           scale: xScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
@@ -78,7 +80,7 @@ function ChartsXAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const xTicks = useTicks({
     scale: xScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
   const positionSigne = position === 'bottom' ? 1 : -1;
@@ -86,10 +88,38 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
-  const Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : ChartsLine;
-  const Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : ChartsTick;
-  const TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsTickLabel;
-  const Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsLabel;
+  const Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
+  const Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
+  const TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
+  const Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  const axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+      style: {
+        fontSize: tickFontSize
+      },
+      className: classes.tickLabel
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps == null ? void 0 : 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__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
@@ -113,24 +143,17 @@ function ChartsXAxis(inProps) {
         }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
-          children: formattedValue
+          "transform-origin": `${xTickLabel}px ${yTickLabel}px`
+        }, axisTickLabelProps, {
+          text: formattedValue.toString()
         }))]
       }, index);
-    }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps == null ? void 0 : slotProps.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -1,14 +1,16 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
-import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsText } from '../internals/components/ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +49,7 @@ function ChartsYAxis(inProps) {
       yAxis: {
         [_props$axisId]: {
           scale: yScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
@@ -78,7 +80,7 @@ function ChartsYAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
     scale: yScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
   const positionSigne = position === 'right' ? 1 : -1;
@@ -86,10 +88,38 @@ function ChartsYAxis(inProps) {
     x: positionSigne * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  const Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : ChartsLine;
-  const Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : ChartsTick;
-  const TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsTickLabel;
-  const Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsLabel;
+  const Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
+  const Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
+  const TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
+  const Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  const axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
+    additionalProps: {
+      textAnchor: position === 'right' ? 'start' : 'end',
+      dominantBaseline: 'central',
+      style: {
+        fontSize: tickFontSize
+      },
+      className: classes.tickLabel
+    },
+    ownerState: {}
+  });
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps == null ? void 0 : 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__*/_jsxs(AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
@@ -114,24 +144,15 @@ function ChartsYAxis(inProps) {
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
-          children: formattedValue.toLocaleString()
-        }))]
+          text: formattedValue.toString()
+        }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transform: `rotate(${positionSigne * 90}deg)`,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps == null ? void 0 : slotProps.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {

package/esm/LineChart/LineChart.js

@@ -91,7 +91,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -165,23 +168,19 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -250,6 +249,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/esm/PieChart/PieArc.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded", "onClick"];
 import * as React from 'react';
 import { arc as d3Arc } from 'd3-shape';
 import PropTypes from 'prop-types';
@@ -55,7 +55,8 @@ export default function PieArc(props) {
       highlighted,
       faded = {
         additionalRadius: -5
-      }
+      },
+      onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -92,6 +93,8 @@ export default function PieArc(props) {
       innerRadius,
       outerRadius
     })),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
   }, getInteractionItemProps({

package/esm/PieChart/PieChart.js

@@ -46,7 +46,8 @@ function PieChart(props) {
     bottomAxis = null,
     children,
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -74,7 +75,8 @@ function PieChart(props) {
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onClick: onClick
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -146,23 +148,19 @@ process.env.NODE_ENV !== "production" ? PieChart.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,
@@ -170,6 +168,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  onClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -244,6 +243,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/esm/PieChart/PiePlot.js

@@ -27,7 +27,8 @@ function PiePlot(props) {
   var _slots$pieArc, _slots$pieArcLabel;
   const {
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const seriesData = React.useContext(SeriesContext).pie;
   const {
@@ -78,7 +79,14 @@ function PiePlot(props) {
               dataIndex: index,
               highlightScope: series[seriesId].highlightScope,
               highlighted: highlighted,
-              faded: faded
+              faded: faded,
+              onClick: onClick && (event => {
+                onClick(event, {
+                  type: 'pie',
+                  seriesId,
+                  dataIndex: index
+                }, item);
+              })
             }, slotProps == null ? void 0 : slotProps.pieArc));
           }), data.map((item, index) => {
             return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
@@ -103,6 +111,13 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: PropTypes.func,
   /**
    * The props used for each component slot.
    * @default {}

package/esm/ScatterChart/ScatterChart.js

@@ -128,23 +128,19 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -210,6 +206,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/esm/SparkLineChart/SparkLineChart.js

@@ -84,7 +84,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
         slots: slots,
         slotProps: slotProps
       })]
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slotProps: slotProps,
+      slots: slots
+    })), children]
   });
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -159,6 +162,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/esm/constants.js

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

package/esm/context/CartesianContextProvider.js

@@ -10,7 +10,7 @@ import { getScale } from '../internals/getScale';
 import { DrawingContext } from './DrawingProvider';
 import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { getTicksNumber } from '../hooks/useTicks';
+import { getTickNumber } from '../hooks/useTicks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
@@ -113,13 +113,13 @@ function CartesianContextProvider({
           barGapRatio
         }, axis, {
           scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
         completedXAxis[axis.id] = _extends({}, axis, {
           scale: scalePoint(axis.data, range),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -128,17 +128,17 @@ function CartesianContextProvider({
       }
       const scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       const extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
-      const ticksNumber = getTicksNumber(_extends({}, axis, {
+      const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [(_axis$min2 = axis.min) != null ? _axis$min2 : niceDomain[0], (_axis$max2 = axis.max) != null ? _axis$max2 : niceDomain[1]];
       completedXAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     const allYAxis = [...((_yAxis$map = yAxis == null ? void 0 : yAxis.map((axis, index) => _extends({
@@ -163,13 +163,13 @@ function CartesianContextProvider({
           barGapRatio: 0
         }, axis, {
           scale: scaleBand(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
         completedYAxis[axis.id] = _extends({}, axis, {
           scale: scalePoint(axis.data, [range[1], range[0]]),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -178,17 +178,17 @@ function CartesianContextProvider({
       }
       const scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
       const extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
-      const ticksNumber = getTicksNumber(_extends({}, axis, {
+      const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [(_axis$min4 = axis.min) != null ? _axis$min4 : niceDomain[0], (_axis$max4 = axis.max) != null ? _axis$max4 : niceDomain[1]];
       completedYAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     return {

package/esm/context/DrawingProvider.js

@@ -9,6 +9,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const DrawingContext = /*#__PURE__*/React.createContext({
   top: 0,
   left: 0,
+  bottom: 0,
+  right: 0,
   height: 300,
   width: 400
 });

package/esm/hooks/useChartDimensions.js

@@ -6,6 +6,8 @@ const useChartDimensions = (width, height, margin) => {
   const drawingArea = React.useMemo(() => ({
     left: defaultizedMargin.left,
     top: defaultizedMargin.top,
+    right: defaultizedMargin.right,
+    bottom: defaultizedMargin.bottom,
     width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
     height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom)
   }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);

package/esm/hooks/useTicks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
-export function getTicksNumber(params) {
+export function getTickNumber(params) {
   const {
     tickMaxStep,
     tickMinStep,
@@ -16,7 +16,7 @@ export function getTicksNumber(params) {
 function useTicks(options) {
   const {
     scale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   } = options;
   return React.useMemo(() => {
@@ -49,14 +49,14 @@ function useTicks(options) {
         };
       });
     }
-    return scale.ticks(ticksNumber).map(value => {
+    return scale.ticks(tickNumber).map(value => {
       var _valueFormatter3;
       return {
-        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(ticksNumber)(value),
+        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };
     });
-  }, [ticksNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter]);
 }
 export default useTicks;