how to create Biaxial LineChart using .map function in recharts

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.