diff --git a/airbyte-webapp/src/components/BarChart/BarChart.tsx b/airbyte-webapp/src/components/BarChart/BarChart.tsx
index 640b5593c296d..73f6e1e5e8dc9 100644
--- a/airbyte-webapp/src/components/BarChart/BarChart.tsx
+++ b/airbyte-webapp/src/components/BarChart/BarChart.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { CartesianGrid, BarChart as BasicBarChart, ResponsiveContainer, XAxis, YAxis, Bar, Label } from "recharts";
+import React, { useMemo } from "react";
+import { Bar, BarChart as BasicBarChart, CartesianGrid, Label, ResponsiveContainer, XAxis, YAxis } from "recharts";
 import { barChartColors, theme } from "theme";
 
 type BarChartProps = {
-  data?: {
+  data: {
     name: string;
-    value: number | number[];
+    value: number;
   }[];
   legendLabels: string[];
   xLabel?: string;
@@ -16,6 +16,11 @@ const BarChart: React.FC<BarChartProps> = ({ data, legendLabels, xLabel, yLabel
   const chartLinesColor = theme.greyColor20;
   const chartTicksColor = theme.lightTextColor;
 
+  const width = useMemo(
+    () => Math.min(Math.max([...data].sort((a, b) => b.value - a.value)[0].value.toFixed(0).length * 10, 80), 130),
+    [data]
+  );
+
   return (
     <ResponsiveContainer>
       <BasicBarChart data={data} margin={{ right: 12, top: 25 }}>
@@ -38,11 +43,18 @@ const BarChart: React.FC<BarChartProps> = ({ data, legendLabels, xLabel, yLabel
           tick={{ fontSize: "11px" }}
           tickSize={7}
         />
-        <YAxis axisLine={false} tickLine={false} stroke={chartTicksColor} tick={{ fontSize: "11px" }} tickSize={10}>
+        <YAxis
+          axisLine={false}
+          tickLine={false}
+          stroke={chartTicksColor}
+          tick={{ fontSize: "11px" }}
+          tickSize={10}
+          width={width}
+        >
           <Label value={yLabel} fontSize={11} fill={chartTicksColor} fontWeight={600} position="top" offset={10} />
         </YAxis>
         {legendLabels.map((barName, key) => (
-          <Bar dataKey={barName} fill={barChartColors[key]} />
+          <Bar dataKey={barName} key={barName} fill={barChartColors[key]} />
         ))}
       </BasicBarChart>
     </ResponsiveContainer>