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

package/legacy/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";
@@ -53,13 +55,20 @@ export function ChartsItemTooltipContent(props) {
   var content = props.content,
     itemData = props.itemData,
     sx = props.sx,
-    classes = props.classes;
+    classes = props.classes,
+    contentProps = props.contentProps;
   var series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
   var Content = content != null ? content : DefaultChartsItemContent;
-  return /*#__PURE__*/_jsx(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  var chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData: itemData,
+      series: series,
+      sx: sx,
+      classes: classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

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/ChartsXAxis/ChartsXAxis.js

@@ -1,15 +1,17 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["scale", "ticksNumber"];
+var _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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -42,7 +44,7 @@ function ChartsXAxis(inProps) {
   var _React$useContext = React.useContext(CartesianContext),
     _React$useContext$xAx = _React$useContext.xAxis[props.axisId],
     xScale = _React$useContext$xAx.scale,
-    ticksNumber = _React$useContext$xAx.ticksNumber,
+    tickNumber = _React$useContext$xAx.tickNumber,
     settings = _objectWithoutProperties(_React$useContext$xAx, _excluded);
   var defaultizedProps = _extends({}, defaultProps, settings, props);
   var position = defaultizedProps.position,
@@ -67,7 +69,7 @@ function ChartsXAxis(inProps) {
   var tickSize = disableTicks ? 4 : tickSizeProp;
   var xTicks = useTicks({
     scale: xScale,
-    ticksNumber: ticksNumber,
+    tickNumber: tickNumber,
     valueFormatter: valueFormatter
   });
   var positionSigne = position === 'bottom' ? 1 : -1;
@@ -75,10 +77,38 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
-  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : ChartsLine;
-  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : ChartsTick;
-  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsTickLabel;
-  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsLabel;
+  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
+  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
+  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
+  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  var 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: {}
+  });
+  var axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+      style: {
+        fontSize: labelFontSize,
+        transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
+      },
+      className: classes.label
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: "translate(0, ".concat(position === 'bottom' ? top + height : top, ")"),
     className: classes.root,
@@ -101,24 +131,17 @@ function ChartsXAxis(inProps) {
         }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
-          "transform-origin": "".concat(xTickLabel, "px ").concat(yTickLabel, "px"),
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps == null ? void 0 : slotProps.axisTickLabel, {
-          children: formattedValue
+          "transform-origin": "".concat(xTickLabel, "px ").concat(yTickLabel, "px")
+        }, axisTickLabelProps, {
+          text: formattedValue.toString()
         }))]
       }, index);
-    }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transformOrigin: "".concat(labelRefPoint.x, "px ").concat(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/legacy/ChartsYAxis/ChartsYAxis.js

@@ -1,14 +1,16 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["scale", "ticksNumber"];
+var _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";
@@ -42,7 +44,7 @@ function ChartsYAxis(inProps) {
   var _React$useContext = React.useContext(CartesianContext),
     _React$useContext$yAx = _React$useContext.yAxis[props.axisId],
     yScale = _React$useContext$yAx.scale,
-    ticksNumber = _React$useContext$yAx.ticksNumber,
+    tickNumber = _React$useContext$yAx.tickNumber,
     settings = _objectWithoutProperties(_React$useContext$yAx, _excluded);
   var defaultizedProps = _extends({}, defaultProps, settings, props);
   var position = defaultizedProps.position,
@@ -67,7 +69,7 @@ function ChartsYAxis(inProps) {
   var tickSize = disableTicks ? 4 : tickSizeProp;
   var yTicks = useTicks({
     scale: yScale,
-    ticksNumber: ticksNumber,
+    tickNumber: tickNumber,
     valueFormatter: valueFormatter
   });
   var positionSigne = position === 'right' ? 1 : -1;
@@ -75,10 +77,38 @@ function ChartsYAxis(inProps) {
     x: positionSigne * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : ChartsLine;
-  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : ChartsTick;
-  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsTickLabel;
-  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsLabel;
+  var Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
+  var Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
+  var TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
+  var Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  var 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: {}
+  });
+  var axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: 'auto',
+      style: {
+        fontSize: labelFontSize,
+        transform: "rotate(".concat(positionSigne * 90, "deg)"),
+        transformOrigin: "".concat(labelRefPoint.x, "px ").concat(labelRefPoint.y, "px")
+      },
+      className: classes.label
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: "translate(".concat(position === 'right' ? left + width : left, ", 0)"),
     className: classes.root,
@@ -102,24 +132,15 @@ function ChartsYAxis(inProps) {
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": "".concat(xTickLabel, "px ").concat(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(".concat(positionSigne * 90, "deg)"),
-        transformOrigin: "".concat(labelRefPoint.x, "px ").concat(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/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]
   });
@@ -169,23 +172,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,
@@ -254,6 +253,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
@@ -158,23 +160,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,
@@ -182,6 +180,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 +255,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

@@ -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/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/constants.js

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