diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx
index 62dd2333f..a7282830d 100644
--- a/packages/common/business_components/src/ui/chart/BarChart.tsx
+++ b/packages/common/business_components/src/ui/chart/BarChart.tsx
@@ -88,12 +88,12 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
   return (
     <>
     {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
-      <div className="!mt-3 text-[2.5rem] font-bold">
+      <div className="!mt-3 text-[2.5rem] font-bold text-center">
       {chartTitle}
       </div>): null}
-      <div className="flex justify-center">
-        <ChartContainer config={chartConfig ?? {}} className={chartClassName + " !w-[90%]"}>
-          <BarChart accessibilityLayer data={chartData}>
+      <div className="flex justify-center h-full w-full">
+        <ChartContainer config={chartConfig ?? {}} className={chartClassName + " !w-[88%]"}>
+          <BarChart accessibilityLayer data={chartData} margin={{ top: 5, right: 20, left: 30, bottom: 5 }}>
             <CartesianGrid vertical={false} />
             <XAxis
               dataKey="label"
@@ -110,7 +110,7 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
               axisLine={true}
               fontSize={12}
               fontWeight={500}
-              label={yFieldText ? { value: yFieldText, className:"text-[13px] font-bold", position: 'insideBottom', angle: 0, offset: -24  } : undefined}
+              label={yFieldText ? { value: yFieldText, className:"text-[13px] font-bold", position: 'insideLeft', angle: -90, offset: -24,  orientation: "left"  } : undefined}
             />
             <ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
             {chartData && chartData.length > 0 && (