OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to fill area under `recharts` `AreaChart` curve, when data has +ve and -ve values

  • Thread starter Thread starter staf
  • Start date Start date
S

staf

Guest
I have a chart made with the javascript recharts library. How can I fill the area under the curve, down to the bottom of the visible area, not to zero?

Currently looking like this: enter image description here

But I would like the curve to fill to the bottom of the chart, and not down to/up to zero.

Code for this section is as follows:

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

<p>I have a chart made with the javascript <a href="https://recharts.org/" rel="nofollow noreferrer">recharts library</a>. How can I fill the area under the curve, down to the bottom of the visible area, not to zero?</p>
<p>Currently looking like this:
<a href="https://i.sstatic.net/CCHXu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/CCHXu.png" alt="enter image description here" /></a></p>
<p>But I would like the curve to fill to the bottom of the chart, and not down to/up to zero.</p>
<p>Code for this section is as follows:</p>
<pre><code> 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>
);
</code></pre>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top