[charts] Fix charts not passing className to root element

docs/pages/x/api/charts/bar-chart.json

@@ -189,7 +189,10 @@
     }
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": false,
   "muiName": "MuiBarChart",
+  "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/BarChart/BarChart.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/bar-demo/\">Charts - Bar demonstration</a></li>\n<li><a href=\"/x/react-charts/bars/\">Charts - Bars</a></li>\n<li><a href=\"/x/react-charts/label/\">Charts - Label</a></li></ul>",

docs/pages/x/api/charts/chart-container.json

@@ -58,7 +58,10 @@
     "import { ChartContainer } from '@mui/x-charts';"
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": false,
   "muiName": "MuiChartContainer",
+  "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/ChartContainer/ChartContainer.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/composition/\">Chart composition</a></li></ul>",

docs/pages/x/api/charts/line-chart.json

@@ -184,7 +184,10 @@
     }
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": false,
   "muiName": "MuiLineChart",
+  "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/LineChart/LineChart.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/areas-demo/\">Charts - Areas demonstration</a></li>\n<li><a href=\"/x/react-charts/label/\">Charts - Label</a></li>\n<li><a href=\"/x/react-charts/line-demo/\">Charts - Line demonstration</a></li>\n<li><a href=\"/x/react-charts/lines/\">Charts - Lines</a></li></ul>",

docs/pages/x/api/charts/pie-chart.json

@@ -168,7 +168,10 @@
     }
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": false,
   "muiName": "MuiPieChart",
+  "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/PieChart/PieChart.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/label/\">Charts - Label</a></li>\n<li><a href=\"/x/react-charts/pie/\">Charts - Pie</a></li>\n<li><a href=\"/x/react-charts/pie-demo/\">Charts - Pie demonstration</a></li></ul>",

docs/pages/x/api/charts/responsive-chart-container.json

@@ -58,7 +58,10 @@
     "import { ResponsiveChartContainer } from '@mui/x-charts';"
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": false,
   "muiName": "MuiResponsiveChartContainer",
+  "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/composition/\">Chart composition</a></li></ul>",

docs/pages/x/api/charts/scatter-chart.json

@@ -174,7 +174,10 @@
     }
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": false,
   "muiName": "MuiScatterChart",
+  "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/ScatterChart/ScatterChart.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/label/\">Charts - Label</a></li>\n<li><a href=\"/x/react-charts/scatter/\">Charts - Scatter</a></li>\n<li><a href=\"/x/react-charts/scatter-demo/\">Charts - Scatter demonstration</a></li></ul>",

docs/pages/x/api/charts/spark-line-chart.json

@@ -113,7 +113,10 @@
     }
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": false,
   "muiName": "MuiSparkLineChart",
+  "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/sparkline/\">Charts - Sparkline</a></li></ul>",

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -9,7 +9,7 @@ import {
   DrawingProvider,
   InteractionProvider,
   SeriesContextProvider,
-  useChartContainerHooks,
+  useChartContainerProps,
 } from '@mui/x-charts/internals';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
