mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-316): Add axis labels and responsive sizing to bar chart
This commit is contained in:
@@ -59,10 +59,29 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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}>
|
<BarChart data={data} margin={margin} barGap={20}>
|
||||||
<XAxis dataKey='name' />
|
<XAxis
|
||||||
<YAxis />
|
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
|
<Tooltip
|
||||||
content={CustomTooltip}
|
content={CustomTooltip}
|
||||||
wrapperStyle={{
|
wrapperStyle={{
|
||||||
@@ -70,6 +89,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Bar
|
<Bar
|
||||||
|
name='Birds'
|
||||||
dataKey='uv'
|
dataKey='uv'
|
||||||
fill='#FFFFFF'
|
fill='#FFFFFF'
|
||||||
stroke='#DDD'
|
stroke='#DDD'
|
||||||
|
|||||||
Reference in New Issue
Block a user