@mui/x-charts 7.3.0 → 7.3.2

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -7,6 +7,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
 import { isCartesianSeriesType } from './utils';
 import colorGetter from '../internals/colorGetter';
+import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
@@ -25,6 +26,10 @@ function ChartsAxisTooltipContent(props) {
     yAxisIds,
     yAxis
   } = React.useContext(CartesianContext);
+  const {
+    zAxisIds,
+    zAxis
+  } = React.useContext(ZAxisContext);
   const series = React.useContext(SeriesContext);
   const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   const relevantSeries = React.useMemo(() => {
@@ -35,15 +40,23 @@ function ChartsAxisTooltipContent(props) {
         const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           const seriesToAdd = series[seriesType].series[seriesId];
-          const color = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]]);
+          let getColor;
+          switch (seriesToAdd.type) {
+            case 'scatter':
+              getColor = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxis[seriesToAdd.zAxisKey ?? zAxisIds[0]]);
+              break;
+            default:
+              getColor = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]]);
+              break;
+          }
           rep.push(_extends({}, seriesToAdd, {
-            getColor: color
+            getColor
           }));
         }
       });
     });
     return rep;
-  }, [USED_AXIS_ID, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds]);
+  }, [USED_AXIS_ID, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
   const relevantAxis = React.useMemo(() => {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
@@ -93,7 +106,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
         value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
       })
     }),
-    axisValue: PropTypes.any,
+    axisValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     dataIndex: PropTypes.number,
     series: PropTypes.arrayOf(PropTypes.object),

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -6,6 +6,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import colorGetter from '../internals/colorGetter';
+import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
   const {
@@ -16,16 +17,31 @@ function ChartsItemTooltipContent(props) {
     contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
-  const axisData = React.useContext(CartesianContext);
   const {
     xAxis,
     yAxis,
     xAxisIds,
     yAxisIds
-  } = axisData;
+  } = React.useContext(CartesianContext);
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  const getColor = series.type === 'pie' ? colorGetter(series) : colorGetter(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId]);
+  const defaultZAxisId = zAxisIds[0];
+  let getColor;
+  switch (series.type) {
+    case 'pie':
+      getColor = colorGetter(series);
+      break;
+    case 'scatter':
+      getColor = colorGetter(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId], zAxis[series.zAxisKey ?? defaultZAxisId]);
+      break;
+    default:
+      getColor = colorGetter(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId]);
+      break;
+  }
   const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Component to override the tooltip content when triger is set to 'axis'.
+   * Component to override the tooltip content when trigger is set to 'axis'.
    * @deprecated Use slots.axisContent instead
    */
   axisContent: PropTypes.elementType,
@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    */
   classes: PropTypes.object,
   /**
-   * Component to override the tooltip content when triger is set to 'item'.
+   * Component to override the tooltip content when trigger is set to 'item'.
    * @deprecated Use slots.itemContent instead
    */
   itemContent: PropTypes.elementType,

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,5 +1,5 @@
-import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
 import { chartsTooltipClasses } from './chartsTooltipClasses';
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
@@ -7,10 +7,10 @@ export const ChartsTooltipPaper = styled('div', {
 })(({
   theme
 }) => ({
+  boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
   transition: theme.transitions.create('box-shadow'),
-  border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: theme.shape.borderRadius
 }));
 export const ChartsTooltipTable = styled('table', {
@@ -59,19 +59,19 @@ export const ChartsTooltipCell = styled('td', {
     paddingRight: theme.spacing(2)
   }
 }));
-
-// eslint-disable-next-line material-ui/no-styled-box
-export const ChartsTooltipMark = styled(Box, {
+export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Mark'
+  slot: 'Mark',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'color'
 })(({
   theme,
-  ownerState
+  color
 }) => ({
   width: theme.spacing(1),
   height: theme.spacing(1),
   borderRadius: '50%',
-  backgroundColor: ownerState.color,
+  boxShadow: theme.shadows[1],
+  backgroundColor: color,
   borderColor: (theme.vars || theme).palette.background.paper,
   border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -4,8 +4,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
 import { isCartesianSeries, utcFormatter } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
   const {
     series,
@@ -56,10 +55,7 @@ function DefaultChartsAxisTooltipContent(props) {
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.markCell, classes.cell),
               children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-                ownerState: {
-                  color: getColor(dataIndex) ?? color
-                },
-                boxShadow: 1,
+                color: getColor(dataIndex) ?? color,
                 className: classes.mark
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
@@ -104,7 +100,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propType
   /**
    * The value associated to the current mouse position.
    */
-  axisValue: PropTypes.any.isRequired,
+  axisValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -2,8 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsItemTooltipContent(props) {
   const {
     series,
@@ -40,9 +39,7 @@ function DefaultChartsItemTooltipContent(props) {
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes.markCell, classes.cell),
             children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
+              color: color,
               className: classes.mark
             })
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -15,8 +15,7 @@ import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getWordsByLines } from '../internals/getWordsByLines';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -204,6 +203,13 @@ function ChartsXAxis(inProps) {
     },
     ownerState: {}
   });
+  const domain = xScale.domain();
+  if (domain.length === 0 || domain[0] === domain[1]) {
+    // Skip axis rendering if
+    // - the data is empty (for band and point axis)
+    // - No data is associated to the axis (other scale types)
+    return null;
+  }
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -12,8 +12,7 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -139,6 +138,13 @@ function ChartsYAxis(inProps) {
     },
     ownerState: {}
   });
+  const domain = yScale.domain();
+  if (domain.length === 0 || domain[0] === domain[1]) {
+    // Skip axis rendering if
+    // - the data is empty (for band and point axis)
+    // - No data is associated to the axis (other scale types)
+    return null;
+  }
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,