@@ -25,68 +25,28 @@ const ChartContainerPro = React.forwardRef(function ChartContainer(
   ref,
 ) {
   const {
-    width,
-    height,
-    series,
-    margin,
-    xAxis,
-    yAxis,
-    zAxis,
-    colors,
-    dataset,
-    sx,
-    title,
-    desc,
-    disableAxisListener,
-    highlightedItem,
-    onHighlightChange,
-    plugins,
     children,
-  } = props;
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps,
+  } = useChartContainerProps(props, ref);
 
   useLicenseVerifier('x-charts-pro', releaseInfo);
 
-  const {
-    svgRef,
-    handleRef,
-    xExtremumGetters,
-    yExtremumGetters,
-    seriesFormatters,
-    colorProcessors,
-  } = useChartContainerHooks(ref, plugins);
-
   return (
-    <DrawingProvider width={width} height={height} margin={margin} svgRef={svgRef}>
-      <ColorProvider colorProcessors={colorProcessors}>
-        <SeriesContextProvider
-          series={series}
-          colors={colors}
-          dataset={dataset}
-          seriesFormatters={seriesFormatters}
-        >
+    <DrawingProvider {...drawingProviderProps}>
+      <ColorProvider {...colorProviderProps}>
+        <SeriesContextProvider {...seriesContextProps}>
           <ZoomProvider>
-            <CartesianContextProviderPro
-              xAxis={xAxis}
-              yAxis={yAxis}
-              dataset={dataset}
-              xExtremumGetters={xExtremumGetters}
-              yExtremumGetters={yExtremumGetters}
-            >
-              <ZAxisContextProvider zAxis={zAxis} dataset={dataset}>
+            <CartesianContextProviderPro {...cartesianContextProps}>
+              <ZAxisContextProvider {...zAxisContextProps}>
                 <InteractionProvider>
-                  <HighlightedProvider
-                    highlightedItem={highlightedItem}
-                    onHighlightChange={onHighlightChange}
-                  >
-                    <ChartsSurface
-                      width={width}
-                      height={height}
-                      ref={handleRef}
-                      sx={sx}
-                      title={title}
-                      desc={desc}
-                      disableAxisListener={disableAxisListener}
-                    >
+                  <HighlightedProvider {...highlightedProviderProps}>
+                    <ChartsSurface {...chartsSurfaceProps}>
                       <ChartsAxesGradients />
                       {children}
                     </ChartsSurface>

packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
 import { ResponsiveChartContainerProps } from '@mui/x-charts/ResponsiveChartContainer';
-import { ResizableContainer, useChartContainerDimensions } from '@mui/x-charts/internals';
+import { ResizableContainer, useResponsiveChartContainerProps } from '@mui/x-charts/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { ChartContainerPro } from '../ChartContainerPro';
 
@@ -14,14 +14,12 @@ const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartCon
   props: ResponsiveChartContainerProProps,
   ref,
 ) {
-  const { width: inWidth, height: inHeight, ...other } = props;
-  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
+  const { chartContainerProps, resizableChartContainerProps, hasIntrinsicSize } =
+    useResponsiveChartContainerProps(props, ref);
 
   return (
-    <ResizableContainer ref={containerRef} ownerState={{ width: inWidth, height: inHeight }}>
-      {width && height ? (
-        <ChartContainerPro {...other} width={width} height={height} ref={ref} />
-      ) : null}
+    <ResizableContainer {...resizableChartContainerProps}>
+      {hasIntrinsicSize ? <ChartContainerPro {...chartContainerProps} /> : null}
       <Watermark packageName="x-charts-pro" releaseInfo={releaseInfo} />
     </ResizableContainer>
   );

packages/x-charts/src/BarChart/BarChart.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { BarChart } from './BarChart';
+
+describe('<BarChart />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(
+    <BarChart height={100} width={100} series={[{ data: [100, 200] }]} />,
+    () => ({
+      classes: {} as any,
+      inheritComponent: 'svg',
+      render,
+      muiName: 'MuiBarChart',
+      testComponentPropWith: 'div',
+      refInstanceof: window.SVGSVGElement,
+      skip: [
+        'componentProp',
+        'componentsProp',
+        'slotPropsProp',
+        'slotPropsCallback',
+        'slotsProp',
+        'themeDefaultProps',
+        'themeStyleOverrides',
+        'themeVariants',
+        'themeCustomPalette',
+      ],
+    }),
+  );
+});

packages/x-charts/src/BarChart/useBarChartProps.ts

@@ -50,6 +50,8 @@ export const useBarChartProps = (props: BarChartProps) => {
     onHighlightChange,
     borderRadius,
     barLabel,
+    className,
+    ...rest
   } = props;
 
   const id = useId();
