From ea4dd29bbfe98dae511f9d546f046d399d342e20 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 24 Dec 2025 11:22:47 +0700
Subject: [PATCH] feat(FE-316): Add axis labels and responsive sizing to bar
 chart

---
 .../uniformity/chart/UniformityBarChart.tsx   | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/uniformity/chart/UniformityBarChart.tsx b/src/components/pages/uniformity/chart/UniformityBarChart.tsx
index b37fccf2..78bd0663 100644
--- a/src/components/pages/uniformity/chart/UniformityBarChart.tsx
+++ b/src/components/pages/uniformity/chart/UniformityBarChart.tsx
@@ -59,10 +59,29 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
   };
 
   return (
-    <ResponsiveContainer width='100%' height={300}>
+    <ResponsiveContainer
+      width='100%'
+      height='100%'
+      className='min-h-[300px] xl:min-h-[350px]'
+    >
       <BarChart data={data} margin={margin} barGap={20}>
-        <XAxis dataKey='name' />
-        <YAxis />
+        <XAxis
+          dataKey='name'
+          label={{
+            value: 'Body Weight Range',
+            position: 'insideBottom',
+            offset: -5,
+            style: { textAnchor: 'middle', fontSize: 14, fill: '#18181B33' },
+          }}
+        />
+        <YAxis
+          label={{
+            value: 'Number of Birds',
+            angle: -90,
+            position: 'insideLeft',
+            style: { textAnchor: 'middle', fontSize: 14, fill: '#18181B33' },
+          }}
+        />
         <Tooltip
           content={CustomTooltip}
           wrapperStyle={{
@@ -70,6 +89,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
           }}
         />
         <Bar
+          name='Birds'
           dataKey='uv'
           fill='#FFFFFF'
           stroke='#DDD'