From d591c89cac6bc6f82d332b7d3ab5a1ca51371085 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   | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/uniformity/chart/UniformityBarChart.tsx b/src/components/pages/uniformity/chart/UniformityBarChart.tsx
index b37fccf2..4dc80835 100644
--- a/src/components/pages/uniformity/chart/UniformityBarChart.tsx
+++ b/src/components/pages/uniformity/chart/UniformityBarChart.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Bar,
   BarChart,
+  Legend,
   Rectangle,
   ResponsiveContainer,
   Tooltip,
@@ -59,10 +60,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 +90,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
           }}
         />
         <Bar
+          name='Birds'
           dataKey='uv'
           fill='#FFFFFF'
           stroke='#DDD'