How to add custom labels in bar chart?

[Fedex75]

I have this "duration" style BarChart

<BarChart
	data={currentContractsChartData}
	x={['startDate', 'endDate']}
	xScale={scaleTime()}
	y="name"
	grid={{ x: false, y: true, bandAlign: 'between' }}
	orientation="horizontal"
	padding={{ left: 12, bottom: 36 }}
/>

and i would like to add custom labels inside the bars but i'm not sure how to do that. Thanks in advance

[techniq]

Hey @Fedex75 👋

You can leverage the aboveMarks snippet to add these labels

<BarChart ...>
  {#snippet aboveMarks({ context })}
  	{#each data as d}
  		{#each ['startDate', 'endDate'] as prop}
  			{@const value = d[prop]}
  			<Text
  				value={format(value, 'day', { variant: 'short' })}
  				x={context.xScale(value) + (prop === 'start' ? 4 : -4)}
  				y={context.yScale(d.name) + context.yScale.bandwidth!() / 2}
  				textAnchor={prop === 'startDate' ? 'start' : 'end'}
  				verticalAnchor="middle"
  				class="text-black text-sm"
  			/>
  		{/each}
  	{/each}
  {/snippet}
</BarChart>

Stackblitz example

BarChart also has <BarChart labels> to simplify this use case (and was going to be my recommendation)...

<BarChart
  labels={{
    placement: 'inside',
    fill: 'black'
  }}
/>

but it looks like we need to be be smarter with array accessors (x={['startDate', 'endDate']}), placement, and text anchoring (start/end)

[Fedex75]

Thank you very much, it works like a charm.