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

package/legacy/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
 import { Popper } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
+import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
@@ -19,11 +22,27 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getTooltipUtilityClass, classes);
 };
+var ChartsTooltipRoot = styled(Popper, {
+  name: 'MuiChartsTooltip',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    pointerEvents: 'none',
+    zIndex: theme.zIndex.modal
+  };
+});
 function ChartsTooltip(props) {
+  var _slots$popper, _slots$itemContent, _slots$axisContent;
   var _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'axis' : _props$trigger,
     itemContent = props.itemContent,
-    axisContent = props.axisContent;
+    axisContent = props.axisContent,
+    slots = props.slots,
+    slotProps = props.slotProps;
   var mousePosition = useMouseTracker();
   var _React$useContext = React.useContext(InteractionContext),
     item = _React$useContext.item,
@@ -34,33 +53,40 @@ function ChartsTooltip(props) {
   var classes = useUtilityClasses({
     classes: props.classes
   });
+  var PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
+  var popperProps = useSlotProps({
+    elementType: PopperComponent,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.popper,
+    additionalProps: {
+      open: popperOpen,
+      placement: 'right-start',
+      anchorEl: generateVirtualElement(mousePosition)
+    },
+    ownerState: {}
+  });
   if (trigger === 'none') {
     return null;
   }
   return /*#__PURE__*/_jsx(NoSsr, {
-    children: popperOpen && /*#__PURE__*/_jsx(Popper, {
-      open: popperOpen,
-      placement: "right-start",
-      anchorEl: generateVirtualElement(mousePosition),
-      style: {
-        pointerEvents: 'none'
-      },
+    children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: itemContent,
+        content: (_slots$itemContent = slots == null ? void 0 : slots.itemContent) != null ? _slots$itemContent : itemContent,
+        contentProps: slotProps == null ? void 0 : slotProps.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: axisContent,
+        content: (_slots$axisContent = slots == null ? void 0 : slots.axisContent) != null ? _slots$axisContent : axisContent,
+        contentProps: slotProps == null ? void 0 : slotProps.axisContent,
         sx: {
           mx: 2
         },
         classes: classes
       })
-    })
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
@@ -70,6 +96,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when triger is set to 'axis'.
+   * @deprecated Use slots.axisContent instead
    */
   axisContent: PropTypes.elementType,
   /**
@@ -78,8 +105,19 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   classes: PropTypes.object,
   /**
    * Component to override the tooltip content when triger is set to 'item'.
+   * @deprecated Use slots.itemContent instead
    */
   itemContent: PropTypes.elementType,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.

package/legacy/LineChart/LineChart.js

@@ -95,7 +95,10 @@ var 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]
   });
@@ -254,6 +257,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/legacy/PieChart/PieArc.js

@@ -1,6 +1,6 @@
 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", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded", "onClick"];
 import * as React from 'react';
 import { arc as d3Arc } from 'd3-shape';
 import PropTypes from 'prop-types';
