@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.9

package/internals/plugins/models/seriesConfig/seriesProcessor.types.d.ts

@@ -0,0 +1,18 @@
+import type { ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig, DatasetType } from '../../../../models/seriesType/config';
+import type { SeriesId } from '../../../../models/seriesType/common';
+import { StackingGroupsType } from '../../../stackSeries';
+import type { LegendItemParams } from '../../../../ChartsLegend';
+export type SeriesProcessorParams<TSeriesType extends ChartSeriesType> = {
+    series: Record<SeriesId, ChartsSeriesConfig[TSeriesType]['seriesInput']>;
+    seriesOrder: SeriesId[];
+};
+export type SeriesProcessorResult<TSeriesType extends ChartSeriesType> = {
+    series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>;
+    seriesOrder: SeriesId[];
+} & (ChartsSeriesConfig[TSeriesType] extends {
+    canBeStacked: true;
+} ? {
+    stackingGroups: StackingGroupsType;
+} : {});
+export type SeriesProcessor<TSeriesType extends ChartSeriesType> = (params: SeriesProcessorParams<TSeriesType>, dataset?: DatasetType) => SeriesProcessorResult<TSeriesType>;
+export type LegendGetter<T extends ChartSeriesType> = (series: SeriesProcessorResult<T>) => LegendItemParams[];

package/internals/store/extractPluginParamsFromProps.d.ts

