@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/legacy/PieChart/PieArc.js

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
+var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
 import { arc as d3Arc } from 'd3-shape';
-import PropTypes from 'prop-types';
+import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { InteractionContext } from '../context/InteractionProvider';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcUtilityClass(slot) {
   return generateUtilityClass('MuiPieArc', slot);
@@ -25,54 +24,36 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getPieArcUtilityClass, classes);
 };
-var PieArcRoot = styled('path', {
+var PieArcRoot = styled(animated.path, {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
     return styles.arc;
   }
 })(function (_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
+  var theme = _ref.theme;
   return {
-    stroke: theme.palette.background.paper,
+    stroke: (theme.vars || theme).palette.background.paper,
     strokeWidth: 1,
-    strokeLinejoin: 'round',
-    fill: ownerState.color,
-    opacity: ownerState.isFaded ? 0.3 : 1
+    strokeLinejoin: 'round'
   };
 });
 export default function PieArc(props) {
-  var _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
   var id = props.id,
     dataIndex = props.dataIndex,
     innerClasses = props.classes,
     color = props.color,
     highlightScope = props.highlightScope,
-    _props$innerRadius = props.innerRadius,
-    baseInnerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
-    baseOuterRadius = props.outerRadius,
-    _props$cornerRadius = props.cornerRadius,
-    baseCornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
-    highlighted = props.highlighted,
-    _props$faded = props.faded,
-    faded = _props$faded === void 0 ? {
-      additionalRadius: -5
-    } : _props$faded,
+    onClick = props.onClick,
+    isFaded = props.isFaded,
+    isHighlighted = props.isHighlighted,
+    startAngle = props.startAngle,
+    endAngle = props.endAngle,
+    paddingAngle = props.paddingAngle,
+    innerRadius = props.innerRadius,
+    outerRadius = props.outerRadius,
+    cornerRadius = props.cornerRadius,
     other = _objectWithoutProperties(props, _excluded);
-  var getInteractionItemProps = useInteractionItemProps(highlightScope);
-  var _React$useContext = React.useContext(InteractionContext),
-    item = _React$useContext.item;
-  var isHighlighted = getIsHighlighted(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex: dataIndex
-  }, highlightScope);
-  var isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex: dataIndex
-  }, highlightScope);
   var ownerState = {
     id: id,
     dataIndex: dataIndex,
@@ -82,37 +63,24 @@ export default function PieArc(props) {
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  var attibuesOverride = _extends({
-    additionalRadius: 0
-  }, isFaded && faded || isHighlighted && highlighted || {});
-  var innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
-  var outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
-  var cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
+  var getInteractionItemProps = useInteractionItemProps(highlightScope);
   return /*#__PURE__*/_jsx(PieArcRoot, _extends({
-    d: d3Arc().cornerRadius(cornerRadius)(_extends({}, other, {
-      innerRadius: innerRadius,
-      outerRadius: outerRadius
-    })),
+    d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], function (sA, eA, pA, iR, oR, cR) {
+      return d3Arc().cornerRadius(cR)({
+        padAngle: pA,
+        startAngle: sA,
+        endAngle: eA,
+        innerRadius: iR,
+        outerRadius: oR
+      });
+    }),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
-  }, getInteractionItemProps({
+  }, other, getInteractionItemProps({
     type: 'pie',
     seriesId: id,
     dataIndex: dataIndex
   })));
-}
-process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: PropTypes.object,
-  cornerRadius: PropTypes.number,
-  dataIndex: PropTypes.number.isRequired,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
-  innerRadius: PropTypes.number,
-  outerRadius: PropTypes.number.isRequired
-} : void 0;
+}

package/legacy/PieChart/PieArcLabel.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
+import { animated, to } from '@react-spring/web';
 import { arc as d3Arc } from 'd3-shape';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { InteractionContext } from '../context/InteractionProvider';
-import { getIsFaded, getIsHighlighted } from '../hooks/useInteractionItemProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcLabelUtilityClass(slot) {
   return generateUtilityClass('MuiPieArcLabel', slot);
@@ -25,7 +25,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getPieArcLabelUtilityClass, classes);
 };
