如何让recharts AreaChart填充至图表底部而非零值（含正负数据）

我使用JavaScript的recharts库制作了一个AreaChart。当前图表的填充区域是到零值位置，但我希望将曲线下方的区域填充至图表可视区域的底部，而非零值。当前效果为：曲线下方的填充区域仅延伸至Y轴零值处，与图表底部存在空隙。

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>
);

Recharts的<Area>组件默认以0作为填充基线，要实现填充至图表可视区域底部，只需修改base属性为Y轴的实际最小值即可：

1. 先计算数据中height字段的最小值：

const minHeight = Math.min(...data.map(item => item.height));

2. 在<Area>组件中添加base={minHeight}属性：

<Area
  type="natural"
  dataKey="height"
  stroke="#8884d8"
  fillOpacity={1}
  fill="url(#fillGradient)"
  activeDot={{ scale: 10, onClick: (e, point) => onLineClick(point) }}
  base={minHeight} // 添加这一行
/>

如果希望Y轴下限比数据最小值稍低，留出一点空隙，可以给minHeight减去固定值，同时调整Y轴的domain适配：

<YAxis domain={[minHeight - 10, 'auto']} />

设置完成后，曲线下方的填充区域就会延伸到图表可视区域的底部，而非零值位置。

内容的提问来源于stack exchange，提问作者staf