and show how you would make the strokes from point 1 to point 2 and from point 2 to point 3 have different gradients? Feel free to define new gradients if needed.
","upvoteCount":1,"answerCount":2,"acceptedAnswer":{"@type":"Answer","text":"here you go https://codesandbox.io/p/sandbox/area-chart-filled-by-sign-forked-72qtk2
\nYou'll need to associate colors to your data and re-calculate offset every time a datapoint is added. You'll have a stop per datapoint with the first always being 0 and the last always being 100
\n
-
|
I need to be able to create something like the following.
Imagine there are more data points and I potentially need strokes from point to point to have a different gradients. Can someone take this simple AreaChart code taken from the docs const data = [
{
"name": "Page A",
"uv": 4000,
"amt": 2400
},
{
"name": "Page B",
"uv": 3000,
"amt": 2210
},
{
"name": "Page C",
"uv": 2000,
"amt": 2290
}
]
<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="line" dataKey="uv" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" strokeWidth={4} />
</AreaChart>and show how you would make the strokes from point 1 to point 2 and from point 2 to point 3 have different gradients? Feel free to define new gradients if needed. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
SVG does not support more than one gradient on an element at a time. But you should be able to accomplish what you want by using more stops. Not at the computer at the moment but I'll try to help in a bit |
Beta Was this translation helpful? Give feedback.
-
|
here you go https://codesandbox.io/p/sandbox/area-chart-filled-by-sign-forked-72qtk2 You'll need to associate colors to your data and re-calculate offset every time a datapoint is added. You'll have a stop per datapoint with the first always being 0 and the last always being 100
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much! Just what I was looking for. |
Beta Was this translation helpful? Give feedback.
-
|
No problem, glad it helped! |
Beta Was this translation helpful? Give feedback.
here you go https://codesandbox.io/p/sandbox/area-chart-filled-by-sign-forked-72qtk2
You'll need to associate colors to your data and re-calculate offset every time a datapoint is added. You'll have a stop per datapoint with the first always being 0 and the last always being 100