diff --git a/frontend/src/components/charts/horizontal-bar-chart/index.tsx b/frontend/src/components/charts/horizontal-bar-chart/index.tsx
index 6e35450b..3f1d75de 100644
--- a/frontend/src/components/charts/horizontal-bar-chart/index.tsx
+++ b/frontend/src/components/charts/horizontal-bar-chart/index.tsx
@@ -5,7 +5,7 @@ import { format } from 'd3-format';
 import { cn } from '@/lib/classnames';
 
 const DEFAULT_BAR_COLOR = '#1E1E1E';
-const DEFAULT_MAX_PERCENTAGE = 55;
+const DEFAULT_MAX_PERCENTAGE = 100;
 const PROTECTION_TARGET = 30;
 
 type HorizontalBarChartProps = {
@@ -30,7 +30,11 @@ const HorizontalBarChart: React.FC<HorizontalBarChartProps> = ({ className, data
   }, [totalArea, protectedArea]);
 
   const barFillPercentage = useMemo(() => {
-    return Math.round((protectedArea * DEFAULT_MAX_PERCENTAGE) / totalArea);
+    const totalPercentage = (protectedArea * 100) / totalArea;
+    const relativeToMaxPercentage = (totalPercentage * 100) / DEFAULT_MAX_PERCENTAGE;
+
+    // Prevent overflowing if the bar fill exceeds the set max percentage
+    return relativeToMaxPercentage > DEFAULT_MAX_PERCENTAGE ? 100 : relativeToMaxPercentage;
   }, [protectedArea, totalArea]);
 
   const formattedArea = useMemo(() => {