diff --git a/src/components/chart-elements/DonutChart/DonutChart.tsx b/src/components/chart-elements/DonutChart/DonutChart.tsx
index 9f14bbbb6..14172b9c3 100644
--- a/src/components/chart-elements/DonutChart/DonutChart.tsx
+++ b/src/components/chart-elements/DonutChart/DonutChart.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect } from "react";
-import { tremorTwMerge } from "lib";
+import { tremorTwMerge, defaultValueFormatter, themeColorRange } from "lib";
 import {
   Pie,
   PieChart as ReChartsDonutChart,
@@ -11,7 +11,6 @@ import {
 
 import NoData from "../common/NoData";
 import { Color, ValueFormatter } from "../../../lib/inputTypes";
-import { defaultValueFormatter, themeColorRange } from "lib";
 
 import { parseData, parseLabelInput } from "./inputParser";
 import { DonutChartTooltip } from "./DonutChartTooltip";
@@ -123,7 +122,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>((props, ref
   }, [activeIndex]);
 
   return (
-    <div ref={ref} className={tremorTwMerge("w-full h-44", className)} {...other}>
+    <div ref={ref} className={tremorTwMerge("w-full h-40", className)} {...other}>
       <ResponsiveContainer className="h-full w-full">
         {data?.length ? (
           <ReChartsDonutChart
@@ -135,6 +134,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>((props, ref
                   }
                 : undefined
             }
+            margin={{ top: 0, left: 0, right: 0, bottom: 0 }}
           >
             {showLabel && isDonut ? (
               <text