@visx/area graph has stroke on the borders of the graph

[chanzer0]

Hi, I'd like to add this stroke to the graph as shown, but it is stroking the sides and bottom of the graph which is unintended. Is there something wrong with my data or is there some prop I can pass in to specify this behavior not to occur? Thanks.

const dateScale = useMemo(
	() =>
		scaleTime({
			range: [margin.left + 10, innerWidth + margin.left],
			domain: extent(marketCapStats, getDate) as [Date, Date],
		}),
	[innerWidth, margin.left, marketCapStats],
);
const marketCapValueScale = useMemo(
	() =>
		scaleLinear({
			range: [innerHeight + margin.top, margin.top],
			domain: [
				0,
				(max(marketCapStats, getMarketCap) || 0) +
					innerHeight / 3,
			],
			nice: true,
		}),
	[margin.top, innerHeight, marketCapStats],
);
...
<LinearGradient
	id="bg-gradient"
	from={GRADIENTS.SUNRISE.FROM}
	to={GRADIENTS.SUNRISE.TO}
	toOpacity={0.7}
	toOffset={100}
/>
<LinearGradient
	id="stroke-gradient"
	from={GRADIENTS.GOLD.FROM}
	to={GRADIENTS.GOLD.TO}
	vertical={false}
	toOpacity={1}
/>
<AreaClosed<ProjectRankStat>
	data={marketCapStats}
	x={(data) => dateScale(getDate(data)) ?? 0}
	y={(data) =>
		marketCapValueScale(getMarketCap(data)) ?? 0
	}
	yScale={marketCapValueScale}
	strokeWidth={4}
	stroke="url(#stroke-gradient)"
	fill="url(#bg-gradient)"
	curve={curveMonotoneX}
/>

[williaster]

Hi @chanzer0 👋 thanks for checking out visx. this is a usage question so moving it to discussion not an issue.

this outline is a consequence of how path borders work. you can remove it entirely by setting strokeWidth={0}/stroke="transparent". alternatively if you only want to render a border on one side of the area, you need to also render a LinePath from @visx/shape – see this for an example https://airbnb.io/visx/glyphs

[chanzer0]

Thanks for the response! To remedy this, I ended up switching to a @visx/threshold model, and drawing a LinePath for my stroke -- outlining my solution below incase anyone else finds this useful

<LinearGradient
	id="bg-gradient"
	from={GRADIENTS.SUNRISE.FROM}
	to={GRADIENTS.SUNRISE.TO}
	toOpacity={0.7}
	toOffset={100}
/>
...
<Threshold<ProjectRankStat>
	id={`${Math.random()}`}
	data={marketCapStats}
	x={(data) => dateScale(getDate(data)) ?? 0}
	y0={(data) =>
		marketCapValueScale(getMarketCap(data)) ?? 0
	}
	y1={200}
	clipAboveTo={0}
	clipBelowTo={innerHeight}
	curve={curveMonotoneX}
	belowAreaProps={{
		fill: 'none',
	}}
	aboveAreaProps={{
		fill: 'url(#bg-gradient)',
	}}
/>
<LinePath
	data={marketCapStats}
	curve={curveMonotoneX}
	x={(data) => dateScale(getDate(data)) ?? 0}
	y={(data) =>
		marketCapValueScale(getMarketCap(data)) ?? 0
	}
	stroke="url(#stroke-gradient)"
	strokeWidth={4}
	strokeOpacity={1}
/>
<LinePath
	data={marketCapStats.map((mcs) => ({
		...mcs,
		marketCap: 0,
	}))}
	curve={curveMonotoneX}
	x={(data) => dateScale(getDate(data)) ?? 0}
	y={(data) =>
		marketCapValueScale(getMarketCap(data)) ?? 0
	}
	stroke="none"
	strokeWidth={0}
/>