How to fill area under `recharts` `AreaChart` curve, when data has +ve and -ve values

Question

I have a chart made with the javascript recharts library. How can I fill the area under the curve, down to the bottom of the visible area, not to zero?

Currently looking like this:

But I would like the curve to fill to the bottom of the chart, and not down to/up to zero.

Code for this section is as follows:

  return (
    <ResponsiveContainer width="100%" height="100%">
      <AreaChart
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <defs>
          <linearGradient id="fillGradient" x1="0" y1="-1" x2="0" y2="1">
            <stop offset="5%" stopColor="#3182ce" stopOpacity={1} />
            <stop offset="95%" stopColor="#FFFFFF" stopOpacity={1} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 0" opacity={0.2} />
        <XAxis dataKey="date" tickFormatter={parseTimeLabels} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Area
          type="natural"
          dataKey="height"
          stroke="#8884d8"
          fillOpacity={1}
          fill="url(#fillGradient)"
          activeDot={{ scale: 10, onClick: (e, point) => onLineClick(point) }}
        />
      </AreaChart>
    </ResponsiveContainer>
  );

Answer 1

To anyone coming into this issue recently (2024):

Just add baseValue props to Area component and wala it works like magic!

<Area dataKey="value" baseValue="dataMin" />

baseValue type

number | "dataMin" | "dataMax"