@mui/x-charts 7.22.1 → 8.0.0-alpha.0

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,32 +1,17 @@
 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 { 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, ChartsTooltipSlots<'pie'>, ChartsOverlaySlots {
 }
-export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'pie'>, ChartsOverlaySlotProps {
+export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'pie'>, ChartsOverlaySlotProps {
 }
-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.
@@ -39,17 +24,9 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      */
     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 +52,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", "tooltip", "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,8 +42,6 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     name: 'MuiPieChart'
   });
   const {
-      xAxis,
-      yAxis,
       series,
       width,
       height,
@@ -56,16 +51,8 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       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 +65,7 @@ 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, {
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: series.map(s => _extends({
       type: 'pie'
@@ -93,27 +73,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,10 +88,15 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       loading: loading,
       slots: slots,
       slotProps: slotProps
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+    }), !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+      direction: "column",
+      position: {
+        vertical: 'middle',
+        horizontal: isRtl ? 'left' : 'right'
+      },
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    }), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), children]
@@ -135,21 +107,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 +129,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 +140,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
@@ -250,12 +177,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @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.
@@ -291,12 +212,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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,
@@ -333,6 +248,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -386,6 +302,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/README.md

@@ -11,11 +11,11 @@ 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",
+  "@mui/material": "^5.15.14 || ^6.0.0",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/ScatterChart/ScatterChart.d.ts

@@ -1,11 +1,11 @@
 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 { ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
@@ -16,7 +16,7 @@ export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, Ch
 }
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'scatter'>, ChartsOverlaySlotProps {
 }
-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.
@@ -44,9 +44,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 +74,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";
@@ -44,14 +44,14 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     tooltipProps,
     children
   } = useScatterChartProps(props);
-  return /*#__PURE__*/_jsx(ResponsiveChartContainer, _extends({
+  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(ChartsTooltip, _extends({}, tooltipProps)), children]
     }))
   }));
 });
@@ -109,6 +109,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 +126,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
@@ -275,6 +253,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -328,6 +307,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/ScatterChart/ScatterPlot.js

@@ -52,18 +52,15 @@ function ScatterPlot(props) {
     children: seriesOrder.map(seriesId => {
       const {
         id,
-        xAxisKey,
-        yAxisKey,
-        zAxisKey,
         xAxisId,
         yAxisId,
         zAxisId,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId], yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId], zAxis[zAxisId ?? zAxisKey ?? defaultZAxisId]);
-      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
+      const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,

package/ScatterChart/extremums.js

@@ -9,14 +9,14 @@ export const getExtremumX = params => {
     getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
+    const axisId = series[seriesId].xAxisId;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
-      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
-      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
     });
     const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {
@@ -35,14 +35,14 @@ export const getExtremumY = params => {
     getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    const axisId = series[seriesId].yAxisId;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
-      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
-      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
     });
     const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {

package/ScatterChart/useScatterChartProps.d.ts

@@ -5,7 +5,7 @@ import { ChartsLegendProps } from '../ChartsLegend';
 import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartsTooltipProps } from '../ChartsTooltip';
 import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartContainerProps } from '../ChartContainer';
 import { ZAxisContextProviderProps } from '../context';
 import type { ScatterChartProps } from './ScatterChart';
 import type { ScatterPlotProps } from './ScatterPlot';
@@ -17,7 +17,7 @@ import type { ScatterPlotProps } from './ScatterPlot';
  * @returns An object with props for the children components of ScatterChart
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
-    chartContainerProps: ResponsiveChartContainerProps;
+    chartContainerProps: ChartContainerProps;
     zAxisProps: Omit<ZAxisContextProviderProps, "children">;
     voronoiHandlerProps: ChartsVoronoiHandlerProps;
     chartsAxisProps: ChartsAxisProps;

package/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "legend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -20,7 +20,6 @@ export const useScatterChartProps = props => {
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
-      legend,
       width,
       height,
       margin,
@@ -85,10 +84,10 @@ export const useScatterChartProps = props => {
     slots,
     slotProps
   };
-  const legendProps = _extends({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
+  };
   const axisHighlightProps = _extends({
     y: 'none',
     x: 'none'

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartContainerProps } from '../ChartContainer';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
-import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType';
 import { CardinalDirections } from '../models/layout';
 import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot';
@@ -15,7 +15,7 @@ export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkP
 }
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps<'line' | 'bar'> {
 }
-export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
     /**
      * The xAxis configuration.
      * Notice it is a single [[AxisConfig]] object, not an array of configuration.
@@ -98,5 +98,5 @@ export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps,
  *
  * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
  */
-declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<unknown>>;
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<SVGSVGElement>>;
 export { SparkLineChart };

package/SparkLineChart/SparkLineChart.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from "../BarChart/index.js";
 import { LinePlot, AreaPlot, LineHighlightPlot } from "../LineChart/index.js";
-import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartContainer } from "../ChartContainer/index.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
@@ -58,7 +58,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     x: 'none'
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
       type: plotType,
@@ -282,6 +282,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -334,6 +335,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),