-var PieArcLabelRoot = styled('text', {
+var PieArcLabelRoot = styled(animated.text, {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: function overridesResolver(_, styles) {
@@ -34,54 +34,68 @@ var PieArcLabelRoot = styled('text', {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    fill: theme.palette.text.primary,
-    textAnchor: 'middle'
+    fill: (theme.vars || theme).palette.text.primary,
+    textAnchor: 'middle',
+    dominantBaseline: 'middle'
   };
 });
+/**
+ * Helper to compute label position.
+ * It's not an inline function because we need it in inerpolation.
+ */
+var getLabelPosition = function getLabelPosition(formattedArcLabel, variable) {
+  return function (startAngle, endAngle, padAngle, innerRadius, outerRadius, cornerRadius) {
+    if (!formattedArcLabel) {
+      return 0;
+    }
+    var _ref2 = d3Arc().cornerRadius(cornerRadius).centroid({
+        padAngle: padAngle,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        innerRadius: innerRadius,
+        outerRadius: outerRadius
+      }),
+      _ref3 = _slicedToArray(_ref2, 2),
+      x = _ref3[0],
+      y = _ref3[1];
+    if (variable === 'x') {
+      return x;
+    }
+    return y;
+  };
+};
 export default function PieArcLabel(props) {
   var id = props.id,
-    dataIndex = props.dataIndex,
     innerClasses = props.classes,
     color = props.color,
-    highlightScope = props.highlightScope,
-    _props$innerRadius = props.innerRadius,
-    innerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
+    startAngle = props.startAngle,
+    endAngle = props.endAngle,
+    paddingAngle = props.paddingAngle,
+    innerRadius = props.innerRadius,
     outerRadius = props.outerRadius,
-    _props$cornerRadius = props.cornerRadius,
-    cornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
+    cornerRadius = props.cornerRadius,
     formattedArcLabel = props.formattedArcLabel,
+    isHighlighted = props.isHighlighted,
+    isFaded = props.isFaded,
+    style = props.style,
     other = _objectWithoutProperties(props, _excluded);
-  var _React$useContext = React.useContext(InteractionContext),
-    item = _React$useContext.item;
-  var isHighlighted = getIsHighlighted(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex: dataIndex
-  }, highlightScope);
-  var isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex: dataIndex
-  }, highlightScope);
   var ownerState = {
     id: id,
-    dataIndex: dataIndex,
     classes: innerClasses,
     color: color,
     isFaded: isFaded,
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  var arcLabelPosition = formattedArcLabel ? d3Arc().cornerRadius(cornerRadius).centroid(_extends({}, other, {
-    innerRadius: innerRadius,
-    outerRadius: outerRadius
-  })) : [0, 0];
-  return /*#__PURE__*/_jsx(PieArcLabelRoot, {
-    className: classes.root,
-    x: arcLabelPosition[0],
-    y: arcLabelPosition[1],
+  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
+    className: classes.root
+  }, other, {
+    style: _extends({
+      x: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+      y: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+    }, style),
     children: formattedArcLabel
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------

package/legacy/PieChart/PieArcLabelPlot.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+import * as React from 'react';
+import { useTransition } from '@react-spring/web';
+import { defaultLabelTransitionConfig } from './dataTransform/transition';
+import { useTransformData } from './dataTransform/useTransformData';
+import PieArcLabel from './PieArcLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+var RATIO = 180 / Math.PI;
+function getItemLabel(arcLabel, arcLabelMinAngle, item) {
+  if (!arcLabel) {
+    return null;
+  }
+  var angle = (item.endAngle - item.startAngle) * RATIO;
+  if (angle < arcLabelMinAngle) {
+    return null;
+  }
+  if (typeof arcLabel === 'string') {
+    var _item$arcLabel;
+    return (_item$arcLabel = item[arcLabel]) == null ? void 0 : _item$arcLabel.toString();
+  }
+  return arcLabel(item);
+}
+export function PieArcLabelPlot(props) {
+  var _slots$pieArcLabel;
+  var slots = props.slots,
+    slotProps = props.slotProps,
+    _props$innerRadius = props.innerRadius,
+    innerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
+    outerRadius = props.outerRadius,
+    _props$cornerRadius = props.cornerRadius,
+    cornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
+    _props$paddingAngle = props.paddingAngle,
+    paddingAngle = _props$paddingAngle === void 0 ? 0 : _props$paddingAngle,
+    id = props.id,
+    highlightScope = props.highlightScope,
+    highlighted = props.highlighted,
+    _props$faded = props.faded,
+    faded = _props$faded === void 0 ? {
+      additionalRadius: -5
+    } : _props$faded,
+    data = props.data,
+    arcLabel = props.arcLabel,
+    _props$arcLabelMinAng = props.arcLabelMinAngle,
+    arcLabelMinAngle = _props$arcLabelMinAng === void 0 ? 0 : _props$arcLabelMinAng,
+    skipAnimation = props.skipAnimation,
+    other = _objectWithoutProperties(props, _excluded);
+  var transformedData = useTransformData({
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    cornerRadius: cornerRadius,
+    paddingAngle: paddingAngle,
+    id: id,
+    highlightScope: highlightScope,
+    highlighted: highlighted,
+    faded: faded,
+    data: data
+  });
+  var transition = useTransition(transformedData, _extends({}, defaultLabelTransitionConfig, {
+    immediate: skipAnimation
+  }));
+  if (data.length === 0) {
+    return null;
+  }
+  var ArcLabel = (_slots$pieArcLabel = slots == null ? void 0 : slots.pieArcLabel) != null ? _slots$pieArcLabel : PieArcLabel;
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: transition(function (_ref, item) {
+      var startAngle = _ref.startAngle,
+        endAngle = _ref.endAngle,
+        pA = _ref.paddingAngle,
+        iR = _ref.innerRadius,
+        oR = _ref.outerRadius,
+        cR = _ref.cornerRadius,
+        style = _objectWithoutProperties(_ref, _excluded2);
+      return /*#__PURE__*/_jsx(ArcLabel, _extends({
+        startAngle: startAngle,
+        endAngle: endAngle,
+        paddingAngle: pA,
+        innerRadius: iR,
+        outerRadius: oR,
+        cornerRadius: cR,
+        style: style,
+        id: id,
+        color: item.color,
+        isFaded: item.isFaded,
+        isHighlighted: item.isHighlighted,
+        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
+      }, slotProps == null ? void 0 : slotProps.pieArcLabel));
+    })
+  }));
+}

package/legacy/PieChart/PieArcPlot.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+import * as React from 'react';
+import { useTransition } from '@react-spring/web';
+import PieArc from './PieArc';
+import { defaultTransitionConfig } from './dataTransform/transition';
+import { useTransformData } from './dataTransform/useTransformData';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PieArcPlot(props) {
+  var _slots$pieArc;
+  var slots = props.slots,
+    slotProps = props.slotProps,
+    _props$innerRadius = props.innerRadius,
+    innerRadius = _props$innerRadius === void 0 ? 0 : _props$innerRadius,
+    outerRadius = props.outerRadius,
+    _props$cornerRadius = props.cornerRadius,
+    cornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
+    _props$paddingAngle = props.paddingAngle,
+    paddingAngle = _props$paddingAngle === void 0 ? 0 : _props$paddingAngle,
+    id = props.id,
+    highlightScope = props.highlightScope,
+    highlighted = props.highlighted,
+    _props$faded = props.faded,
+    faded = _props$faded === void 0 ? {
+      additionalRadius: -5
+    } : _props$faded,
+    data = props.data,
+    onClick = props.onClick,
+    skipAnimation = props.skipAnimation,
+    other = _objectWithoutProperties(props, _excluded);
+  var transformedData = useTransformData({
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    cornerRadius: cornerRadius,
+    paddingAngle: paddingAngle,
+    id: id,
+    highlightScope: highlightScope,
+    highlighted: highlighted,
+    faded: faded,
+    data: data
+  });
+  var transition = useTransition(transformedData, _extends({}, defaultTransitionConfig, {
+    immediate: skipAnimation
+  }));
+  if (data.length === 0) {
+    return null;
+  }
+  var Arc = (_slots$pieArc = slots == null ? void 0 : slots.pieArc) != null ? _slots$pieArc : PieArc;
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: transition(function (_ref, item, _, index) {
+      var startAngle = _ref.startAngle,
+        endAngle = _ref.endAngle,
+        pA = _ref.paddingAngle,
+        iR = _ref.innerRadius,
+        oR = _ref.outerRadius,
+        cR = _ref.cornerRadius,
+        style = _objectWithoutProperties(_ref, _excluded2);
+      return /*#__PURE__*/_jsx(Arc, _extends({
+        startAngle: startAngle,
+        endAngle: endAngle,
+        paddingAngle: pA,
+        innerRadius: iR,
+        outerRadius: oR,
+        cornerRadius: cR,
+        style: style,
+        id: id,
+        color: item.color,
+        dataIndex: index,
+        highlightScope: highlightScope,
+        isFaded: item.isFaded,
+        isHighlighted: item.isHighlighted,
+        onClick: onClick && function (event) {
+          onClick(event, {
+            type: 'pie',
+            seriesId: id,
+            dataIndex: index
+          }, item);
+        }
+      }, slotProps == null ? void 0 : slotProps.pieArc));
+    })
+  }));
+}

