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

package/internals/plugins/utils/selectors.js

@@ -0,0 +1,37 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+export const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current chart instance, create one.
+    let cacheForCurrentChartInstance = cache.get(cacheKey);
+    if (!cacheForCurrentChartInstance) {
+      cacheForCurrentChartInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentChartInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentChartInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentChartInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};

package/internals/useCharts.d.ts

@@ -0,0 +1,6 @@
+import { ChartStore } from './plugins/utils/ChartStore';
+export declare function useCharts(): {
+    contextValue: {
+        store: ChartStore;
+    };
+};

package/internals/useCharts.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ChartStore } from "./plugins/utils/ChartStore.js";
+let globalId = 0;
+export function useCharts() {
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    storeRef.current = new ChartStore(initialState);
+  }
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current
+  }), []);
+  return {
+    contextValue
+  };
+}

package/internals/useSelector.d.ts

@@ -0,0 +1,4 @@
+import { ChartState } from './plugins/models';
+import { ChartsSelector } from './plugins/utils/selectors';
+import { ChartStore } from './plugins/utils/ChartStore';
+export declare const useSelector: <TArgs, TValue>(store: ChartStore, selector: ChartsSelector<ChartState, TArgs, TValue>, args?: TArgs, equals?: (a: TValue, b: TValue) => boolean) => TValue;

package/internals/useSelector.js

@@ -0,0 +1,6 @@
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+const defaultCompare = Object.is;
+export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};

package/internals/useStore.d.ts

@@ -0,0 +1,2 @@
+import { ChartStore } from './plugins/utils/ChartStore';
+export declare function useStore(skipError?: boolean): ChartStore;

