Tengo un gráfico hecho con la biblioteca de recargas de javascript. ¿Cómo puedo llenar el área bajo la curva, hasta el fondo del área visible, no hasta cero?

Actualmente se ve así:

Pero me gustaría que la curva se llenara hasta el final del gráfico, y no hasta cero.

El código para esta sección es el siguiente:

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