Reference Link
In Recharts react library, you can add gradient fills to area charts using the following method
<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>
In the example, they used two gradient elements with hardcoded "stopColor" property. When I give a variable colour in the following way stopColor = {areaColour}
it doesn't work
Rechart area
const plots = [colour1, colour2]
//Rechart line
plots.map((areaColour, index) => <Area type="monotone" dataKey={data[index]} fill="url(#color)" />
Defs
<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>
Is there a way to use a variable inside <defs>
so I can use it to generate a dynamic gradient?
Reference Link
In Recharts react library, you can add gradient fills to area charts using the following method
<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>
In the example, they used two gradient elements with hardcoded "stopColor" property. When I give a variable colour in the following way stopColor = {areaColour}
it doesn't work
Rechart area
const plots = [colour1, colour2]
//Rechart line
plots.map((areaColour, index) => <Area type="monotone" dataKey={data[index]} fill="url(#color)" />
Defs
<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>
Is there a way to use a variable inside <defs>
so I can use it to generate a dynamic gradient?
1 Answer
Reset to default 4I know question is old, but I came across it when I was looking for a solution to my problem. I'll leave the solution here if anyone else has the same question.
You need to change id
in LinearGradient
for each ponent. Like this:
<defs>
<linearGradient id={`color${color}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={color} stopOpacity={0.4}></stop>
<stop offset="75%" stopColor={color} stopOpacity={0.05}></stop>
</linearGradient>
</defs>
And next in area:
<Area
dataKey={"value"}
fill={`url(#color${color})`}
/>
It works for me.