[Labels] Apply series property accessors

[silktrader]

Hello and thanks for providing such a crafty library.
I set up layerchart by way of shadcn-svelte and followed the instructions at: https://next.layerchart.com, but I am having an issue customising labels.

Version: "layerchart": "^2.0.0-next.27"

A simple dataset:

	const data = [
		{ macro: 'Proteins', current: 100, target: 200 },
		{ macro: 'Carbs', current: 230, target: 200 }
	];

I would like to display labels only for the "current" keys. And this was my failed attempt:

<BarChart
			{data}
			y="macro"
			axis={false}
			c="macro"
			cDomain={["Proteins", "Carbs"]}
			cRange={["var(--color-macro-proteins)", "var(--color-macro-carbs)"]}
			orientation="horizontal"
						series={[
							{
								key: 'target',
								props: { fillOpacity: 0.2 }
							},
							{
								key: 'current',
								props: { insets: { y: 8 } }
							}
						]}
			renderContext="svg"
		>
			{#snippet labels({ visibleSeries, getLabelsProps })}
				{@const currentSeries = visibleSeries.filter(s => s.key === 'current')}
				{#each currentSeries as s, i}
						<Labels {...getLabelsProps(s, i)} placement="inside" fill="white" class="text-base" />
				{/each}
			{/snippet}

		</BarChart>

The code above yields:

The goal is to elide the 200 in the first bar. Is this my issue or one with the library?

[techniq]

Hey @silktrader 👋. Glad you are enjoying the library.

Labels on bar charts do need some improvements, and looks like in this case we are missing the x or y accessor (depending on horizontal or vertical) on Labels (it's defaulting to the Chart's which is x={['target', 'current']} which is resulting in rendering both labels for each series.

With that said, there are 2 ways this can be accomplished now until the fix is in place (the later probably the best solution even after the fix:

Explicitly pass the single x="current" or x={s.key} accessor

<BarChart ...>
    {#snippet labels({ visibleSeries, getLabelsProps })}
      {@const currentSeries = visibleSeries.filter((s) => s.key === "current")}
      {#each currentSeries as s, i}
        <Labels
          {...getLabelsProps(s, i)}
          x={s.key}
          placement="inside"
          fill="white"
          class="text-base"
        />
      {/each}
    {/snippet}
</BarChart>

or in this case all the series handle is unnecessary and can be explicit

<BarChart ...>
    {#snippet labels()}
      <Labels x="current" placement="inside" fill="white" class="text-base" />
    {/snippet}
</BarChart>

Either way will give you the desired outcome (from my understanding)

slight differences in the display as this is from within the LayerChart docs

This should get you unblocked.

[silktrader]

Thanks for the prompt and exhaustive answer.
Passing the x attribute with a single key does indeed fix the issue, as you elaborated. I would have never found out about the default, unless I looked into the source code attentively.