@@ -68,6 +70,7 @@ export const useBarChartProps = (props: BarChartProps) => {
   } as const;
 
   const chartContainerProps: ResponsiveChartContainerProps = {
+    ...rest,
     series: series.map((s) => ({
       type: 'bar' as const,
       ...s,
@@ -92,6 +95,7 @@ export const useBarChartProps = (props: BarChartProps) => {
       axisHighlight?.x === 'none' &&
       axisHighlight?.y === 'none' &&
       !onAxisClick,
+    className,
   };
 
   const barPlotProps: BarPlotProps = {

packages/x-charts/src/ChartContainer/ChartContainer.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { ChartContainer } from './ChartContainer';
+
+describe('<ChartContainer />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<ChartContainer height={100} width={100} series={[]} />, () => ({
+    classes: {} as any,
+    inheritComponent: 'svg',
+    render,
+    muiName: 'MuiChartContainer',
+    testComponentPropWith: 'div',
+    refInstanceof: window.SVGSVGElement,
+    skip: [
+      'componentProp',
+      'componentsProp',
+      'slotPropsProp',
+      'slotPropsCallback',
+      'slotsProp',
+      'themeDefaultProps',
+      'themeStyleOverrides',
+      'themeVariants',
+      'themeCustomPalette',
+    ],
+  }));
+});

packages/x-charts/src/ChartContainer/ChartContainer.tsx

@@ -21,7 +21,7 @@ import {
 } from '../context';
 import { ChartsPluginType } from '../models/plugin';
 import { ChartSeriesType } from '../models/seriesType/config';
-import { useChartContainerHooks } from './useChartContainerHooks';
+import { useChartContainerProps } from './useChartContainerProps';
 
 export type ChartContainerProps = Omit<
   ChartsSurfaceProps &
@@ -42,64 +42,25 @@ export type ChartContainerProps = Omit<
 
 const ChartContainer = React.forwardRef(function ChartContainer(props: ChartContainerProps, ref) {
   const {
-    width,
-    height,
-    series,
-    margin,
-    xAxis,
-    yAxis,
-    zAxis,
-    colors,
-    dataset,
-    sx,
-    title,
-    desc,
-    disableAxisListener,
-    highlightedItem,
-    onHighlightChange,
-    plugins,
     children,
-  } = props;
-  const {
-    svgRef,
-    handleRef,
-    xExtremumGetters,
-    yExtremumGetters,
-    seriesFormatters,
-    colorProcessors,
-  } = useChartContainerHooks(ref, plugins);
+    drawingProviderProps,
+    colorProviderProps,
+    seriesContextProps,
+    cartesianContextProps,
+    zAxisContextProps,
+    highlightedProviderProps,
+    chartsSurfaceProps,
+  } = useChartContainerProps(props, ref);
 
   return (
-    <DrawingProvider width={width} height={height} margin={margin} svgRef={svgRef}>
-      <ColorProvider colorProcessors={colorProcessors}>
-        <SeriesContextProvider
-          series={series}
-          colors={colors}
-          dataset={dataset}
-          seriesFormatters={seriesFormatters}
-        >
-          <CartesianContextProvider
-            xAxis={xAxis}
-            yAxis={yAxis}
-            dataset={dataset}
-            xExtremumGetters={xExtremumGetters}
-            yExtremumGetters={yExtremumGetters}
-          >
-            <ZAxisContextProvider zAxis={zAxis} dataset={dataset}>
+    <DrawingProvider {...drawingProviderProps}>
+      <ColorProvider {...colorProviderProps}>
+        <SeriesContextProvider {...seriesContextProps}>
+          <CartesianContextProvider {...cartesianContextProps}>
+            <ZAxisContextProvider {...zAxisContextProps}>
               <InteractionProvider>
-                <HighlightedProvider
-                  highlightedItem={highlightedItem}
-                  onHighlightChange={onHighlightChange}
-                >
-                  <ChartsSurface
-                    width={width}
-                    height={height}
-                    ref={handleRef}
-                    sx={sx}
-                    title={title}
-                    desc={desc}
-                    disableAxisListener={disableAxisListener}
-                  >
+                <HighlightedProvider {...highlightedProviderProps}>
+                  <ChartsSurface {...chartsSurfaceProps}>
                     <ChartsAxesGradients />
                     {children}
                   </ChartsSurface>

packages/x-charts/src/ChartContainer/useChartContainerHooks.ts

@@ -10,15 +10,15 @@ export const useChartContainerHooks = (
   plugins?: ChartsPluginType<ChartSeriesType>[],
 ) => {
   const svgRef = React.useRef<SVGSVGElement>(null);
-  const handleRef = useForkRef(ref, svgRef);
+  const chartSurfaceRef = useForkRef(ref, svgRef);
 
   const { xExtremumGetters, yExtremumGetters, seriesFormatters, colorProcessors } =
     usePluginsMerge(plugins);
   useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
   return {
     svgRef,
-    handleRef,
+    chartSurfaceRef,
     xExtremumGetters,
     yExtremumGetters,
     seriesFormatters,