package/internals/useStore.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ChartsContext } from "../context/InteractionProvider.js";
+export function useStore(skipError) {
+  const charts = React.useContext(ChartsContext);
+  if (skipError) {
+    // TODO: Remove once store is used by all charts.
+    // This line is only for `useAxisEvents` which is in the surface of the Gauge.
+    // But the Gauge don't have store yet because it does not need the interaction provider.
+    // Will be fixed when every thing move to the store since every component will have access to it.
+    // @ts-ignore
+    return charts?.store;
+  }
+  if (!charts) {
+    throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return charts.store;
+}

package/internals/useStringInterpolator.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-compiler/react-compiler */
 import * as React from 'react';
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
 function usePrevious(value) {

package/models/seriesType/bar.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from '../stacking';
 import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType } from './common';
 export interface BarSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {

package/models/seriesType/common.d.ts

@@ -25,16 +25,6 @@ export type CommonSeriesType<TValue> = {
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {
-    /**
-     * The id of the x-axis used to render the series.
-     * @deprecated Use `xAxisId` instead
-     */
-    xAxisKey?: string;
-    /**
-     * The id of the y-axis used to render the series.
-     * @deprecated Use `xAxisId` instead
-     */
-    yAxisKey?: string;
     /**
      * The id of the x-axis used to render the series.
      */

package/models/seriesType/config.d.ts

@@ -1,8 +1,8 @@
+import { DefaultizedProps, MakeOptional } from '@mui/x-internals/types';
 import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from './scatter';
 import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line';
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
 import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType } from './pie';
-import { DefaultizedProps, MakeOptional } from '../helpers';
 export interface ChartsSeriesConfig {
     bar: {
         /**

package/models/seriesType/line.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from '../stacking';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId, StackableSeriesType } from './common';
 export type CurveType = 'catmullRom' | 'linear' | 'monotoneX' | 'monotoneY' | 'natural' | 'step' | 'stepBefore' | 'stepAfter';

package/models/seriesType/pie.d.ts

@@ -1,5 +1,5 @@
 import { PieArcDatum as D3PieArcDatum } from '@mui/x-charts-vendor/d3-shape';
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
 export type PieItemId = string | number;
 export type PieValueType = {

package/models/seriesType/scatter.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
 export type ScatterValueType = {
     x: number;
@@ -22,11 +22,6 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
      * @default false
      */
     disableHover?: boolean;
-    /**
-     * The id of the z-axis used to render the series.
-     * @deprecated Use `zAxisId` instead.
-     */
-    zAxisKey?: string;
     /**
      * The id of the z-axis used to render the series.
      */

package/modern/BarChart/AnimatedBarElement.js

@@ -0,0 +1,21 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
+import * as React from 'react';
+import { animated } from '@react-spring/web';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function AnimatedBarElement(props) {
+  const {
+      ownerState
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(animated.rect, _extends({}, other, {
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: ownerState.isFaded ? 0.3 : 1
+  }));
+}

package/modern/BarChart/BarChart.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from "./BarPlot.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";
@@ -43,15 +43,15 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   } = useBarChartProps(props);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @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.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -116,6 +116,10 @@ process.env.NODE_ENV !== "production" ? BarChart.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.
    */
@@ -134,32 +138,6 @@ process.env.NODE_ENV !== "production" ? BarChart.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
@@ -196,16 +174,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar 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`.
@@ -234,30 +202,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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.
-   */
-  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/modern/BarChart/BarElement.js

@@ -8,39 +8,27 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
-import { animated } from '@react-spring/web';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
+import { AnimatedBarElement } from "./AnimatedBarElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);
 }
-export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
+export const barElementClasses = generateUtilityClasses('MuiBarElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    id
+    id,
+    isHighlighted,
+    isFaded
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`]
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-export const BarElementPath = styled(animated.rect, {
-  name: 'MuiBarElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  stroke: 'none',
-  fill: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  opacity: ownerState.isFaded && 0.3 || 1
-}));
 function BarElement(props) {
   const {
       id,
@@ -70,7 +58,7 @@ function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Bar = slots?.bar ?? BarElementPath;
+  const Bar = slots?.bar ?? AnimatedBarElement;
   const barProps = useSlotProps({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
@@ -82,7 +70,9 @@ function BarElement(props) {
     }), {
       style,
       onClick,
-      cursor: onClick ? 'pointer' : 'unset'
+      cursor: onClick ? 'pointer' : 'unset',
+      stroke: 'none',
+      fill: color
     }),
     className: classes.root,
     ownerState

package/modern/BarChart/BarPlot.js

@@ -6,10 +6,11 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
+import { styled } from '@mui/material/styles';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { BarElement } from "./BarElement.js";
+import { BarElement, barElementClasses } from "./BarElement.js";
 import getColor from "./getColor.js";
-import { useChartId } from "../hooks/index.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
@@ -51,6 +52,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const {
     series,
@@ -68,9 +70,13 @@ const useAggregatedData = () => {
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
     return groupIds.flatMap(seriesId => {
-      const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
-      const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
       const xAxisConfig = xAxis[xAxisId];
       const yAxisConfig = yAxis[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
@@ -111,6 +117,9 @@ const useAggregatedData = () => {
           value: series[seriesId].data[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
             id: result.maskId,
@@ -133,7 +142,7 @@ const useAggregatedData = () => {
         mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
         mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
         return result;
-      });
+      }).filter(rectangle => rectangle !== null);
     });
   });
   return {
@@ -171,6 +180,15 @@ const enterStyle = ({
   height,
   width
 });
+const BarPlotRoot = styled('g', {
+  name: 'MuiBarPlot',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  [`& .${barElementClasses.root}`]: {
+    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  }
+});
 
 /**
  * Demos:
@@ -213,7 +231,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  return /*#__PURE__*/_jsxs(BarPlotRoot, {
     children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,

package/modern/BarChart/extremums.js

@@ -36,7 +36,7 @@ const getValueExtremum = direction => params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    const yAxisId = series[seriesId].yAxisId;
     return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
   }).reduce((acc, seriesId) => {
     const {
@@ -45,8 +45,8 @@ const getValueExtremum = direction => params => {
     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 [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
       if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {

package/modern/BarChart/useBarChartProps.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", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
@@ -23,10 +23,8 @@ export const useBarChartProps = props => {
       colors,
       dataset,
       sx,
-      tooltip,
       onAxisClick,
       axisHighlight,
-      legend,
       grid,
       topAxis,
       leftAxis,
@@ -75,7 +73,7 @@ export const useBarChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     className,
     skipAnimation
   });
@@ -117,14 +115,10 @@ export const useBarChartProps = props => {
   } : {
     x: 'band'
   }, axisHighlight);
-  const legendProps = _extends({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
-  const tooltipProps = _extends({}, tooltip, {
-    slots,
-    slotProps
-  });
+  };
   return {
     chartContainerProps,
     barPlotProps,
@@ -136,7 +130,6 @@ export const useBarChartProps = props => {
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   };
 };

package/modern/ChartContainer/ChartContainer.js

@@ -3,45 +3,22 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingProvider } from "../context/DrawingProvider.js";
-import { SeriesProvider } from "../context/SeriesProvider/index.js";
-import { InteractionProvider } from "../context/InteractionProvider.js";
-import { ChartsSurface } from "../ChartsSurface/index.js";
-import { CartesianProvider } from "../context/CartesianProvider/index.js";
-import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { HighlightedProvider, ZAxisContextProvider } from "../context/index.js";
-import { PluginProvider } from "../context/PluginProvider/index.js";
+import { ChartDataProvider } from "../context/ChartDataProvider/index.js";
+import { ResizableContainer } from "./ResizableContainer.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
-import { AnimationProvider } from "../context/AnimationProvider/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
+    chartDataProviderProps,
     children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps
+    resizableContainerProps,
+    chartsSurfaceProps
   } = useChartContainerProps(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__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-                  children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-                    children: children
-                  }))]
-                }))
-              }))
-            })
-          }))
-        }))
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableContainerProps, {
+      children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: children
       }))
     }))
   }));
@@ -70,9 +47,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    */
   disableAxisListener: PropTypes.bool,
   /**
-   * The height of the chart in px.
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  height: PropTypes.number.isRequired,
+  height: PropTypes.number,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -116,16 +93,10 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
-   * The width of the chart in px.
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number.isRequired,
+  width: PropTypes.number,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.