how to create Biaxial LineChart using .map function in recharts - reactjs

Question

so basically i have this data:
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
coming from one component. and i'm drawing a rechart from another component like this:
<div className={styles.outer}>
<div className={styles.inner}>
<p className={styles.title}>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis yAxisId="right" tickLine={false} axisLine={false} dataKey="day" allowDuplicatedCategory={false} />
<YAxis tickCount={5} axisLine={false} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
props.data.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{props.data.map(s => (
<Line dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
the result is working great its drawing the data and everything, but what i'm stuck on is that i need two Y axis to be shown instead of just one which is present. i have looked it up but i don't know how to create it using .map can anyone help?

Answer 1

Here is how I did it.
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
export default function App() {
return (
<div >
<div >
<p>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis tickLine={false} axisLine={true} dataKey="day" allowDuplicatedCategory={false} />
<YAxis yAxisId="left" tickCount={5} dx={-15} dataKey="value"/>
<YAxis yAxisId="right" orientation="right" tickCount={5} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
bodyWeightAndFatData.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{bodyWeightAndFatData.map(s => (
<Line yAxisId="left" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
{bodyWeightAndFatData.map(s => (
<Line yAxisId="right" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
}
Two axis one on left and one on right.