[charts] Fix charts not passing className to root element

docs/data/charts/pie-demo/OnSeriesItemClick.js

@@ -50,7 +50,7 @@ ${formatObject(identifier)}`}
             data: items,
           },
         ]}
-        onClick={handleClick}
+        onItemClick={handleClick}
         width={400}
         height={200}
         margin={{ right: 200 }}

docs/data/charts/pie-demo/OnSeriesItemClick.tsx

@@ -54,7 +54,7 @@ ${formatObject(identifier)}`}
             data: items,
           },
         ]}
-        onClick={handleClick}
+        onItemClick={handleClick}
         width={400}
         height={200}
         margin={{ right: 200 }}

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

@@ -189,7 +189,10 @@
     }
   ],
   "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
   "muiName": "MuiBarChart",
+  "forwardsRefTo": "HTMLDivElement",
   "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": true,
   "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": true,
   "muiName": "MuiLineChart",
+  "forwardsRefTo": "HTMLDivElement",
   "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": true,
   "muiName": "MuiPieChart",
+  "forwardsRefTo": "HTMLDivElement",
   "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": true,
   "muiName": "MuiResponsiveChartContainer",
+  "forwardsRefTo": "HTMLDivElement",
   "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": true,
   "muiName": "MuiScatterChart",
+  "forwardsRefTo": "HTMLDivElement",
   "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": true,
   "muiName": "MuiSparkLineChart",
+  "forwardsRefTo": "HTMLDivElement",
   "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/BarChartPro/BarChartPro.tsx

@@ -39,7 +39,6 @@ const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProp
     axisHighlightProps,
     legendProps,
     tooltipProps,
-
     children,
   } = useBarChartProps(props);
 

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

@@ -2,7 +2,11 @@ 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,
+  useChartContainerDimensions,
+  useResponsiveChartContainerProps,
+} from '@mui/x-charts/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { ChartContainerPro } from '../ChartContainerPro';
 
@@ -14,13 +18,18 @@ const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartCon
   props: ResponsiveChartContainerProProps,
   ref,
 ) {
-  const { width: inWidth, height: inHeight, ...other } = props;
-  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
+  const { inHeight, inWidth, chartContainerProps, resizableChartContainerProps } =
+    useResponsiveChartContainerProps(props);
+  const { containerRef, width, height } = useChartContainerDimensions(ref, inWidth, inHeight);
 
   return (
-    <ResizableContainer ref={containerRef} ownerState={{ width: inWidth, height: inHeight }}>
+    <ResizableContainer
+      ref={containerRef}
+      ownerState={{ width: inWidth, height: inHeight }}
+      {...resizableChartContainerProps}
+    >
       {width && height ? (
-        <ChartContainerPro {...other} width={width} height={height} ref={ref} />
+        <ChartContainerPro {...chartContainerProps} width={width} height={height} />
       ) : null}
       <Watermark packageName="x-charts-pro" releaseInfo={releaseInfo} />
     </ResizableContainer>

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

@@ -0,0 +1,20 @@
+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.HTMLDivElement,
+      only: ['mergeClassName', 'propsSpread', 'refForwarding', 'reactTestRenderer', 'rootClass'],
+    }),
+  );
+});

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,17 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { ChartContainer } from './ChartContainer';
+
+describe('<ResponsiveChartContainer />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<ChartContainer height={100} width={100} series={[]} />, () => ({
+    classes: {} as any,
+    inheritComponent: 'svg',
+    render,
+    muiName: 'MuiChartContainer',
+    testComponentPropWith: 'div',
+    refInstanceof: window.SVGSVGElement,
+    only: ['mergeClassName', 'propsSpread', 'refForwarding', 'reactTestRenderer', 'rootClass'],
+  }));
+});

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

