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