Enlace de referencia
En la biblioteca de reacción de Recharts, puede agregar rellenos degradados a los gráficos de área utilizando el siguiente método

 <AreaChart width={730} height={250} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}> <defs> <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/> <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/> </linearGradient> <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/> <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/> </linearGradient> </defs> <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Area type="monotone" dataKey="uv" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" /> <Area type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv)" /> </AreaChart>

En el ejemplo, usaron dos elementos degradados con la propiedad "stopColor" codificada. Cuando le doy un color variable de la siguiente forma stopColor = {areaColour} no funciona Rechartear area

 const plots = [colour1, colour2] //Rechart line plots.map((areaColour, index) => <Area type="monotone" dataKey={data[index]} fill="url(#color)" />

definiciones

 <defs> <linearGradient id="color" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor={areaColour} stopOpacity={0.8}/> <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/> </linearGradient> </defs>

¿Hay alguna manera de usar una variable dentro <defs> para poder usarla para generar un degradado dinámico?