@mui/x-charts 7.22.3 → 8.0.0-alpha.1

package/PieChart/PieArc.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { PieItemId } from '../models';
-import { HighlightScope } from '../context';
 export interface PieArcClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -24,10 +23,6 @@ export declare const pieArcClasses: PieArcClasses;
 export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
     cornerRadius: SpringValue<number>;
     endAngle: SpringValue<number>;
-    /**
-     * @deprecated Use the `isFaded` or `isHighlighted` props instead.
-     */
-    highlightScope?: Partial<HighlightScope>;
     innerRadius: SpringValue<number>;
     onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
     outerRadius: SpringValue<number>;

package/PieChart/PieArc.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];
+const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
@@ -93,15 +93,6 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
-  /**
-   * @deprecated Use the `isFaded` or `isHighlighted` props instead.
-   */
-  highlightScope: PropTypes.shape({
-    fade: PropTypes.oneOf(['global', 'none', 'series']),
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlight: PropTypes.oneOf(['item', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired

package/PieChart/PieArcPlot.js

@@ -10,7 +10,6 @@ import { useTransition } from '@react-spring/web';
 import { PieArc } from "./PieArc.js";
 import { defaultTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
-import { useHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
   const {
@@ -43,9 +42,6 @@ function PieArcPlot(props) {
   const transition = useTransition(transformedData, _extends({}, defaultTransitionConfig, {
     immediate: skipAnimation
   }));
-  const {
-    highlightScope
-  } = useHighlighted();
   if (data.length === 0) {
     return null;
   }
@@ -72,7 +68,6 @@ function PieArcPlot(props) {
         id: id,
         color: item.color,
         dataIndex: index,
-        highlightScope: highlightScope,
         isFaded: item.isFaded,
         isHighlighted: item.isHighlighted,
         onClick: onItemClick && (event => {

package/PieChart/PieChart.d.ts

@@ -1,55 +1,26 @@
 import * as React from 'react';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
-import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartContainerProps } from '../ChartContainer';
 import { PieSeriesType } from '../models/seriesType';
-import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
-import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
-import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
+import { ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
-import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
-export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'pie'>, ChartsOverlaySlots {
+export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
-export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'pie'>, ChartsOverlaySlotProps {
+export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
-    /**
-     * Indicate which axis to display the bottom of the charts.
-     * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-     * @default null
-     */
-    bottomAxis?: null | string | ChartsXAxisProps;
-    /**
-     * Indicate which axis to display the left of the charts.
-     * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-     * @default null
-     */
-    leftAxis?: null | string | ChartsYAxisProps;
+export interface PieChartProps extends Omit<ChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
      * The series to display in the pie chart.
      * An array of [[PieSeriesType]] objects.
      */
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
     /**
-     * The configuration of the tooltip.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-     * @default { trigger: 'item' }
-     */
-    tooltip?: ChartsTooltipProps<'pie'>;
-    /**
-     * The configuration of axes highlight.
-     * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
-     * @default { x: 'none', y: 'none' }
-     */
-    axisHighlight?: ChartsAxisHighlightProps;
-    /**
-     * The props of the legend.
-     * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
-     * @deprecated Consider using `slotProps.legend` instead.
+     * If `true`, the legend is not rendered.
      */
-    legend?: ChartsLegendProps;
+    hideLegend?: boolean;
     /**
      * Callback fired when a pie arc is clicked.
      */
@@ -75,5 +46,5 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<unknown>>;
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<SVGSVGElement>>;
 export { PieChart };

package/PieChart/PieChart.js

@@ -2,17 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useThemeProps } from '@mui/material/styles';
-import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
-import { ChartsAxis } from "../ChartsAxis/ChartsAxis.js";
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
-import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
 import { PiePlot } from "./PiePlot.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,27 +42,14 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     name: 'MuiPieChart'
   });
   const {
-      xAxis,
-      yAxis,
       series,
       width,
       height,
       margin: marginProps,
       colors,
       sx,
-      tooltip = {
-        trigger: 'item'
-      },
-      axisHighlight = {
-        x: 'none',
-        y: 'none'
-      },
       skipAnimation,
-      legend: legendProps,
-      topAxis = null,
-      leftAxis = null,
-      rightAxis = null,
-      bottomAxis = null,
+      hideLegend,
       children,
       slots,
       slotProps,
@@ -78,14 +62,8 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isRtl = useRtl();
   const margin = _extends({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
-  const legend = _extends({
-    direction: 'column',
-    position: {
-      vertical: 'middle',
-      horizontal: isRtl ? 'left' : 'right'
-    }
-  }, legendProps);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {
+  const Tooltip = slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: series.map(s => _extends({
       type: 'pie'
@@ -93,27 +71,14 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis ?? [{
-      id: DEFAULT_X_AXIS_KEY,
-      scaleType: 'point',
-      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
-    }],
-    yAxis: yAxis,
     colors: colors,
     sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    disableAxisListener: true,
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
     className: className,
     skipAnimation: skipAnimation,
-    children: [/*#__PURE__*/_jsx(ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/_jsx(PiePlot, {
+    children: [/*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
       slotProps: slotProps,
       onItemClick: onItemClick
@@ -121,13 +86,17 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       loading: loading,
       slots: slots,
       slotProps: slotProps
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    }), !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+      direction: "column",
+      position: {
+        vertical: 'middle',
+        horizontal: isRtl ? 'left' : 'right'
+      },
       slots: slots,
       slotProps: slotProps
-    })), children]
+    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+      trigger: "item"
+    }, slotProps?.tooltip)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -135,21 +104,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
-   * @default { x: 'none', y: 'none' }
-   */
-  axisHighlight: PropTypes.shape({
-    x: PropTypes.oneOf(['band', 'line', 'none']),
-    y: PropTypes.oneOf(['band', 'line', 'none'])
-  }),
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -172,6 +126,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -179,40 +137,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * The props of the legend.
-   * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
-   * @deprecated Consider using `slotProps.legend` instead.
-   */
-  legend: PropTypes.shape({
-    classes: PropTypes.object,
-    direction: PropTypes.oneOf(['column', 'row']),
-    hidden: PropTypes.bool,
-    itemGap: PropTypes.number,
-    itemMarkHeight: PropTypes.number,
-    itemMarkWidth: PropTypes.number,
-    labelStyle: PropTypes.object,
-    markGap: PropTypes.number,
-    onItemClick: PropTypes.func,
-    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-      bottom: PropTypes.number,
-      left: PropTypes.number,
-      right: PropTypes.number,
-      top: 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
-  }),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -240,22 +164,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Callback fired when a pie arc is clicked.
    */
   onItemClick: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeriesType]] objects.
@@ -278,31 +186,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/PieChart/PiePlot.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingContext } from "../context/DrawingProvider.js";
+import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
@@ -33,7 +33,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(DrawingContext);
+  } = React.useContext(DrawingAreaContext);
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/PieChart/getPieCoordinates.d.ts

@@ -1,6 +1,6 @@
-import { DrawingArea } from '../context/DrawingProvider';
+import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
-export declare function getPieCoordinates(series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>, drawing: Pick<DrawingArea, 'width' | 'height'>): {
+export declare function getPieCoordinates(series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>, drawing: Pick<DrawingAreaState, 'width' | 'height'>): {
     cx: number;
     cy: number;
     availableRadius: number;

package/README.md

@@ -11,13 +11,13 @@ Install the package in your project directory with:
 npm install @mui/x-charts
 ```
 
-This component has the following peer dependencies that you will need to install as well.
+This component has the following peer dependencies that you need to install as well.
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@mui/material": "^5.15.14 || ^6.0.0",
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/ScatterChart/Scatter.js

@@ -5,9 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { InteractionContext } from "../context/InteractionProvider.js";
+import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/useSelector.js";
 import { useHighlighted } from "../context/index.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { selectorChartsInteractionIsVoronoiEnabled } from "../context/InteractionSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -30,10 +32,9 @@ function Scatter(props) {
     onItemClick
   } = props;
   const drawingArea = useDrawingArea();
-  const {
-    useVoronoiInteraction
-  } = React.useContext(InteractionContext);
-  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  const store = useStore();
+  const isVoronoiEnabled = useSelector(store, selectorChartsInteractionIsVoronoiEnabled);
+  const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const getInteractionItemProps = useInteractionItemProps(skipInteractionHandlers);
   const {
     isFaded,

package/ScatterChart/ScatterChart.d.ts

@@ -1,36 +1,30 @@
 import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
 import { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from './ScatterPlot';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartContainerProps } from '../ChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ScatterSeriesType } from '../models/seriesType/scatter';
-import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
-import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
+import { ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
-export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'scatter'>, ChartsOverlaySlots {
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'scatter'>, ChartsOverlaySlotProps {
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
+export interface ScatterChartProps extends Omit<ChartContainerProps, 'series' | 'plugins'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     /**
      * The series to display in the scatter chart.
      * An array of [[ScatterSeriesType]] objects.
      */
     series: MakeOptional<ScatterSeriesType, 'type'>[];
-    /**
-     * The configuration of the tooltip.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-     * @default { trigger: 'item' }
-     */
-    tooltip?: ChartsTooltipProps<'scatter'>;
     /**
      * The configuration of axes highlight.
-     * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+     * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
      * @default { x: 'none', y: 'none' }
      */
     axisHighlight?: ChartsAxisHighlightProps;
@@ -44,9 +38,9 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
      */
     disableVoronoi?: boolean;
     /**
-     * @deprecated Consider using `slotProps.legend` instead.
+     * If `true`, the legend is not rendered.
      */
-    legend?: ChartsLegendProps;
+    hideLegend?: boolean;
     /**
      * Overridable component slots.
      * @default {}
@@ -74,5 +68,5 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<unknown>>;
+declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<SVGSVGElement>>;
 export { ScatterChart };

package/ScatterChart/ScatterChart.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { ScatterPlot } from "./ScatterPlot.js";
-import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsAxis } from "../ChartsAxis/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
@@ -41,17 +41,19 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   } = useScatterChartProps(props);
-  return /*#__PURE__*/_jsx(ResponsiveChartContainer, _extends({
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsx(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
     children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
       children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
         "data-drawing-container": true,
         children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
+      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        trigger: "item"
+      }, props.slotProps?.tooltip)), children]
     }))
   }));
 });
@@ -62,7 +64,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({
@@ -109,6 +111,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -122,32 +128,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * @deprecated Consider using `slotProps.legend` instead.
-   */
-  legend: PropTypes.shape({
-    classes: PropTypes.object,
-    direction: PropTypes.oneOf(['column', 'row']),
-    hidden: PropTypes.bool,
-    itemGap: PropTypes.number,
-    itemMarkHeight: PropTypes.number,
-    itemMarkWidth: PropTypes.number,
-    labelStyle: PropTypes.object,
-    markGap: PropTypes.number,
-    onItemClick: PropTypes.func,
-    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-      bottom: PropTypes.number,
-      left: PropTypes.number,
-      right: PropTypes.number,
-      top: 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
-  }),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -177,16 +157,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -215,31 +185,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.