diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 04a10e8d9..82499306c 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -14,27 +14,29 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
 export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
   return (
-    <Card>
+    <Card className="h-full">
+      <CardContent className="h-full">
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-        <CardContent>
-            <ChartContainer config={props.chartConfig}>
-                <BarChart accessibilityLayer data={props.chartData}>
-                    <CartesianGrid vertical={false} />
-                    <XAxis
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full">
+              <BarChart accessibilityLayer data={props.chartData} className="h-full">
+                  <CartesianGrid vertical={false} />
+                  <XAxis
                     dataKey="label"
                     tickLine={false}
                     tickMargin={10}
                     axisLine={false}
                     tickFormatter={(value) => value.slice(0, 3)}
-                    />
-                    <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />}/>
-                    <Bar dataKey="val" radius={10} />
-                </BarChart>
-            </ChartContainer>
-        </CardContent>
+                  />
+                  <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />}/>
+                  <Bar dataKey="val" radius={10} />
+              </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
     </Card>
   )
 }
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index 860b98558..336994029 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -12,7 +12,6 @@ import {
   ChartTooltipContent,
   type ChartConfig
 } from "./lib/chart";
-import type { CSSProperties } from "react";
 
 // eslint-disable-next-line react-refresh/only-export-components
 export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 8917124d8..b8565c3bf 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -77,28 +77,30 @@ const CustomLegend = (props: any) => {
 
 export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string }) {
   return (
-    <Card>
-      <CardContent>
+    <Card className="h-full">
+      <CardContent className="h-full">
         {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-        <ChartContainer config={props.chartConfig}>
-          <ComposedChart data={props.chartData}>
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="label" />
-            {/* 왼쪽 Y축: lineVal (정상) */}
-            <YAxis yAxisId="left" orientation="left" />
-            {/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
-            <YAxis yAxisId="right" orientation="right" reversed />
-            <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
-            <Legend content={CustomLegend}/>
-            {/* 바 차트 (오른쪽 Y축 사용, 위에서 아래로) */}
-            <Bar yAxisId="right" dataKey="barVal" fill="#8884d8" name="강수량(mm/일)"/>
-            {/* 라인 차트 (왼쪽 Y축 사용) */}
-            <Line yAxisId="left" type="monotone" dataKey="lineVal" stroke="orange" strokeWidth={2} dot={{r: 0}} name="BOD(mg/L)"/>
-          </ComposedChart>
-        </ChartContainer>
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full" >
+            <ComposedChart data={props.chartData} className="h-full ">
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="label" />
+              {/* 왼쪽 Y축: lineVal (정상) */}
+              <YAxis yAxisId="left" orientation="left" />
+              {/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
+              <YAxis yAxisId="right" orientation="right" reversed />
+              <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
+              <Legend content={CustomLegend}/>
+              {/* 바 차트 (오른쪽 Y축 사용, 위에서 아래로) */}
+              <Bar yAxisId="right" dataKey="barVal" fill="#8884d8" name="강수량(mm/일)"/>
+              {/* 라인 차트 (왼쪽 Y축 사용) */}
+              <Line yAxisId="left" type="monotone" dataKey="lineVal" stroke="orange" strokeWidth={2} dot={{r: 0}} name="BOD(mg/L)"/>
+            </ComposedChart>
+          </ChartContainer>
+        </div>
       </CardContent>
     </Card>
   )
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 1aa0e2b4d..8a1168940 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -14,41 +14,36 @@ import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
 
 export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
   return (
-    <Card>
+    <Card className="h-full">
+      <CardContent className="h-full">
       {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
         <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
           {props.chartTitle}
         </div>): null}
-      <CardContent>
-        <ChartContainer config={props.chartConfig}>
-          <LineChart
-            accessibilityLayer
-            data={props.chartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
-            <Line
-              dataKey="val"
-              type="linear"
-              strokeWidth={2}
-              dot={false}
-            />
-          </LineChart>
-        </ChartContainer>
+        <div className="h-[calc(100%-42px)] flex justify-center">
+          <ChartContainer config={props.chartConfig} className="h-full w-full">
+            <LineChart data={props.chartData} className="h-full">
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="month"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                tickFormatter={(value) => value.slice(0, 3)}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent hideLabel />}
+              />
+              <Line
+                dataKey="val"
+                type="linear"
+                strokeWidth={2}
+                dot={false}
+              />
+            </LineChart>
+          </ChartContainer>
+        </div>
       </CardContent>
     </Card>
   )
diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx
index 525979a5a..fc5747f3a 100644
--- a/packages/common/business_components/src/ui/chart/index.tsx
+++ b/packages/common/business_components/src/ui/chart/index.tsx
@@ -21,31 +21,23 @@ const CHART_FORM = {
 function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
   if( props.chartForm == CHART_FORM.BAR ){
     return (
-      <div>
-        <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </BarChart>
-      </div>
+      <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </BarChart>
     );
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
-      <div>
-        <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </LineChart>
-      </div>
+      <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </LineChart>
     );
   } else if( props.chartForm == CHART_FORM.DN ){
     return (
-      <div>
-        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </DoughnutChart>
-      </div>
+      <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </DoughnutChart>
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR){
     return (
-      <div className='w-100'>
-        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
-        </LineBarchart>
-      </div>
+      <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
+      </LineBarchart>
     );
   }
 }