@@ -59,6 +59,7 @@ const ChartContainer = React.forwardRef(function ChartContainer(props: ChartCont
     onHighlightChange,
     plugins,
     children,
+    ...rest
   } = props;
   const {
     svgRef,
@@ -92,6 +93,7 @@ const ChartContainer = React.forwardRef(function ChartContainer(props: ChartCont
                   onHighlightChange={onHighlightChange}
                 >
                   <ChartsSurface
+                    {...rest}
                     width={width}
                     height={height}
                     ref={handleRef}

packages/x-charts/src/ChartsSurface.tsx

@@ -62,6 +62,7 @@ const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(functi
       height={height}
       viewBox={`${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`}
       ref={ref}
+      className={className}
       {...other}
     >
       <title>{title}</title>

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import clsx from 'clsx';
 import { GaugeContainer, GaugeContainerProps } from './GaugeContainer';
 import { GaugeValueArc } from './GaugeValueArc';
 import { GaugeReferenceArc } from './GaugeReferenceArc';
@@ -25,18 +26,18 @@ const useUtilityClasses = (props: GaugeProps) => {
   return composeClasses(slots, getGaugeUtilityClass, classes);
 };
 
-function Gauge(props: GaugeProps) {
-  const { text, children, classes: propsClasses, ...other } = props;
+const Gauge = React.forwardRef(function Gauge(props: GaugeProps, ref) {
+  const { text, children, classes: propsClasses, className, ...other } = props;
   const classes = useUtilityClasses(props);
   return (
-    <GaugeContainer {...other} className={classes.root}>
+    <GaugeContainer {...other} className={clsx(classes.root, className)} ref={ref}>
       <GaugeReferenceArc className={classes.referenceArc} />
       <GaugeValueArc className={classes.valueArc} />
       <GaugeValueText className={classes.valueText} text={text} />
       {children}
     </GaugeContainer>
   );
-}
+});
 
 Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------

packages/x-charts/src/Gauge/GaugeContainer.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
 import { useChartContainerDimensions } from '../ResponsiveChartContainer/useChartContainerDimensions';
 import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface';
@@ -64,10 +63,9 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont
     children,
     ...other
   } = props;
-  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
+  const { containerRef, width, height } = useChartContainerDimensions(ref, inWidth, inHeight);
 
   const svgRef = React.useRef<SVGSVGElement>(null);
-  const handleRef = useForkRef(ref, svgRef);
 
   return (
     <ResizableContainer
@@ -101,7 +99,7 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont
             <ChartsSurface
               width={width}
               height={height}
-              ref={handleRef}
+              ref={svgRef}
               title={title}
               desc={desc}
               disableAxisListener

packages/x-charts/src/Gauge/Gaugle.test.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { Gauge } from './Gauge';
+
+describe('<Gauge />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Gauge height={100} width={100} value={60} />, () => ({
+    classes: {} as any,
+    inheritComponent: 'svg',
+    render,
+    muiName: 'MuiGauge',
+    testComponentPropWith: 'div',
+    refInstanceof: window.HTMLDivElement,
+    only: ['mergeClassName', 'propsSpread', 'refForwarding', 'reactTestRenderer', 'rootClass'],
+  }));
+});

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { LineChart } from './LineChart';
+
+describe('<LineChart />', () => {
+  const { render } = createRenderer();
+  describeConformance(
+    <LineChart height={100} width={100} series={[{ data: [100, 200] }]} />,
+    () => ({
+      classes: {} as any,
+      inheritComponent: 'svg',
+      render,
+      muiName: 'MuiLineChart',
+      testComponentPropWith: 'div',
+      refInstanceof: window.HTMLDivElement,
+      only: ['mergeClassName', 'propsSpread', 'refForwarding', 'reactTestRenderer', 'rootClass'],
+    }),
+  );
+});

packages/x-charts/src/LineChart/useLineChartProps.ts

@@ -53,12 +53,15 @@ export const useLineChartProps = (props: LineChartProps) => {
     loading,
     highlightedItem,
     onHighlightChange,
+    className,
+    ...rest
   } = props;
 
   const id = useId();
   const clipPathId = `${id}-clip-path`;
 
   const chartContainerProps: ResponsiveChartContainerProps = {
+    ...rest,
     series: series.map((s) => ({
       disableHighlight: !!disableLineItemHighlight,
       type: 'line' as const,
@@ -88,6 +91,7 @@ export const useLineChartProps = (props: LineChartProps) => {
       axisHighlight?.x === 'none' &&
       axisHighlight?.y === 'none' &&
       !onAxisClick,
+    className,
   };
 
   const axisClickHandlerProps: ChartsOnAxisClickHandlerProps = {

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { PieChart } from './PieChart';
+
+describe('<PieChart />', () => {
+  const { render } = createRenderer();
+  describeConformance(
+    <PieChart
+      height={100}
+      width={100}
+      series={[
+        {
+          data: [
+            { id: 'A', value: 100 },
+            { id: 'B', value: 200 },
+          ],
+        },
+      ]}
+    />,
+    () => ({
+      classes: {} as any,
+      inheritComponent: 'svg',
+      render,
+      muiName: 'MuiPieChart',
+      testComponentPropWith: 'div',
+      refInstanceof: window.HTMLDivElement,
+      only: ['mergeClassName', 'propsSpread', 'refForwarding', 'reactTestRenderer', 'rootClass'],
+    }),
+  );
+});