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

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,

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

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,

package/context/CartesianProvider/defaultizeAxis.d.ts

@@ -1,4 +1,4 @@
-import { MakeOptional } from '../../models/helpers';
+import { MakeOptional } from '@mui/x-internals/types';
 import { AxisConfig, ScaleName } from '../../models';
 import { ChartsAxisProps } from '../../models/axis';
 export declare const defaultizeAxis: (inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, axisName: "x" | "y") => {

package/context/ChartDataProvider/ChartDataProvider.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+import { DrawingProviderProps } from '../DrawingProvider';
+import { SeriesProviderProps } from '../SeriesProvider';
+import { ChartsSurfaceProps } from '../../ChartsSurface';
+import { CartesianProviderProps } from '../CartesianProvider';
+import { HighlightedProviderProps, ZAxisContextProviderProps } from '..';
+import { PluginProviderProps } from '../PluginProvider';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
+import { AnimationProviderProps } from '../AnimationProvider';
+export type ChartDataProviderProps = Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Pick<CartesianProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, 'children'> & {
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
+    children?: React.ReactNode;
+};
+declare const ChartDataProvider: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Pick<CartesianProviderProps, "dataset"> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, "children"> & {
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, "id">[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, "id">[];
+    children?: React.ReactNode;
+} & React.RefAttributes<SVGSVGElement>>;
+export { ChartDataProvider };

package/{ResponsiveChartContainer/ResponsiveChartContainer.js → context/ChartDataProvider/ChartDataProvider.js}

@@ -3,21 +3,50 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartContainer } from "../ChartContainer/index.js";
-import { ResizableContainer } from "./ResizableContainer.js";
-import { useResponsiveChartContainerProps } from "./useResponsiveChartContainerProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
+import { DrawingProvider } from "../DrawingProvider.js";
+import { SeriesProvider } from "../SeriesProvider/index.js";
+import { InteractionProvider } from "../InteractionProvider.js";
+import { ChartsSurface } from "../../ChartsSurface/index.js";
+import { CartesianProvider } from "../CartesianProvider/index.js";
+import { ChartsAxesGradients } from "../../internals/components/ChartsAxesGradients/index.js";
+import { HighlightedProvider, ZAxisContextProvider } from "../index.js";
+import { PluginProvider } from "../PluginProvider/index.js";
+import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
+import { AnimationProvider } from "../AnimationProvider/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ChartDataProvider = /*#__PURE__*/React.forwardRef(function ChartDataProvider(props, ref) {
   const {
-    hasIntrinsicSize,
-    chartContainerProps,
-    resizableChartContainerProps
-  } = useResponsiveChartContainerProps(props, ref);
-  return /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableChartContainerProps, {
-    children: hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, chartContainerProps)) : null
+    children,
+    drawingProviderProps,
+    seriesProviderProps,
+    cartesianProviderProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps,
+    pluginProviderProps,
+    animationProviderProps
+  } = useChartDataProviderProps(props, ref);
+  return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
+    children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+      children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+        children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
+          children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
+            children: /*#__PURE__*/_jsx(InteractionProvider, {
+              children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+                  children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+                    children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+                  }))
+                }))
+              }))
+            })
+          }))
+        }))
+      }))
+    }))
   }));
 });
-process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
+process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -41,9 +70,9 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    */
   disableAxisListener: PropTypes.bool,
   /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * The height of the chart in px.
    */
-  height: PropTypes.number,
+  height: PropTypes.number.isRequired,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -74,16 +103,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * 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,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -104,9 +123,9 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     y: PropTypes.number
   }),
   /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * The width of the chart in px.
    */
-  width: PropTypes.number,
+  width: PropTypes.number.isRequired,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -241,4 +260,4 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     min: PropTypes.number
   }))
 } : void 0;
-export { ResponsiveChartContainer };
+export { ChartDataProvider };

package/context/ChartDataProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartDataProvider';