diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
index 9333ce66d582f..271a5cb46b180 100644
--- a/packages/x-charts/src/Gauge/GaugeContainer.tsx
+++ b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -54,7 +54,15 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(
       pluginParams={{
         width: inWidth,
         height: inHeight,
-        margin: { left: 10, right: 10, top: 10, bottom: 10, ...margin },
+        margin:
+          typeof margin === 'number'
+            ? {
+                top: margin,
+                bottom: margin,
+                left: margin,
+                right: margin,
+              }
+            : { left: 10, right: 10, top: 10, bottom: 10, ...margin },
       }}
       plugins={[]}
     >
diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index c055852132b44..76f59ac488f05 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -100,7 +100,17 @@ const PieChart = React.forwardRef(function PieChart(
     className,
     ...other
   } = props;
-  const margin = { ...defaultMargin, ...marginProps };
+  const margin = {
+    ...defaultMargin,
+    ...(typeof marginProps === 'number'
+      ? {
+          top: marginProps,
+          bottom: marginProps,
+          left: marginProps,
+          right: marginProps,
+        }
+      : marginProps),
+  };
 
   const { chartDataProviderProps, chartsSurfaceProps } = useChartContainerProps(
     {
diff --git a/packages/x-charts/src/hooks/useChartDimensions.ts b/packages/x-charts/src/hooks/useChartDimensions.ts
deleted file mode 100644
index e2e047f2cc99c..0000000000000
--- a/packages/x-charts/src/hooks/useChartDimensions.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-import * as React from 'react';
-import { DEFAULT_MARGINS } from '../constants';
-import { LayoutConfig } from '../models/layout';
-
-const useChartDimensions = (width: number, height: number, margin: LayoutConfig['margin']) => {
-  const defaultizedMargin = {
-    ...DEFAULT_MARGINS,
-    ...margin,
-  };
-
-  const drawingArea = React.useMemo(
-    () => ({
-      left: defaultizedMargin.left,
-      top: defaultizedMargin.top,
-      right: defaultizedMargin.right,
-      bottom: defaultizedMargin.bottom,
-      width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
-      height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom),
-    }),
-    [
-      width,
-      height,
-      defaultizedMargin.top,
-      defaultizedMargin.bottom,
-      defaultizedMargin.left,
-      defaultizedMargin.right,
-    ],
-  );
-
-  return drawingArea;
-};
-
-export default useChartDimensions;
diff --git a/packages/x-charts/src/internals/calculateMargins.ts b/packages/x-charts/src/internals/calculateMargins.ts
index cd65f1902e98a..20ecbef50c577 100644
--- a/packages/x-charts/src/internals/calculateMargins.ts
+++ b/packages/x-charts/src/internals/calculateMargins.ts
@@ -3,6 +3,19 @@ import { DEFAULT_MARGINS, DEFAULT_LEGEND_FACING_MARGIN } from '../constants';
 import type { LayoutConfig } from '../models';
 import type { CartesianChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
 
+const numberToMargin = (input: LayoutConfig['margin']) => {
+  if (typeof input === 'number') {
+    return {
+      top: input,
+      bottom: input,
+      left: input,
+      right: input,
+    };
+  }
+
+  return input;
+};
+
 export const calculateMargins = <
   T extends ChartsLegendSlotExtension &
     Pick<LayoutConfig, 'margin'> & {
@@ -15,7 +28,7 @@ export const calculateMargins = <
   if (props.hideLegend || !props.series?.some((s) => s.label)) {
     return {
       ...DEFAULT_MARGINS,
-      ...props.margin,
+      ...numberToMargin(props.margin),
     };
   }
 
@@ -24,14 +37,14 @@ export const calculateMargins = <
       return {
         ...DEFAULT_MARGINS,
         left: DEFAULT_LEGEND_FACING_MARGIN,
-        ...props.margin,
+        ...numberToMargin(props.margin),
       };
     }
 
     return {
       ...DEFAULT_MARGINS,
       right: DEFAULT_LEGEND_FACING_MARGIN,
-      ...props.margin,
+      ...numberToMargin(props.margin),
     };
   }
 
@@ -39,13 +52,13 @@ export const calculateMargins = <
     return {
       ...DEFAULT_MARGINS,
       bottom: DEFAULT_LEGEND_FACING_MARGIN,
-      ...props.margin,
+      ...numberToMargin(props.margin),
     };
   }
 
   return {
     ...DEFAULT_MARGINS,
     top: DEFAULT_LEGEND_FACING_MARGIN,
-    ...props.margin,
+    ...numberToMargin(props.margin),
   };
 };
diff --git a/packages/x-charts/src/models/layout.ts b/packages/x-charts/src/models/layout.ts
index 28c8742faf331..53a2df29c989b 100644
--- a/packages/x-charts/src/models/layout.ts
+++ b/packages/x-charts/src/models/layout.ts
@@ -16,5 +16,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<ChartMargin>;
+  margin?: Partial<ChartMargin> | number;
 };