@mui/x-charts 7.16.0 → 7.18.0

package/LineChart/AreaPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];

package/LineChart/CircleMarkElement.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { MarkElementOwnerState } from './markElementClasses';
+export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+    /**
+     * The shape of the marker.
+     */
+    shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+    /**
+     * If `true`, animations are skipped.
+     * @default false
+     */
+    skipAnimation?: boolean;
+    /**
+     * The index to the element in the series' data array.
+     */
+    dataIndex: number;
+};
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+declare function CircleMarkElement(props: CircleMarkElementProps): React.JSX.Element;
+declare namespace CircleMarkElement {
+    var propTypes: any;
+}
+export { CircleMarkElement };

package/LineChart/CircleMarkElement.js

@@ -0,0 +1,107 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import { warnOnce } from '@mui/x-internals/warning';
+import { animated, useSpring } from '@react-spring/web';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+function CircleMarkElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      dataIndex,
+      onClick,
+      skipAnimation,
+      shape
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (shape !== 'circle') {
+    warnOnce([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
+  }
+  const theme = useTheme();
+  const getInteractionItemProps = useInteractionItemProps();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
+    seriesId: id
+  });
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const position = useSpring({
+    to: {
+      x,
+      y
+    },
+    immediate: skipAnimation
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isFaded,
+    color
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
+    cx: position.x,
+    cy: position.y,
+    r: 5,
+    fill: (theme.vars || theme).palette.background.paper,
+    stroke: color,
+    strokeWidth: 2,
+    className: classes.root,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: PropTypes.number.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The shape of the marker.
+   */
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { CircleMarkElement };

package/LineChart/LineChart.d.ts

@@ -75,6 +75,10 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      * @default false
      */
     skipAnimation?: boolean;
+    /**
+     * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+     */
+    experimentalMarkRendering?: boolean;
 }
 /**
  * Demos:

package/LineChart/LineChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -102,6 +104,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+   */
+  experimentalMarkRendering: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -138,6 +144,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     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,
@@ -193,6 +200,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: 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`.

package/LineChart/LineElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];

package/LineChart/LineHighlightElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color"];

package/LineChart/LineHighlightPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps"];

package/LineChart/LinePlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];

package/LineChart/MarkElement.d.ts

@@ -1,23 +1,5 @@
 import * as React from 'react';
-import { SeriesId } from '../models/seriesType/common';
-export interface MarkElementClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when highlighted. */
-    highlighted: string;
-    /** Styles applied to the root element when faded. */
-    faded: string;
-}
-export type MarkElementClassKey = keyof MarkElementClasses;
-interface MarkElementOwnerState {
-    id: SeriesId;
-    color: string;
-    isFaded: boolean;
-    isHighlighted: boolean;
-    classes?: Partial<MarkElementClasses>;
-}
-export declare function getMarkElementUtilityClass(slot: string): string;
-export declare const markElementClasses: MarkElementClasses;
+import { MarkElementOwnerState } from './markElementClasses';
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
     /**
      * If `true`, animations are skipped.

package/LineChart/MarkElement.js

@@ -1,35 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from "../internals/getSymbol.js";
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getMarkElementUtilityClass(slot) {
-  return generateUtilityClass('MuiMarkElement', slot);
-}
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getMarkElementUtilityClass, classes);
-};
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',

package/LineChart/MarkPlot.d.ts

@@ -24,6 +24,12 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
      * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
      */
     onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+    /**
+     * If `true` the mark element will only be able to render circle.
+     * Giving fewer customization options, but saving around 40ms per 1.000 marks.
+     * @default false
+     */
+    experimentalRendering?: boolean;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
@@ -12,6 +14,7 @@ import { cleanId } from "../internals/cleanId.js";
 import getColor from "./getColor.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { CircleMarkElement } from "./CircleMarkElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -28,14 +31,15 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation,
-      onItemClick
+      onItemClick,
+      experimentalRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
   const drawingArea = useDrawingArea();
-  const Mark = slots?.mark ?? MarkElement;
+  const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -149,6 +153,12 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true` the mark element will only be able to render circle.
+   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
+   * @default false
+   */
+  experimentalRendering: PropTypes.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/LineChart/index.d.ts

@@ -9,3 +9,5 @@ export * from './LineElement';
 export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';
+export type { MarkElementClasses, MarkElementClassKey } from './markElementClasses';
+export { getMarkElementUtilityClass, markElementClasses } from './markElementClasses';

package/LineChart/index.js

@@ -8,4 +8,5 @@ export * from "./AnimatedArea.js";
 export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
-export * from "./LineHighlightElement.js";
+export * from "./LineHighlightElement.js";
+export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/LineChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/LineChart/markElementClasses.d.ts

@@ -0,0 +1,20 @@
+import { SeriesId } from '../models/seriesType/common';
+export interface MarkElementClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when highlighted. */
+    highlighted: string;
+    /** Styles applied to the root element when faded. */
+    faded: string;
+}
+export type MarkElementClassKey = keyof MarkElementClasses;
+export interface MarkElementOwnerState {
+    id: SeriesId;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<MarkElementClasses>;
+}
+export declare function getMarkElementUtilityClass(slot: string): string;
+export declare const markElementClasses: MarkElementClasses;
+export declare const useUtilityClasses: (ownerState: MarkElementOwnerState) => Record<"root", string>;

package/LineChart/markElementClasses.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMarkElementUtilityClass(slot) {
+  return generateUtilityClass('MuiMarkElement', slot);
+}
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getMarkElementUtilityClass, classes);
+};

package/LineChart/useLineChartProps.js

@@ -1,6 +1,8 @@
+'use client';
+
 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", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 /**
@@ -41,7 +43,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      experimentalMarkRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -99,7 +102,8 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation
+    skipAnimation,
+    experimentalRendering: experimentalMarkRendering
   };
   const overlayProps = {
     slots,

package/PieChart/PieArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 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"];

package/PieChart/PieArcLabel.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];

package/PieChart/PieArcLabelPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],

package/PieChart/PieArcPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],

package/PieChart/PieChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 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"];
@@ -197,6 +199,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     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,
@@ -237,6 +240,16 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Callback fired when a pie arc is clicked.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/PieChart/PiePlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingContext } from "../context/DrawingProvider.js";

package/PieChart/dataTransform/useTransformData.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useHighlighted } from "../../context/index.js";

package/PieChart/legend.js

@@ -11,9 +11,11 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        id: item.id,
+        seriesId,
         color: item.color,
         label: formattedLabel,
-        id: item.id
+        itemId: item.id
       });
     });
     return acc;

package/ResponsiveChartContainer/ResponsiveChartContainer.d.ts

@@ -9,6 +9,16 @@ export interface ResponsiveChartContainerProps extends Omit<ChartContainerProps,
      * The height of the chart in px. If not defined, it takes the height of the parent element.
      */
     height?: number;
+    /**
+     * 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?: boolean;
 }
 declare const ResponsiveChartContainer: React.ForwardRefExoticComponent<ResponsiveChartContainerProps & React.RefAttributes<unknown>>;
 export { ResponsiveChartContainer };

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -72,6 +74,16 @@ 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.

package/ResponsiveChartContainer/useChartContainerDimensions.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => {
+export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number, resolveSizeBeforeRender?: boolean) => {
     containerRef: React.MutableRefObject<null>;
     width: number;
     height: number;