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?

• javascript
• reactjs
• recharts

1 Answer 1

I 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.