@@ -0,0 +1,7 @@
+import { ChartCorePluginSignatures } from '../plugins/corePlugins';
+import { ChartPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from '../plugins/models';
+import { UseChartBaseProps } from './useCharts.types';
+export declare const extractPluginParamsFromProps: <TSignatures extends readonly ChartPluginSignature<any>[], TProps extends Partial<UseChartBaseProps<TSignatures>>>({ props: { apiRef, ...props }, plugins, }: {
+    props: TProps;
+    plugins: ConvertSignaturesIntoPlugins<readonly [...ChartCorePluginSignatures, ...TSignatures]>;
+}) => MergeSignaturesProperty<TSignatures, "defaultizedParams">;

package/internals/store/extractPluginParamsFromProps.js

@@ -0,0 +1,28 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["apiRef"];
+export const extractPluginParamsFromProps = _ref => {
+  let {
+      plugins
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref.props, _excluded);
+  const paramsLookup = {};
+  plugins.forEach(plugin => {
+    Object.assign(paramsLookup, plugin.params);
+  });
+  const pluginParams = {};
+  Object.keys(props).forEach(propName => {
+    const prop = props[propName];
+    if (paramsLookup[propName]) {
+      pluginParams[propName] = prop;
+    }
+  });
+  const defaultizedPluginParams = plugins.reduce((acc, plugin) => {
+    if (plugin.getDefaultizedParams) {
+      return plugin.getDefaultizedParams({
+        params: acc
+      });
+    }
+    return acc;
+  }, pluginParams);
+  return defaultizedPluginParams;
+};

package/internals/store/useChartModels.d.ts

@@ -0,0 +1,7 @@
+import { ChartAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from '../plugins/models';
+import { ChartCorePluginSignatures } from '../plugins/corePlugins';
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
+ */
+export declare const useChartModels: <TSignatures extends readonly ChartAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...ChartCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, "defaultizedParams">) => MergeSignaturesProperty<TSignatures, "models">;

package/internals/store/useChartModels.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
+ */
+export const useChartModels = (plugins, props) => {
+  const modelsRef = React.useRef({});
+  const [modelsState, setModelsState] = React.useState(() => {
+    const initialState = {};
+    plugins.forEach(plugin => {
+      if (plugin.models) {
+        Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
+          modelsRef.current[modelName] = {
+            isControlled: props[modelName] !== undefined,
+            getDefaultValue: modelInitializer.getDefaultValue
+          };
+          initialState[modelName] = modelInitializer.getDefaultValue(props);
+        });
+      }
+    });
+    return initialState;
+  });
+  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
+    const value = props[modelName] ?? modelsState[modelName];
+    return [modelName, {
+      value,
+      setControlledValue: newValue => {
+        if (!model.isControlled) {
+          setModelsState(prevState => _extends({}, prevState, {
+            [modelName]: typeof newValue === 'function' ? newValue(value) : newValue
+          }));
+        }
+      },
+      isControlled: modelsRef.current[modelName].isControlled
+    }];
+  }));
+
+  // We know that `modelsRef` do not vary across renders.
+  if (process.env.NODE_ENV !== 'production') {
+    Object.entries(modelsRef.current).forEach(([modelName, model]) => {
+      const controlled = props[modelName];
+      const newDefaultValue = model.getDefaultValue(props);
+
+      /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, react-compiler/react-compiler */
+      React.useEffect(() => {
+        if (model.isControlled !== (controlled !== undefined)) {
+          console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of Chart to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        }
+      }, [controlled]);
+      const {
+        current: defaultValue
+      } = React.useRef(newDefaultValue);
+      React.useEffect(() => {
+        if (!model.isControlled && defaultValue !== newDefaultValue) {
+          console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled Chart after being initialized. ` + `To suppress this warning opt to use a controlled Chart.`].join('\n'));
+        }
+      }, [JSON.stringify(newDefaultValue)]);
+    });
+  }
+  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+
+  return models;
+};

package/internals/store/useCharts.d.ts

@@ -3,10 +3,12 @@ import { ChartStore } from '../plugins/utils/ChartStore';
 import { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins } from '../plugins/models';
 import { UseChartBaseProps } from './useCharts.types';
 import { UseChartInteractionState } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
+import { ChartSeriesType } from '../../models/seriesType/config';
+import { ChartSeriesConfig } from '../plugins/models/seriesConfig';
 export declare function useChartApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): T;
-export declare function useCharts<TSignatures extends readonly ChartAnyPluginSignature[], TProps extends Partial<UseChartBaseProps<TSignatures>>>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: TProps): {
+export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>, seriesConfig: ChartSeriesConfig<TSeriesType>): {
     contextValue: {
-        store: ChartStore<readonly [import("../plugins/corePlugins/useChartId").UseChartIdSignature, ...TSignatures]> & UseChartInteractionState;
+        store: ChartStore<readonly [import("..").UseChartIdSignature, import("..").UseChartDimensionsSignature, import("..").UseChartSeriesSignature, ...TSignatures]> & UseChartInteractionState;
         publicAPI: ChartPublicAPI<TSignatures>;
         instance: ChartInstance<TSignatures>;
         svgRef: React.RefObject<SVGSVGElement | null>;

package/internals/store/useCharts.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { ChartStore } from "../plugins/utils/ChartStore.js";
 import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
+import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
+import { useChartModels } from "./useChartModels.js";
 export function useChartApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
@@ -14,12 +16,15 @@ export function useChartApiInitialization(inputApiRef) {
   return fallbackPublicApiRef.current;
 }
 let globalId = 0;
-export function useCharts(inPlugins, props) {
+export function useCharts(inPlugins, props, seriesConfig) {
+  const chartId = useId();
   const plugins = React.useMemo(() => [...CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
-  const defaultChartId = useId();
-  const pluginParams = {
-    id: defaultChartId
-  }; // To generate when plugins use params.
+  const pluginParams = extractPluginParamsFromProps({
+    plugins,
+    props
+  });
+  pluginParams.id = pluginParams.id ?? chartId;
+  const models = useChartModels(plugins, pluginParams);
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useChartApiInitialization(props.apiRef);
@@ -43,9 +48,7 @@ export function useCharts(inPlugins, props) {
     };
     plugins.forEach(plugin => {
       if (plugin.getInitialState) {
-        Object.assign(initialState, plugin.getInitialState({
-          id: defaultChartId
-        }));
+        Object.assign(initialState, plugin.getInitialState(pluginParams, initialState, seriesConfig));
       }
     });
     storeRef.current = new ChartStore(initialState);
@@ -56,7 +59,9 @@ export function useCharts(inPlugins, props) {
       params: pluginParams,
       plugins: plugins,
       store: storeRef.current,
-      svgRef: innerSvgRef
+      svgRef: innerSvgRef,
+      seriesConfig,
+      models
     });
     if (pluginResponse.publicAPI) {
       Object.assign(publicAPI, pluginResponse.publicAPI);

package/internals/store/useCharts.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { ChartAnyPluginSignature, ChartPublicAPI } from '../plugins/models';
 export interface UseChartBaseProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
-    apiRef: React.RefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
+    apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
 }

package/internals/store/useStore.d.ts

@@ -1,3 +1,7 @@
 import { ChartStore } from '../plugins/utils/ChartStore';
 import { UseChartInteractionSignature } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
-export declare function useStore(skipError?: boolean): ChartStore<[UseChartInteractionSignature]>;
+import { ChartAnyPluginSignature } from '../plugins/models';
+export declare function useStore<TSignatures extends ChartAnyPluginSignature[] = []>(): ChartStore<[
+    ...TSignatures,
+    UseChartInteractionSignature
+]>;

package/internals/store/useStore.js

@@ -1,15 +1,7 @@
 import { useChartContext } from "../../context/ChartProvider/index.js";
 // This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
-export function useStore(skipError) {
+export function useStore() {
   const context = useChartContext();
-  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 context?.store;
-  }
   if (!context) {
     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'));
   }

package/models/layout.d.ts

@@ -1,3 +1,4 @@
+import { ChartMargin } from '../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types';
 export interface CardinalDirections<T> {
     top?: T;
     bottom?: T;
@@ -13,5 +14,5 @@ export type LayoutConfig = {
      * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
      * @default object Depends on the charts type.
      */
-    margin?: Partial<CardinalDirections<number>>;
+    margin?: Partial<ChartMargin>;
 };

package/models/seriesType/line.d.ts

@@ -46,12 +46,23 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
      * @default 'monotoneX'
      */
     curve?: CurveType;
+    /**
+     * If `true`, step curve starts and end at the first and last point.
+     * By default the line is extended to fill the space before and after.
+     */
+    strictStepCurve?: boolean;
     /**
      * Define which items of the series should display a mark.
      * If can be a boolean that applies to all items.
      * Or a callback that gets some item properties and returns true if the item should be displayed.
      */
     showMark?: boolean | ((params: ShowMarkParams) => boolean);
+    /**
+     * The shape of the mark elements.
+     * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
     /**
      * Do not render the line highlight item if set to `true`.
      * @default false

package/modern/BarChart/BarChart.js

@@ -14,7 +14,7 @@ import { ChartsGrid } from "../ChartsGrid/index.js";
 import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useBarChartProps } from "./useBarChartProps.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
@@ -69,6 +69,9 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.object
+  }),
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -137,6 +140,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -157,7 +165,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -211,6 +218,7 @@ 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]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * Indicate which axis to display the top of the charts.

package/modern/BarChart/BarLabel/BarLabelPlot.js

@@ -46,7 +46,7 @@ function BarLabelPlot(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const barLabelTransition = useTransition(bars, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: null,
     enter: enterStyle,
     update: enterStyle,

package/modern/BarChart/BarPlot.js

@@ -7,16 +7,15 @@ 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, barElementClasses } from "./BarElement.js";
 import getColor from "./getColor.js";
-import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
 import { useBarSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -26,7 +25,6 @@ import { useSkipAnimation } from "../context/AnimationProvider/index.js";
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -51,7 +49,6 @@ const useAggregatedData = () => {
     stackingGroups: [],
     seriesOrder: []
   };
-  const axisData = useCartesianContext();
   const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const {
@@ -60,10 +57,12 @@ const useAggregatedData = () => {
   } = seriesData;
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = axisData;
+  } = useYAxes();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const masks = {};
@@ -217,7 +216,7 @@ function BarPlot(props) {
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,
@@ -225,7 +224,7 @@ function BarPlot(props) {
   });
   const maskTransition = useTransition(withoutBorderRadius ? [] : masksData, {
     keys: v => v.id,
-    from: leaveStyle,
+    from: skipAnimation ? undefined : leaveStyle,
     leave: leaveStyle,
     enter: enterStyle,
     update: enterStyle,

package/modern/BarChart/formatter.js

@@ -45,7 +45,8 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
-        layout: 'vertical'
+        layout: 'vertical',
+        labelMarkType: 'square'
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];

package/modern/BarChart/legend.js

@@ -10,7 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
-      markType: series[seriesId].labelMarkType ?? 'square',
+      markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/modern/BarChart/plugin.js

@@ -1,10 +1,11 @@
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import formatter from "./formatter.js";
+import legendGetter from "./legend.js";
 import getColor from "./getColor.js";
 export const plugin = {
-  seriesType: 'bar',
-  seriesFormatter: formatter,
+  seriesProcessor: formatter,
   colorProcessor: getColor,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY
 };

package/modern/ChartContainer/ChartContainer.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartDataProvider } from "../context/ChartDataProvider/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Demos:
  *
- * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ * - [Composition](https://mui.com/x/api/charts/composition/)
  *
  * API:
  *
@@ -43,11 +43,17 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     }))
   }));
 });
+
+// @ts-ignore
+
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.object
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -77,11 +83,15 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -95,23 +105,19 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
-  /**
-   * An array of plugins defining how to preprocess data.
-   * If not provided, the container supports line, bar, scatter and pie charts.
-   */
-  plugins: PropTypes.arrayOf(PropTypes.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  series: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/modern/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig"];
+import { ALL_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const {
       width,
@@ -16,13 +17,13 @@ export const useChartContainerProps = (props, ref) => {
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
-      plugins,
       sx,
       title,
       xAxis,
       yAxis,
       zAxis,
-      skipAnimation
+      skipAnimation,
+      seriesConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const chartsSurfaceProps = _extends({
@@ -39,13 +40,14 @@ export const useChartContainerProps = (props, ref) => {
     dataset,
     highlightedItem,
     onHighlightChange,
-    plugins,
     xAxis,
     yAxis,
     zAxis,
     skipAnimation,
     width,
-    height
+    height,
+    seriesConfig,
+    plugins: ALL_PLUGINS
   };
   return {
     chartDataProviderProps,