How to align two Y-axis around 0 in React Recharts?

Question

I have an areachart with two areas and two Y-Axis. The first area goes from -1500 to 4500. The second goes from 0 to 100. Both areas start from the bottom so the 0 value of the second one is aligned with the -1500 value of the first one. Is it possible to align the two y-axis ?

<AreaChart width={730} height={250} data={data}
  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
  <defs>
    <linearGradient id="colorA" x1="0" y1="0" x2="0" y2="1">
      <stop offset="{off}" stopColor="green" stopOpacity={1}/>
      <stop offset="{off}" stopColor="red" stopOpacity={1}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="date" />
  <YAxis yAxisId="left" dataKey="number" />
  <YAxis yAxisId="right" orientation="right" dataKey="percentage" domain={[0,100]} unit="%" />
  <Area yAxisId="left" dataKey="number" stroke="#8884d8" fill="url(#colorA)" />
  <Area yAxisId="right" dataKey="percentage" stroke="#82ca9d" fill="#eee" />
</AreaChart>