diff --git a/src/app/(main)/reports/goals/GoalsChart.tsx b/src/app/(main)/reports/goals/GoalsChart.tsx
index 7cebbe21..f20c4f9b 100644
--- a/src/app/(main)/reports/goals/GoalsChart.tsx
+++ b/src/app/(main)/reports/goals/GoalsChart.tsx
@@ -33,10 +33,13 @@ export function GoalsChart({ className }: { className?: string; isLoading?: bool
                   <span className={styles.visitors}>{formatLongNumber(goal)}</span>
                   {formatMessage(labels.goal)}
                 </div>
-                <div className={styles.percent}>{(result / goal).toFixed(2)}%</div>
+                <div className={styles.percent}>{((result / goal) * 100).toFixed(2)}%</div>
               </div>
               <div className={styles.track}>
-                <div className={styles.bar} style={{ width: `${result / goal}%` }}></div>
+                <div
+                  className={styles.bar}
+                  style={{ width: `${result > goal ? 100 : (result / goal) * 100}%` }}
+                ></div>
               </div>
             </div>
           </div>
diff --git a/src/queries/analytics/reports/getGoals.ts b/src/queries/analytics/reports/getGoals.ts
index f275d604..d26998d0 100644
--- a/src/queries/analytics/reports/getGoals.ts
+++ b/src/queries/analytics/reports/getGoals.ts
@@ -196,7 +196,7 @@ async function clickhouseQuery(
         const results = a[0];
 
         return Object.keys(results).map((key, i) => {
-          return { ...urls[i], result: results[key] };
+          return { ...urls[i], goal: Number(urls[i].goal), result: Number(results[key]) };
         });
       })
     : [];
@@ -216,7 +216,7 @@ async function clickhouseQuery(
         const results = a[0];
 
         return Object.keys(results).map((key, i) => {
-          return { ...events[i], result: results[key] };
+          return { ...events[i], goal: Number(events[i].goal), result: Number(results[key]) };
         });
       })
     : [];