feat(FE-316): Add axis labels and responsive sizing to bar chart

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'