Area Chart with stackDiverging option has incorrect highlight data/value

[theyosh]

Hi,

I am creating some network speed graphs which use the stackDiverging option. Based on this example: https://next.layerchart.com/docs/components/AreaChart#stack_series_(diverging)

And when I look at that example, and hover over the graph, the diverged serie has incorrect highlight line and points. They are at the zero value. While the value in the popup is correct (negative).

I would expect that in this setup, that the highlight line and points do follow the negative value. And not staying at zero.

Also in my test example you can see this effect:

The green line is following the normal values. The red line stays at zero. I would expect that it should follow the negative values of the diverged serie.

Or am I misunderstanding this?

[techniq]

hey @theyosh 👋. This is an issue I need to resolve, but for a quick solution, you can override the marks and highlight snippets to fix the display:

Check out this REPL

[theyosh]

I came up with the following due to gradient fill

<AreaChart
	{data}
	x="date"
	series={[
		{
			key: 'recv',
			color: 'var(--color-green-500)'
		},
		{ key: 'sent', color: 'var(--color-red-400)', value: (d) => -d.sent }
	]}
	seriesLayout="stackDiverging"
	renderContext="svg"
	legend={{ title: 'Network traffic last 60 seconds', placement: 'top' }}
      padding={{ left: 40, top: 40, bottom: 10, right: 10 }}
>
	{#snippet axis()}
		<Axis
			placement="left"
			grid
			rule
			format={(value: number) => getReadableFileSizeString(value >= 0 ? value : -value)}
		/>
		<Axis placement="bottom" rule grid format={(value: Date) => dateFormatter.format(value)} />
	{/snippet}

	{#snippet marks({ series, getAreaProps })}
		{#each series as s, i (s.key)}
			{@const stops =
				s.key === 'recv'
					? [s.color, 'color-mix(in lch, ' + s.color + ' 10%, transparent)']
					: ['color-mix(in lch, ' + s.color + ' 10%, transparent)', s.color]}

			<LinearGradient {stops} vertical>
				{#snippet children({ gradient })}
					{#if s.key === 'recv'}
						<Area {...getAreaProps(s, i)} fill={gradient} y0={(d) => 0} y1={(d) => d.recv} />
					{:else}
						<Area {...getAreaProps(s, i)} fill={gradient} y0={(d) => 0} y1={(d) => -d.sent} />
					{/if}
				{/snippet}
			</LinearGradient>
		{/each}
	{/snippet}

	{#snippet highlight({ series })}
		<Highlight y="recv" points={{ fill: series[0].color }} />
		<Highlight y={(d) => -d.sent} points={{ fill: series[1].color }} lines />
	{/snippet}

	{#snippet tooltip({ series })}
		<Tooltip.Root x="pointer" y="pointer">
			{#snippet children({ data })}
				<Tooltip.Header value={dateFormatter.format(new Date(data.date))} />
				<Tooltip.List>
					{#each series as s}
						<Tooltip.Item label={s.key} color={s.color} value={getReadableFileSizeString(data[s.key])} />
					{/each}
				</Tooltip.List>
			{/snippet}
		</Tooltip.Root>
	{/snippet}
</AreaChart>

But when the highlight fix is there, I can remove the highlight snippet above.

[techniq]

In an upcoming release, this is now handled properly with:

<AreaChart
	{data}
	x="date"
	series={[
		{ key: 'apples', value: (d) => -d.apples, color: 'var(--color-apples)' },
		{
			key: 'bananas',
			color: 'var(--color-bananas)'
		},
		{
			key: 'oranges',
			color: 'var(--color-oranges)'
		}
	]}
	seriesLayout="stackDiverging"
	padding={defaultChartPadding({ right: 10 })}
	height={300}
/>

https://techniq-state-refactor.layerchart.pages.dev/docs/components/AreaChart/series-stack-diverging