package/legacy/PieChart/PieChart.js

@@ -17,6 +17,17 @@ var defaultMargin = {
   left: 5,
   right: 100
 };
+
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+ */
 function PieChart(props) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
@@ -35,6 +46,7 @@ function PieChart(props) {
       x: 'none',
       y: 'none'
     } : _props$axisHighlight,
+    skipAnimation = props.skipAnimation,
     _props$legend = props.legend,
     legend = _props$legend === void 0 ? {
       direction: 'column',
@@ -53,7 +65,8 @@ function PieChart(props) {
     bottomAxis = _props$bottomAxis === void 0 ? null : _props$bottomAxis,
     children = props.children,
     slots = props.slots,
-    slotProps = props.slotProps;
+    slotProps = props.slotProps,
+    onClick = props.onClick;
   var margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     series: series.map(function (s) {
@@ -86,7 +99,9 @@ function PieChart(props) {
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onClick: onClick,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -115,11 +130,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -148,33 +167,33 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     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,
@@ -182,6 +201,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`.
@@ -195,11 +215,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -221,15 +245,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: PropTypes.number,
     faded: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number
+      outerRadius: PropTypes.number,
+      paddingAngle: PropTypes.number
     }),
     highlighted: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number
+      outerRadius: PropTypes.number,
+      paddingAngle: PropTypes.number
     }),
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
@@ -244,6 +272,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     type: PropTypes.oneOf(['pie']),
     valueFormatter: PropTypes.func
   })).isRequired,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -256,6 +289,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'])
   }),
   /**
@@ -271,11 +306,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -300,6 +339,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -308,6 +348,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -326,6 +369,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -334,6 +378,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,