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

This commit is contained in:
rstubryan
2025-12-24 11:22:47 +07:00
parent 22d24af41c
commit ea4dd29bbf
@@ -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'