package/modern/Gauge/Gauge.js

@@ -9,8 +9,7 @@ import { GaugeValueArc } from './GaugeValueArc';
 import { GaugeReferenceArc } from './GaugeReferenceArc';
 import { getGaugeUtilityClass } from './gaugeClasses';
 import { GaugeValueText } from './GaugeValueText';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = props => {
   const {
     classes
@@ -85,7 +84,7 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    */
   height: PropTypes.number,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the maximal radius that fit into the drawing area.
    * @default '80%'

package/modern/Gauge/GaugeContainer.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   height: PropTypes.number,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the maximal radius that fit into the drawing area.
    * @default '80%'

package/modern/Gauge/GaugeProvider.js

@@ -48,7 +48,7 @@ export function GaugeProvider(props) {
   let cy = top + innerCy;
   const maxRadius = getAvailableRadius(innerCx, innerCy, width, height, ratios);
 
-  // If the center is not defined, after computation of the available radius, udpate the center to use the remaining space.
+  // If the center is not defined, after computation of the available radius, update the center to use the remaining space.
   if (cxParam === undefined) {
     const usedWidth = maxRadius * (ratios.maxX - ratios.minX);
     cx = left + (width - usedWidth) / 2 + ratios.cx * usedWidth;

package/modern/Gauge/utils.js

@@ -7,7 +7,7 @@ function getPoint(angle) {
 }
 
 /**
- * Retruns the ratio of the arc bounding box and its center.
+ * Returns the ratio of the arc bounding box and its center.
  * @param startAngle The start angle (in deg)
  * @param endAngle The end angle (in deg)
  */
@@ -20,9 +20,9 @@ export function getArcRatios(startAngle, endAngle) {
   const maxAngle = Math.max(startAngle, endAngle);
   const initialAngle = Math.floor(minAngle / 90) * 90;
   for (let step = 1; step <= 4; step += 1) {
-    const cartinalAngle = initialAngle + step * 90;
-    if (cartinalAngle < maxAngle) {
-      points.push(getPoint(cartinalAngle));
+    const cardinalAngle = initialAngle + step * 90;
+    if (cardinalAngle < maxAngle) {
+      points.push(getPoint(cardinalAngle));
     }
   }
   const minX = Math.min(...points.map(([x]) => x));

package/modern/LineChart/AnimatedArea.js

@@ -9,8 +9,7 @@ import { animated, useSpring } from '@react-spring/web';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
 import { cleanId } from '../internals/utils';
 import { useChartId, useDrawingArea } from '../hooks';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaElementPath = styled(animated.path, {
   name: 'MuiAreaElement',
   slot: 'Root',

package/modern/LineChart/AnimatedLine.js

@@ -10,8 +10,7 @@ import { useAnimatedPath } from '../internals/useAnimatedPath';
 import { cleanId } from '../internals/utils';
 import { useChartId } from '../hooks/useChartId';
 import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LineElementPath = styled(animated.path, {
   name: 'MuiLineElement',
   slot: 'Root',

package/modern/LineChart/LineChart.js

@@ -15,8 +15,8 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
  *
@@ -56,7 +56,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     children,
     slots,
     slotProps,
-    skipAnimation
+    skipAnimation,
+    loading
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -98,6 +99,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
         slotProps: slotProps,
         onItemClick: onLineClick,
         skipAnimation: skipAnimation
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
       })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
@@ -117,7 +122,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    })), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -144,30 +149,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * 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.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['bottom', 'top']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -206,30 +188,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * 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.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['left', 'right']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * @deprecated Consider using `slotProps.legend` instead.
    */
@@ -244,6 +203,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: PropTypes.bool,
   /**
    * 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.
@@ -280,32 +243,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['left', 'right']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The series to display in the line chart.
+   * An array of [[LineSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -343,30 +284,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    classes: PropTypes.object,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    fill: PropTypes.string,
-    label: PropTypes.string,
-    labelFontSize: PropTypes.number,
-    labelStyle: PropTypes.object,
-    position: PropTypes.oneOf(['bottom', 'top']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    tickFontSize: PropTypes.number,
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number
-  }), PropTypes.string]),
+  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   viewBox: PropTypes.shape({
     height: PropTypes.number,
     width: PropTypes.number,
@@ -380,6 +298,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -432,6 +351,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/modern/PieChart/PieArcLabel.js

@@ -39,7 +39,7 @@ const PieArcLabelRoot = styled(animated.text, {
 }));
 /**
  * Helper to compute label position.
- * It's not an inline function because we need it in inerpolation.
+ * It's not an inline function because we need it in interpolation.
  */
 const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
   if (!formattedArcLabel) {

package/modern/PieChart/PieArcLabelPlot.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     value: PropTypes.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
@@ -142,7 +142,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     paddingAngle: PropTypes.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
@@ -159,7 +159,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * @default 0
    */
   innerRadius: PropTypes.number,

package/modern/PieChart/PieArcPlot.js

@@ -109,7 +109,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     value: PropTypes.number.isRequired
   })).isRequired,
   /**
-   * Override the arc attibutes when it is faded.
+   * Override the arc attributes when it is faded.
    * @default { additionalRadius: -5 }
    */
   faded: PropTypes.shape({
@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     paddingAngle: PropTypes.number
   }),
   /**
-   * Override the arc attibutes when it is highlighted.
+   * Override the arc attributes when it is highlighted.
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
@@ -139,7 +139,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
-   * The radius between circle center and the begining of the arc.
+   * The radius between circle center and the beginning of the arc.
    * @default 0
    */
   innerRadius: PropTypes.number,