LinePath + AreaClosed - resolve conflict

[moon-sam]

Hi, I'm trying to follow the suggestion in #1399 (comment) to get an area chart with only stroke on the top.

When I add the line path element (above or below AreaClosed) the AreaClosed seems to break.

Any suggestions? New user here!

https://codesandbox.io/s/wonderful-archimedes-48fbr?file=/Example.tsx

(if the code doesn't load, all I did was fork the AreaClosed example, and add LinePath in addition to AreaClosed like so:)

import { AreaClosed, LinePath, Line, Bar } from "@visx/shape";

...
         />
          <AreaClosed<AppleStock>
            data={stock}
            x={(d) => dateScale(getDate(d)) ?? 0}
            y={(d) => stockValueScale(getStockValue(d)) ?? 0}
            yScale={stockValueScale}
            strokeWidth={1}
            stroke="url(#area-gradient)"
            fill="url(#area-gradient)"
            curve={curveMonotoneX}
          />
          <LinePath<AppleStock>
            data={stock}
            x={(d) => dateScale(getDate(d)) ?? 0}
            y={(d) => stockValueScale(getStockValue(d)) ?? 0}
            strokeWidth={1}
            stroke="url(#area-gradient)"
            fill="url(#area-gradient)"
            curve={curveMonotoneX}
          />
          <Bar
...

[hshoff]

HI @moon-sam, just need to remove the fill on the <LinePath />:

          <AreaClosed<AppleStock>
            data={stock}
            x={(d) => dateScale(getDate(d)) ?? 0}
            y={(d) => stockValueScale(getStockValue(d)) ?? 0}
            yScale={stockValueScale}
            fill="url(#area-gradient)"
            curve={curveMonotoneX}
          />
          <LinePath<AppleStock>
            data={stock}
            x={(d) => dateScale(getDate(d)) ?? 0}
            y={(d) => stockValueScale(getStockValue(d)) ?? 0}
            strokeWidth={3}
            stroke="blue"
            curve={curveMonotoneX}
          />

https://codesandbox.io/s/async-sun-hsmsv?file=/Example.tsx:4306-4899

[moon-sam]

Thank you for the speedy reply =)