fix types

Author: JCQuintas

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={[]}
     >

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(
     {

packages/x-charts/src/hooks/useChartDimensions.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,28 +37,28 @@ 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),
     };
   }
 
   if (props.slotProps?.legend?.position?.vertical === 'bottom') {
     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),
   };
 };

packages/x-charts/src/internals/calculateMargins.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;
 };