Multiple YAxes

[memee]

Is it possible to show multiple YAxes? I have 2 different types of data. I've tried to put 2 <YAxis /> instances with different orientation and dataKey but it always shows 1 Axis.

[MattyKems87]

Have you specified the yAxisId prop for your YAxes and your two cartesian graph components? Not sure if that makes a difference as I'm also new to recharts, but you give it a try. Give both your YAxes a yAxisId and set the same yAxisId on the corresponding cartesian components. Here's a composite chart I've set up using some samples which has two y axes:

const data = [
  {
    name: "Jan",
    uv: 590,
    pv: 800,
    amt: 1400,
    cnt: 490
  },
  {
    name: "Feb",
    uv: 868,
    pv: 967,
    amt: 1506,
    cnt: 590
  },
  {
    name: "March",
    uv: 1397,
    pv: 1098,
    amt: 989,
    cnt: 350
  },
  {
    name: "April",
    uv: 1480,
    pv: 1200,
    amt: 1228,
    cnt: 480
  },
  {
    name: "May",
    uv: 1520,
    pv: 1108,
    amt: 1100,
    cnt: 460
  },
  {
    name: "June",
    uv: 1400,
    pv: 680,
    amt: 1700,
    cnt: 380
  }
];

export default function App() {
  return (
    <ComposedChart
      width={500}
      height={400}
      data={data}
      margin={{
        top: 20,
        right: 80,
        bottom: 20,
        left: 20
      }}
    >
      <CartesianGrid stroke="#f5f5f5" />
      <XAxis
        dataKey="name"
        label={{ value: "Pages", position: "insideBottomRight", offset: 0 }}
        scale="band"
      />
      <YAxis
        unit="K"
        yAxisId="left"
        dataKey="uv"
        label={{ value: "Upfront", angle: -90, position: "insideLeft" }}
      />
      <YAxis
        unit="mil"
        dataKey="pv"
        label={{ value: "Loan Volume", angle: -90, position: "inside" }}
        yAxisId="right"
        orientation="right"
      />
      <Tooltip />
      <Legend />
      <Bar yAxisId="left" dataKey="uv" barSize={20} fill="green" />
      <Line yAxisId="right" type="monotone" dataKey="pv" stroke="black" />
    </ComposedChart>
  );
}