How to make a LinePath with a fill that starts at a specific number or domain min?

[MarkLyck]

I'm trying to make a chart with a Gradient fill using visx, but I can't find any documentation on how to make the fill start from another point than the start value.

In this case I want it to start at the bottom of the graph 76 y value.

But how? Does anyone have an example of this?

This is my LinePath that draws the gradient:

<LinearGradient
            id="background-gradient"
            from={colors.darkAccent}
            to={colors.black}
          />
<LinePath<DataPoint>
            data={data}
            x={(d) => xScale(x(d)) ?? 0}
            y={(d) => yScale(y(d)) ?? 0}
            fill="url('#background-gradient')"
            curve={curveNatural}
          />

my yScale:

  const yScale = scaleLinear({
    range: [innerHeight, 0],
    domain: [yMin, yMax],
    nice: true,
  })

[williaster]

Hey @MarkLyck thanks for checking out visx. For gradients, I don't think that fill for LinePaths is reliable as it likely depends heavily on the shape of the line as you are observing.

To get the behavior you want I think you probably should use a LinePath without a fill for the line, and then use an AreaClosed component to implement the fill – d3 calculates this exact shape but draws it explicitly as a closed shape using whatever baseline you want (76 in your case, 0 in this example) which makes its behavior more deterministic

https://airbnb.io/visx/areas

Hope that helps!

[MarkLyck]

I ended up switching to visx XYChart instead where this was much easier to figure out, since my chart needs are pretty simple.

But I believe this is correct and would have solved my problem 👍 if we ever decide to go back to base visx components I'll keep this in mind.

Thank you!