How to apply gradient on the opposite side of the AreaChart line

[nikmace]

Do you want to request a feature or report a bug?

Feature

Sorry for creating an issue, was not sure where to ask otherwise. Thank you in advance!

What is the current behavior?

I can only apply the gradient below the line.

Here is my AreaChart:

       <ResponsiveContainer>
          <AreaChart
            syncId="depthChartSync"
            data={processedAsks}
            margin={{ top: 10, right: 20, left: 15, bottom: 0 }}
            onMouseMove={(e) => {
              setActiveIndex(e.activeTooltipIndex!);
            }}
            onMouseLeave={() => {
              setActiveIndex(-1);
            }}
          >
            <defs>
              <linearGradient id="colorAsks" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#eb5757" stopOpacity={0.01} />
                <stop offset="100%" stopColor="#eb5757" stopOpacity={0.3} />
              </linearGradient>
            </defs>

            <XAxis
              dataKey="volume"
              tickCount={5}
              axisLine={false}
              tickLine={false}
              tick={false}
              domain={asksVolumeDomain}
              type="number"
            />
            <YAxis
              dataKey="price"
              orientation="right"
              domain={asksDomain}
              axisLine={{ stroke: '#eb575789', strokeWidth: 1 }}
              tickLine={false}
              tick={tickStyles}
              type="number"
              tickFormatter={(value) =>
                `$${value.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`
              }
              tickCount={5}
            />
            <Tooltip cursor={false} content={<></>} />
            <Area
              type="monotone"
              dataKey="price"
              stroke="#eb5757"
              fillOpacity={1}
              fill="url(#colorAsks)"
              dot={false}
              activeDot={
                // @ts-ignore
                <CustomScatterDot
                  chartWidth={chartWidth}
                  accentColor="#F23645"
                  secondaryColor="#90252d"
                  activeIndex={activeIndex}
                  bidsData={processedBids}
                  asksData={processedAsks}
                  type="asks"
                />
              }
            />
          </AreaChart>
        </ResponsiveContainer>

Currently it looks like this:

What is the expected behavior?

The gradient appears on the opposite side of the line, meaning from the line to the top of the chart.

And I want to make the gradient like this:
(so it appears where I have drawn white lines, so it is inverted in relation to the line)

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

recharts: 2.12.1
Google Chrome
Not sure if this ever worked

[ckifer]

Hi!

There's nothing rendered on the other side of the area, so there's nothing to apply a gradient to. We'd have to support inverting the whole chart I think which isn't currently possible.

There might be some way to make it work without that kind of change but off the top of my head I can't think of anything.

[ckifer]

Going to move this to a discussion - if you'd like to request a feature, feel free to create another issue. I'm not sure this is possible in any charting library, feel free to share examples if it is

[spennyp]

See that sometimes its above, sometimes its below (depending on values):

Seems there is currently no to control where it appears?

[ckifer]

Sure there is control, there is the baseValue prop

It defaults to 0, so normally anything under 0 will be filled above the line. Anything above 0 will be filled below the line.

If I change the baseValue then that becomes the new point it changes

[ckifer]

@nikmace Try changing baseValue - it would have to be beyond your maximum datapoint, but it should then fill from that line down instead of 0 up. I didn't understand until @spennyp's post. Let me know if that resolves it

[nikmace]

Thank you, guys, for your responses, much appreciated! :)

Here is the end result, exactly what I wanted to achieve:

For those struggling to find a solution with dynamic data, when you calculate the domain for the YAxis (here YAxis is the price) (the min and the max value) you can set the baseValue to the max value from the YAxis domain.

[ckifer]

Nice!