diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 96dfab634..a71c550df 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -12,9 +12,12 @@ import {
 } from "./lib/chart";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
-export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
   return (
     <Card>
+        {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
         <CardContent>
             <ChartContainer config={props.chartConfig}>
                 <BarChart accessibilityLayer data={props.chartData}>
diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
index b08ca7746..0e8060486 100644
--- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx
@@ -15,9 +15,12 @@ import {
 import type { CSSProperties } from "react";
 
 // eslint-disable-next-line react-refresh/only-export-components
-export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; }) =>{
+export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
   return (
     <Card className="flex flex-col">
+      {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={props.chartConfig}
diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
index 4aa088e57..415e2b53a 100644
--- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx
@@ -75,10 +75,13 @@ const CustomLegend = (props: any) => {
   );
 };
 
-export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string }) {
   return (
     <Card>
       <CardContent>
+        {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
         <ChartContainer config={props.chartConfig}>
           <ComposedChart data={props.chartData}>
             <CartesianGrid strokeDasharray="3 3" />
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx
index 547a29c83..f3283822c 100644
--- a/packages/common/business_components/src/ui/chart/LineChart.tsx
+++ b/packages/common/business_components/src/ui/chart/LineChart.tsx
@@ -12,9 +12,12 @@ import {
 } from "./lib/chart";
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
 
-export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; }) {
+export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
   return (
     <Card>
+      {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
+        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        </div>): null}
       <CardContent>
         <ChartContainer config={props.chartConfig}>
           <LineChart
diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx
index 94c4e9ea7..525979a5a 100644
--- a/packages/common/business_components/src/ui/chart/index.tsx
+++ b/packages/common/business_components/src/ui/chart/index.tsx
@@ -18,32 +18,32 @@ const CHART_FORM = {
   LINEBAR : 'linebar'
 };
 
-function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; }) {
+function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
   if( props.chartForm == CHART_FORM.BAR ){
     return (
       <div>
-        <BarChart chartConfig={props.chartConfig} chartStyle={styles.divHeight} chartData={props.chartData}>
+        <BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </BarChart>
       </div>
     );
   } else if( props.chartForm == CHART_FORM.LINE ){
     return (
       <div>
-        <LineChart chartConfig={props.chartConfig} chartData={props.chartData}>
+        <LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </LineChart>
       </div>
     );
   } else if( props.chartForm == CHART_FORM.DN ){
     return (
       <div>
-        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData}>
+        <DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </DoughnutChart>
       </div>
     );
   } else if (props.chartForm == CHART_FORM.LINEBAR){
     return (
       <div className='w-100'>
-        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData}>
+        <LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
         </LineBarchart>
       </div>
     );