@@ -59,6 +59,7 @@ export default function PieArc(props) {
     faded = _props$faded === void 0 ? {
       additionalRadius: -5
     } : _props$faded,
+    onClick = props.onClick,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -93,6 +94,8 @@ export default function PieArc(props) {
       innerRadius: innerRadius,
       outerRadius: outerRadius
     })),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
   }, getInteractionItemProps({

package/legacy/PieChart/PieChart.js

@@ -53,7 +53,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 +87,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
@@ -182,6 +184,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`.
@@ -256,6 +259,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/legacy/PieChart/PiePlot.js

@@ -26,7 +26,8 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
 function PiePlot(props) {
   var _slots$pieArc, _slots$pieArcLabel;
   var slots = props.slots,
-    slotProps = props.slotProps;
+    slotProps = props.slotProps,
+    onClick = props.onClick;
   var seriesData = React.useContext(SeriesContext).pie;
   var _React$useContext = React.useContext(DrawingContext),
     left = _React$useContext.left,
@@ -73,7 +74,14 @@ function PiePlot(props) {
               dataIndex: index,
               highlightScope: series[seriesId].highlightScope,
               highlighted: highlighted,
-              faded: faded
+              faded: faded,
+              onClick: onClick && function (event) {
+                onClick(event, {
+                  type: 'pie',
+                  seriesId: seriesId,
+                  dataIndex: index
+                }, item);
+              }
             }, slotProps == null ? void 0 : slotProps.pieArc));
           }), data.map(function (item, index) {
             return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
@@ -98,6 +106,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/legacy/ScatterChart/ScatterChart.js

@@ -210,6 +210,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/legacy/SparkLineChart/SparkLineChart.js

@@ -90,7 +90,10 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
         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 = {
@@ -165,6 +168,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/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.13
+ * @mui/x-charts v6.0.0-alpha.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/BarChart/BarChart.js

@@ -241,6 +241,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,5 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -66,6 +68,7 @@ export function DefaultChartsAxisContent(props) {
 export function ChartsAxisTooltipContent(props) {
   const {
     content,
+    contentProps,
     axisData,
     sx,
     classes
@@ -98,13 +101,19 @@ export function ChartsAxisTooltipContent(props) {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? DefaultChartsAxisContent;
-  return /*#__PURE__*/_jsx(Content, {
-    axisData: axisData,
-    series: relevantSeries,
-    axis: relevantAxis,
-    dataIndex: dataIndex,
-    axisValue: axisValue,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      axisData,
+      series: relevantSeries,
+      axis: relevantAxis,
+      dataIndex,
+      axisValue,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -57,14 +59,21 @@ export function ChartsItemTooltipContent(props) {
     content,
     itemData,
     sx,
-    classes
+    classes,
+    contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
   const Content = content ?? DefaultChartsItemContent;
-  return /*#__PURE__*/_jsx(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData,
+      series,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
 import { Popper } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
+import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
@@ -21,11 +24,23 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getTooltipUtilityClass, classes);
 };
+const ChartsTooltipRoot = styled(Popper, {
+  name: 'MuiChartsTooltip',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
 function ChartsTooltip(props) {
   const {
     trigger = 'axis',
     itemContent,
-    axisContent
+    axisContent,
+    slots,
+    slotProps
   } = props;
   const mousePosition = useMouseTracker();
   const {
@@ -38,33 +53,40 @@ function ChartsTooltip(props) {
   const classes = useUtilityClasses({
     classes: props.classes
   });
+  const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
+  const popperProps = useSlotProps({
+    elementType: PopperComponent,
+    externalSlotProps: slotProps?.popper,
+    additionalProps: {
+      open: popperOpen,
+      placement: 'right-start',
+      anchorEl: generateVirtualElement(mousePosition)
+    },
+    ownerState: {}
+  });
   if (trigger === 'none') {
     return null;
   }
   return /*#__PURE__*/_jsx(NoSsr, {
-    children: popperOpen && /*#__PURE__*/_jsx(Popper, {
-      open: popperOpen,
-      placement: "right-start",
-      anchorEl: generateVirtualElement(mousePosition),
-      style: {
-        pointerEvents: 'none'
-      },
+    children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: itemContent,
+        content: slots?.itemContent ?? itemContent,
+        contentProps: slotProps?.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: axisContent,
+        content: slots?.axisContent ?? axisContent,
+        contentProps: slotProps?.axisContent,
         sx: {
           mx: 2
         },
         classes: classes
       })
-    })
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
@@ -74,6 +96,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when triger is set to 'axis'.
+   * @deprecated Use slots.axisContent instead
    */
   axisContent: PropTypes.elementType,
   /**
@@ -82,8 +105,19 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   classes: PropTypes.object,
   /**
    * Component to override the tooltip content when triger is set to 'item'.
+   * @deprecated Use slots.itemContent instead
    */
   itemContent: PropTypes.elementType,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.

package/modern/LineChart/LineChart.js

@@ -88,7 +88,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]
   });
@@ -247,6 +250,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/modern/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';
@@ -54,7 +54,8 @@ export default function PieArc(props) {
       highlighted,
       faded = {
         additionalRadius: -5
-      }
+      },
+      onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -91,6 +92,8 @@ export default function PieArc(props) {
       innerRadius,
       outerRadius
     })),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
   }, getInteractionItemProps({

package/modern/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
@@ -170,6 +172,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 +247,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/modern/PieChart/PiePlot.js

@@ -25,7 +25,8 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
 function PiePlot(props) {
   const {
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const seriesData = React.useContext(SeriesContext).pie;
   const {
@@ -76,7 +77,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?.pieArc));
           }), data.map((item, index) => {
             return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
@@ -101,6 +109,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/modern/ScatterChart/ScatterChart.js

@@ -210,6 +210,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/modern/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/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.13
+ * @mui/x-charts v6.0.0-alpha.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the