From e0293d727231a19cc7c21ede0d16dc3fdc672239 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 28 Aug 2024 11:16:23 +0200
Subject: [PATCH 1/7] ALlow style override on x/y axis

---
 packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx    | 12 +++++++++---
 packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx    | 12 +++++++++---
 .../x-charts/src/themeAugmentation/components.d.ts   |  2 ++
 .../x-charts/src/themeAugmentation/overrides.d.ts    |  5 ++++-
 .../src/themeAugmentation/themeAugmentation.spec.ts  | 10 ++++++++++
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx
index c4929c9d9459..995ef6f370db 100644
--- a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx
+++ b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
+import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks, TickItemType } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
@@ -83,6 +83,12 @@ function addLabelDimension(
   });
 }
 
+const XAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
+
 const defaultProps = {
   position: 'bottom',
   disableLine: false,
@@ -204,7 +210,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
     return null;
   }
   return (
-    <AxisRoot
+    <XAxisRoot
       transform={`translate(0, ${position === 'bottom' ? top + height : top})`}
       className={classes.root}
       sx={sx}
@@ -246,7 +252,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
           <Label {...labelRefPoint} {...axisLabelProps} text={label} />
         </g>
       )}
-    </AxisRoot>
+    </XAxisRoot>
   );
 }
 
diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
index 281ce8d1b3d2..2179ac539d81 100644
--- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
+++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
+import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
@@ -27,6 +27,12 @@ const useUtilityClasses = (ownerState: ChartsYAxisProps & { theme: Theme }) => {
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
 
+const YAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsYAxis',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
+
 const defaultProps = {
   position: 'left',
   disableLine: false,
@@ -156,7 +162,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   }
 
   return (
-    <AxisRoot
+    <YAxisRoot
       transform={`translate(${position === 'right' ? left + width : left}, 0)`}
       className={classes.root}
       sx={sx}
@@ -203,7 +209,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
           <Label {...labelRefPoint} {...axisLabelProps} text={label} />
         </g>
       )}
-    </AxisRoot>
+    </YAxisRoot>
   );
 }
 
diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts
index fbb03f04b14a..3302ca499b7b 100644
--- a/packages/x-charts/src/themeAugmentation/components.d.ts
+++ b/packages/x-charts/src/themeAugmentation/components.d.ts
@@ -6,9 +6,11 @@ export interface ChartsComponents<Theme = unknown> {
   };
   MuiChartsXAxis?: {
     defaultProps?: ComponentsProps['MuiChartsXAxis'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiChartsXAxis'];
   };
   MuiChartsYAxis?: {
     defaultProps?: ComponentsProps['MuiChartsYAxis'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiChartsYAxis'];
   };
   MuiChartsAxisHighlight?: {
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsAxisHighlight'];
diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts
index 24f6ce49c23f..d7a76798501c 100644
--- a/packages/x-charts/src/themeAugmentation/overrides.d.ts
+++ b/packages/x-charts/src/themeAugmentation/overrides.d.ts
@@ -8,7 +8,10 @@ import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
 
 export interface ChartsComponentNameToClassKey {
-  MuiChartsAxis: 'root'; //  Only the root component of axes is styled
+  MuiChartsAxis: 'root'; //  Only the root component of axes is styled. We should probably remove this one in v8
+  MuiChartsXAxis: 'root'; //  Only the root component of axes is styled
+  MuiChartsYAxis: 'root'; //  Only the root component of axes is styled
+
   MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
   MuiChartsGrid: ChartsGridClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
index 1c71789139c7..bcf1e810524c 100644
--- a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
+++ b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
@@ -15,6 +15,11 @@ createTheme({
         // @ts-expect-error invalid MuiChartsXAxis prop
         someRandomProp: true,
       },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiChartsXAxis class key
+        line: { color: 'red' },
+      },
     },
     MuiChartsYAxis: {
       defaultProps: {
@@ -22,6 +27,11 @@ createTheme({
         // @ts-expect-error invalid MuiChartsYAxis prop
         someRandomProp: true,
       },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiChartsYAxis class key
+        line: { color: 'red' },
+      },
     },
     MuiChartsAxisHighlight: {
       styleOverrides: {

From b4a3929e7671430f2888daeab4f41bbc1e67396d Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 28 Aug 2024 11:26:37 +0200
Subject: [PATCH 2/7] Fix legend

---
 .../src/ChartsLegend/ChartsLegend.tsx         | 19 ++++++++++---------
 .../src/themeAugmentation/overrides.d.ts      |  4 ++--
 .../themeAugmentation.spec.ts                 |  2 +-
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
index 1fab773c243f..f2b8d964d7da 100644
--- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
+++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
@@ -59,20 +59,21 @@ const useUtilityClasses = (ownerState: DefaultizedChartsLegendProps & { theme: T
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
 
-const defaultProps = {
-  position: { horizontal: 'middle', vertical: 'top' },
-  direction: 'row',
-} as const;
-
 function ChartsLegend(inProps: ChartsLegendProps) {
-  const props: DefaultizedChartsLegendProps = useThemeProps({
-    props: { ...defaultProps, ...inProps },
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsLegend',
   });
 
-  const { position, direction, hidden, slots, slotProps } = props;
+  const defaultizedProps: DefaultizedChartsLegendProps = {
+    direction: 'row',
+    ...props,
+    position: { horizontal: 'middle', vertical: 'top', ...props.position },
+  };
+  const { position, direction, hidden, slots, slotProps } = defaultizedProps;
+
   const theme = useTheme();
-  const classes = useUtilityClasses({ ...props, theme });
+  const classes = useUtilityClasses({ ...defaultizedProps, theme });
 
   const drawingArea = useDrawingArea();
   const series = useSeries();
diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts
index d7a76798501c..361fc5284537 100644
--- a/packages/x-charts/src/themeAugmentation/overrides.d.ts
+++ b/packages/x-charts/src/themeAugmentation/overrides.d.ts
@@ -2,7 +2,6 @@ import { BarLabelClassKey } from '../BarChart';
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
 import { ChartsGridClassKey } from '../ChartsGrid';
-import { ChartsLegendClassKey } from '../ChartsLegend';
 
 import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
@@ -13,11 +12,12 @@ export interface ChartsComponentNameToClassKey {
   MuiChartsYAxis: 'root'; //  Only the root component of axes is styled
 
   MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
+  MuiChartsLegend: 'root';
   MuiChartsGrid: ChartsGridClassKey;
-  MuiChartsLegend: ChartsLegendClassKey;
   MuiChartsTooltip: ChartsTooltipClassKey;
 
   MuiChartsSurface: 'root';
+
   // BarChart components
   MuiBarElement: BarElementClassKey;
   MuiBarLabel: BarLabelClassKey;
diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
index bcf1e810524c..8412c5c669cf 100644
--- a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
+++ b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
@@ -49,7 +49,7 @@ createTheme({
       styleOverrides: {
         root: { backgroundColor: 'red' },
         // @ts-expect-error invalid MuiChartsLegend class key
-        constent: { color: 'red' },
+        mark: { color: 'red' },
       },
     },
     MuiChartsTooltip: {

From ce61cbdfcb0196d05ee116695d7d34bc63c1a129 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 28 Aug 2024 11:37:14 +0200
Subject: [PATCH 3/7] update grid

---
 packages/x-charts/src/themeAugmentation/components.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts
index 3302ca499b7b..63644197a3e4 100644
--- a/packages/x-charts/src/themeAugmentation/components.d.ts
+++ b/packages/x-charts/src/themeAugmentation/components.d.ts
@@ -16,6 +16,11 @@ export interface ChartsComponents<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsAxisHighlight'];
   };
   MuiChartsGrid?: {
+    /**
+     * Warning, does not work with LineChart, BarChart and ScatterChart.
+     * Those components skip the grid rendering if it seems unnecessary according to there props.
+     * This `defaultProps` only work if you call `<ChartsGrid />` in a composed chart.
+     */
     defaultProps?: ComponentsProps['MuiChartsGrid'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsGrid'];
   };

From fce8a7e53292c7851436ea9cd57cf4edba7008ec Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 28 Aug 2024 13:19:26 +0200
Subject: [PATCH 4/7] update tooltip

---
 .../x-charts/src/ChartsTooltip/ChartsTooltip.tsx    | 13 +++++++------
 .../src/ChartsTooltip/ChartsTooltipTable.ts         |  5 +++++
 .../DefaultChartsAxisTooltipContent.tsx             |  2 +-
 .../DefaultChartsItemTooltipContent.tsx             |  2 +-
 .../src/ChartsTooltip/chartsTooltipClasses.ts       |  4 +++-
 .../x-charts/src/themeAugmentation/overrides.d.ts   |  1 -
 6 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
index 1391416cf3d0..6ec796f218f5 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
@@ -94,6 +94,7 @@ const useUtilityClasses = <T extends ChartSeriesType>(ownerState: {
 
   const slots = {
     root: ['root'],
+    paper: ['paper'],
     table: ['table'],
     row: ['row'],
     cell: ['cell'],
@@ -124,12 +125,12 @@ const ChartsTooltipRoot = styled(Popper, {
  *
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
-function ChartsTooltip<T extends ChartSeriesType>(props: ChartsTooltipProps<T>) {
-  const themeProps = useThemeProps({
-    props,
+function ChartsTooltip<T extends ChartSeriesType>(inProps: ChartsTooltipProps<T>) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsTooltip',
   });
-  const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = themeProps;
+  const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = props;
 
   const mousePosition = useMouseTracker();
 
@@ -140,7 +141,7 @@ function ChartsTooltip<T extends ChartSeriesType>(props: ChartsTooltipProps<T>)
   const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
 
-  const classes = useUtilityClasses({ classes: themeProps.classes });
+  const classes = useUtilityClasses({ classes: props.classes });
 
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({
@@ -170,7 +171,7 @@ function ChartsTooltip<T extends ChartSeriesType>(props: ChartsTooltipProps<T>)
   return (
     <NoSsr>
       {popperOpen && (
-        <PopperComponent {...popperProps}>
+        <PopperComponent {...popperProps} className={classes.root}>
           {trigger === 'item' ? (
             <ChartsItemTooltipContent
               itemData={displayedData as ItemInteractionData<T>}
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts
index a83a70ae9e5b..a50e1c462c51 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts
+++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts
@@ -8,6 +8,7 @@ import { chartsTooltipClasses } from './chartsTooltipClasses';
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container',
+  overridesResolver: (props, styles) => styles.paper,
 })(({ theme }) => ({
   boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
@@ -22,6 +23,7 @@ export const ChartsTooltipPaper = styled('div', {
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table',
+  overridesResolver: (props, styles) => styles.table,
 })(({ theme }) => ({
   borderSpacing: 0,
   '& thead td': {
@@ -35,6 +37,7 @@ export const ChartsTooltipTable = styled('table', {
 export const ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row',
+  overridesResolver: (props, styles) => styles.row,
 })(({ theme }) => ({
   'tr:first-of-type& td': {
     paddingTop: theme.spacing(1),
@@ -50,6 +53,7 @@ export const ChartsTooltipRow = styled('tr', {
 export const ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell',
+  overridesResolver: (props, styles) => styles.cell,
 })(({ theme }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
@@ -74,6 +78,7 @@ export const ChartsTooltipCell = styled('td', {
 export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',
+  overridesResolver: (props, styles) => styles.mark,
   shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'color',
 })<{ color: string }>(({ theme, color }) => ({
   width: theme.spacing(1),
diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx
index 5f76ce4edd6c..c0382f27f2a4 100644
--- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx
@@ -27,7 +27,7 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) {
       axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
 
   return (
-    <ChartsTooltipPaper sx={sx} className={classes.root}>
+    <ChartsTooltipPaper sx={sx} className={classes.paper}>
       <ChartsTooltipTable className={classes.table}>
         {axisValue != null && !axis.hideTooltip && (
           <thead>
diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
index 29fb6f74338b..e4dec21ff9af 100644
--- a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
@@ -43,7 +43,7 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
     series.valueFormatter as CommonSeriesType<typeof value>['valueFormatter']
   )?.(value, { dataIndex: itemData.dataIndex });
   return (
-    <ChartsTooltipPaper sx={sx} className={classes.root}>
+    <ChartsTooltipPaper sx={sx} className={classes.paper}>
       <ChartsTooltipTable className={classes.table}>
         <tbody>
           <ChartsTooltipRow className={classes.row}>
diff --git a/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts b/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts
index 0771fbc2dd2c..b4ada8e0254b 100644
--- a/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts
+++ b/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts
@@ -6,6 +6,8 @@ import {
 export interface ChartsTooltipClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
   /** Styles applied to the table element. */
   table: string;
   /** Styles applied to the row element. */
@@ -33,5 +35,5 @@ export function getChartsTooltipUtilityClass(slot: string) {
 }
 export const chartsTooltipClasses: ChartsTooltipClasses = generateUtilityClasses(
   'MuiChartsTooltip',
-  ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell'],
+  ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell'],
 );
diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts
index 361fc5284537..8049913a70be 100644
--- a/packages/x-charts/src/themeAugmentation/overrides.d.ts
+++ b/packages/x-charts/src/themeAugmentation/overrides.d.ts
@@ -2,7 +2,6 @@ import { BarLabelClassKey } from '../BarChart';
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
 import { ChartsGridClassKey } from '../ChartsGrid';
-
 import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
 

From f73dcd887f017fe45bdff57d0e33015ebf845022 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 28 Aug 2024 13:29:58 +0200
Subject: [PATCH 5/7] fix tooltip default

---
 packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
index 6ec796f218f5..16265d1e52f4 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
@@ -58,7 +58,7 @@ export interface ChartsTooltipProps<T extends ChartSeriesType> {
    * - 'item': Shows data about the item below the mouse.
    * - 'axis': Shows values associated with the hovered x value
    * - 'none': Does not display tooltip
-   * @default 'item'
+   * @default 'axis'
    */
   trigger?: TriggerOptions;
   /**
@@ -229,7 +229,7 @@ ChartsTooltip.propTypes = {
    * - 'item': Shows data about the item below the mouse.
    * - 'axis': Shows values associated with the hovered x value
    * - 'none': Does not display tooltip
-   * @default 'item'
+   * @default 'axis'
    */
   trigger: PropTypes.oneOf(['axis', 'item', 'none']),
 } as any;

From f2e01fc4763f6bcf17c7d9675e04b0c5807cd2a8 Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 28 Aug 2024 13:30:13 +0200
Subject: [PATCH 6/7] scripts

---
 docs/pages/x/api/charts/charts-tooltip.json               | 8 +++++++-
 .../x/api/charts/default-charts-axis-tooltip-content.json | 6 ++++++
 .../x/api/charts/default-charts-item-tooltip-content.json | 6 ++++++
 docs/pages/x/api/charts/default-heatmap-tooltip.json      | 6 ++++++
 .../api-docs/charts/charts-tooltip/charts-tooltip.json    | 1 +
 .../default-charts-axis-tooltip-content.json              | 1 +
 .../default-charts-item-tooltip-content.json              | 1 +
 .../default-heatmap-tooltip/default-heatmap-tooltip.json  | 1 +
 8 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json
index 4d4e12f08b2d..cc191b7a0bf8 100644
--- a/docs/pages/x/api/charts/charts-tooltip.json
+++ b/docs/pages/x/api/charts/charts-tooltip.json
@@ -22,7 +22,7 @@
         "name": "enum",
         "description": "'axis'<br>&#124;&nbsp;'item'<br>&#124;&nbsp;'none'"
       },
-      "default": "'item'"
+      "default": "'axis'"
     }
   },
   "name": "ChartsTooltip",
@@ -76,6 +76,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiChartsTooltip-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiChartsTooltip-root",
diff --git a/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json b/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json
index 274550fe1444..2594869a42ab 100644
--- a/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json
+++ b/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json
@@ -53,6 +53,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiDefaultChartsAxisTooltipContent-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiDefaultChartsAxisTooltipContent-root",
diff --git a/docs/pages/x/api/charts/default-charts-item-tooltip-content.json b/docs/pages/x/api/charts/default-charts-item-tooltip-content.json
index c3582356897c..7d76f641a34f 100644
--- a/docs/pages/x/api/charts/default-charts-item-tooltip-content.json
+++ b/docs/pages/x/api/charts/default-charts-item-tooltip-content.json
@@ -54,6 +54,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiDefaultChartsItemTooltipContent-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiDefaultChartsItemTooltipContent-root",
diff --git a/docs/pages/x/api/charts/default-heatmap-tooltip.json b/docs/pages/x/api/charts/default-heatmap-tooltip.json
index caa6575ad64c..66e8ffa29495 100644
--- a/docs/pages/x/api/charts/default-heatmap-tooltip.json
+++ b/docs/pages/x/api/charts/default-heatmap-tooltip.json
@@ -53,6 +53,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiDefaultHeatmapTooltip-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiDefaultHeatmapTooltip-root",
diff --git a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
index 152217da8fe5..a268da37e6cf 100644
--- a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
+++ b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
@@ -25,6 +25,7 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"
     },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
     "root": { "description": "Styles applied to the root element." },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
diff --git a/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json b/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json
index ef97ccfe86a3..3e7c7c6cc6e9 100644
--- a/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json
+++ b/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json
@@ -19,6 +19,7 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"
     },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
     "root": { "description": "Styles applied to the root element." },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
diff --git a/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json b/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json
index 36fe7b5f92e5..c7ea4d31307f 100644
--- a/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json
+++ b/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json
@@ -23,6 +23,7 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"
     },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
     "root": { "description": "Styles applied to the root element." },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
diff --git a/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json b/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json
index 36fe7b5f92e5..c7ea4d31307f 100644
--- a/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json
+++ b/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json
@@ -23,6 +23,7 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"
     },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
     "root": { "description": "Styles applied to the root element." },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },

From 4b6e8eb0da811345d92d48c2170efa927b0f3f9b Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Thu, 29 Aug 2024 13:58:51 +0200
Subject: [PATCH 7/7] Rework ChartsGrid

---
 .../src/BarChartPro/BarChartPro.tsx           |  2 +-
 .../src/LineChartPro/LineChartPro.tsx         |  2 +-
 .../src/ScatterChartPro/ScatterChartPro.tsx   |  2 +-
 packages/x-charts/src/BarChart/BarChart.tsx   |  2 +-
 .../x-charts/src/ChartsGrid/ChartsGrid.tsx    | 81 ++++---------------
 .../src/ChartsGrid/ChartsHorizontalGrid.tsx   | 38 +++++++++
 .../src/ChartsGrid/ChartsVerticalGrid.tsx     | 38 +++++++++
 .../src/ChartsGrid/styledCommonents.tsx       | 22 +++++
 packages/x-charts/src/LineChart/LineChart.tsx |  2 +-
 .../src/ScatterChart/ScatterChart.tsx         |  2 +-
 .../src/themeAugmentation/components.d.ts     |  5 --
 11 files changed, 118 insertions(+), 78 deletions(-)
 create mode 100644 packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx
 create mode 100644 packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx
 create mode 100644 packages/x-charts/src/ChartsGrid/styledCommonents.tsx

diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
index f07082ebd628..ef8624363755 100644
--- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
+++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
@@ -56,7 +56,7 @@ const BarChartPro = React.forwardRef(function BarChartPro(inProps: BarChartProPr
       onZoomChange={onZoomChange}
     >
       {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
-      {props.grid && <ChartsGrid {...gridProps} />}
+      <ChartsGrid {...gridProps} />
       <g {...clipPathGroupProps}>
         <BarChartPlotZoom {...barPlotProps} />
         <ChartsOverlay {...overlayProps} />
diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
index 90782a38be2d..8075680e6bc4 100644
--- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
+++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
@@ -66,7 +66,7 @@ const LineChartPro = React.forwardRef(function LineChartPro(inProps: LineChartPr
       onZoomChange={onZoomChange}
     >
       {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
-      {props.grid && <ChartsGrid {...gridProps} />}
+      <ChartsGrid {...gridProps} />
       <g {...clipPathGroupProps}>
         <AreaPlotZoom {...areaPlotProps} />
         <LinePlotZoom {...linePlotProps} />
diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
index 06679a1e0b2d..cf9a928faa73 100644
--- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
+++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
@@ -57,7 +57,7 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
       <ZAxisContextProvider {...zAxisProps}>
         {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
         <ChartsAxis {...chartsAxisProps} />
-        {props.grid && <ChartsGrid {...gridProps} />}
+        <ChartsGrid {...gridProps} />
         <g data-drawing-container>
           {/* The `data-drawing-container` indicates that children are part of the drawing area. Ref: https://github.com/mui/mui-x/issues/13659 */}
           <ScatterPlot {...scatterPlotProps} />
diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
index 7aca01261877..ffb89e8494d4 100644
--- a/packages/x-charts/src/BarChart/BarChart.tsx
+++ b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -130,7 +130,7 @@ const BarChart = React.forwardRef(function BarChart(inProps: BarChartProps, ref)
   return (
     <ResponsiveChartContainer ref={ref} {...chartContainerProps}>
       {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
-      {props.grid && <ChartsGrid {...gridProps} />}
+      <ChartsGrid {...gridProps} />
       <g {...clipPathGroupProps}>
         <BarPlot {...barPlotProps} />
         <ChartsOverlay {...overlayProps} />
diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
index 497d23977067..0480ea912c02 100644
--- a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
+++ b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
@@ -1,36 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, useThemeProps } from '@mui/material/styles';
-
+import { useThemeProps } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import {
-  ChartsGridClasses,
-  getChartsGridUtilityClass,
-  chartsGridClasses,
-} from './chartsGridClasses';
+import { ChartsGridClasses, getChartsGridUtilityClass } from './chartsGridClasses';
 import { useDrawingArea } from '../hooks/useDrawingArea';
-
-const GridRoot = styled('g', {
-  name: 'MuiChartsGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => [
-    { [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine },
-    { [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine },
-    styles.root,
-  ],
-})({});
-
-const GridLine = styled('line', {
-  name: 'MuiChartsGrid',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line,
-})(({ theme }) => ({
-  stroke: (theme.vars || theme).palette.divider,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1,
-}));
+import { GridRoot } from './styledCommonents';
+import { ChartsGridVertical } from './ChartsVerticalGrid';
+import { ChartsGridHorizontal } from './ChartsHorizontalGrid';
 
 const useUtilityClasses = ({ classes }: ChartsGridProps) => {
   const slots = {
@@ -75,48 +52,18 @@ function ChartsGrid(inProps: ChartsGridProps) {
 
   const classes = useUtilityClasses(props);
 
-  const horizontalAxisId = yAxisIds[0];
-  const verticalAxisId = xAxisIds[0];
-
-  const {
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval,
-  } = xAxis[verticalAxisId];
-
-  const {
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval,
-  } = yAxis[horizontalAxisId];
-
-  const xTicks = useTicks({ scale: xScale, tickNumber: xTickNumber, tickInterval: xTickInterval });
-  const yTicks = useTicks({ scale: yScale, tickNumber: yTickNumber, tickInterval: yTickInterval });
+  const horizontalAxis = yAxis[yAxisIds[0]];
+  const verticalAxis = xAxis[xAxisIds[0]];
 
   return (
     <GridRoot {...other} className={classes.root}>
-      {vertical &&
-        xTicks.map(({ formattedValue, offset }) => (
-          <GridLine
-            key={`vertical-${formattedValue}`}
-            y1={drawingArea.top}
-            y2={drawingArea.top + drawingArea.height}
-            x1={offset}
-            x2={offset}
-            className={classes.verticalLine}
-          />
-        ))}
-      {horizontal &&
-        yTicks.map(({ formattedValue, offset }) => (
-          <GridLine
-            key={`horizontal-${formattedValue}`}
-            y1={offset}
-            y2={offset}
-            x1={drawingArea.left}
-            x2={drawingArea.left + drawingArea.width}
-            className={classes.horizontalLine}
-          />
-        ))}
+      {vertical && (
+        <ChartsGridVertical axis={verticalAxis} drawingArea={drawingArea} classes={classes} />
+      )}
+
+      {horizontal && (
+        <ChartsGridHorizontal axis={horizontalAxis} drawingArea={drawingArea} classes={classes} />
+      )}
     </GridRoot>
   );
 }
diff --git a/packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx
new file mode 100644
index 000000000000..2827e782e4cd
--- /dev/null
+++ b/packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { DrawingArea } from '../context/DrawingProvider';
+import { useTicks } from '../hooks/useTicks';
+import { AxisDefaultized, ChartsYAxisProps, ScaleName } from '../models/axis';
+import { GridLine } from './styledCommonents';
+import { ChartsGridClasses } from './chartsGridClasses';
+
+interface ChartsGridHorizontalProps {
+  axis: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
+  drawingArea: DrawingArea;
+  classes: Partial<ChartsGridClasses>;
+}
+
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridHorizontal(props: ChartsGridHorizontalProps) {
+  const { axis, drawingArea, classes } = props;
+
+  const { scale, tickNumber, tickInterval } = axis;
+
+  const yTicks = useTicks({ scale, tickNumber, tickInterval });
+
+  return (
+    <React.Fragment>
+      {yTicks.map(({ formattedValue, offset }) => (
+        <GridLine
+          key={`horizontal-${formattedValue}`}
+          y1={offset}
+          y2={offset}
+          x1={drawingArea.left}
+          x2={drawingArea.left + drawingArea.width}
+          className={classes.horizontalLine}
+        />
+      ))}
+    </React.Fragment>
+  );
+}
diff --git a/packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx
new file mode 100644
index 000000000000..b033d5c1b8ea
--- /dev/null
+++ b/packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { DrawingArea } from '../context/DrawingProvider';
+import { useTicks } from '../hooks/useTicks';
+import { AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
+import { GridLine } from './styledCommonents';
+import { ChartsGridClasses } from './chartsGridClasses';
+
+interface ChartsGridVerticalProps {
+  axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
+  drawingArea: DrawingArea;
+  classes: Partial<ChartsGridClasses>;
+}
+
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridVertical(props: ChartsGridVerticalProps) {
+  const { axis, drawingArea, classes } = props;
+
+  const { scale, tickNumber, tickInterval } = axis;
+
+  const xTicks = useTicks({ scale, tickNumber, tickInterval });
+
+  return (
+    <React.Fragment>
+      {xTicks.map(({ formattedValue, offset }) => (
+        <GridLine
+          key={`vertical-${formattedValue}`}
+          y1={drawingArea.top}
+          y2={drawingArea.top + drawingArea.height}
+          x1={offset}
+          x2={offset}
+          className={classes.verticalLine}
+        />
+      ))}
+    </React.Fragment>
+  );
+}
diff --git a/packages/x-charts/src/ChartsGrid/styledCommonents.tsx b/packages/x-charts/src/ChartsGrid/styledCommonents.tsx
new file mode 100644
index 000000000000..02f2ea7a84d2
--- /dev/null
+++ b/packages/x-charts/src/ChartsGrid/styledCommonents.tsx
@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+import { chartsGridClasses } from './chartsGridClasses';
+
+export const GridRoot = styled('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [
+    { [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine },
+    { [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine },
+    styles.root,
+  ],
+})({});
+
+export const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line,
+})(({ theme }) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+}));
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index 0bd258bfd715..94235ce0c79d 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -159,7 +159,7 @@ const LineChart = React.forwardRef(function LineChart(inProps: LineChartProps, r
   return (
     <ResponsiveChartContainer ref={ref} {...chartContainerProps}>
       {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
-      {props.grid && <ChartsGrid {...gridProps} />}
+      <ChartsGrid {...gridProps} />
       <g {...clipPathGroupProps}>
         <AreaPlot {...areaPlotProps} />
         <LinePlot {...linePlotProps} />
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index ecd3bbe6c2c3..d8ae6735b52b 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -139,7 +139,7 @@ const ScatterChart = React.forwardRef(function ScatterChart(inProps: ScatterChar
       <ZAxisContextProvider {...zAxisProps}>
         {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
         <ChartsAxis {...chartsAxisProps} />
-        {props.grid && <ChartsGrid {...gridProps} />}
+        <ChartsGrid {...gridProps} />
         <g data-drawing-container>
           {/* The `data-drawing-container` indicates that children are part of the drawing area. Ref: https://github.com/mui/mui-x/issues/13659 */}
           <ScatterPlot {...scatterPlotProps} />
diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts
index 63644197a3e4..3302ca499b7b 100644
--- a/packages/x-charts/src/themeAugmentation/components.d.ts
+++ b/packages/x-charts/src/themeAugmentation/components.d.ts
@@ -16,11 +16,6 @@ export interface ChartsComponents<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsAxisHighlight'];
   };
   MuiChartsGrid?: {
-    /**
-     * Warning, does not work with LineChart, BarChart and ScatterChart.
-     * Those components skip the grid rendering if it seems unnecessary according to there props.
-     * This `defaultProps` only work if you call `<ChartsGrid />` in a composed chart.
-     */
     defaultProps?: ComponentsProps['MuiChartsGrid'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsGrid'];
   };