@rokkit/chart 1.0.0-next.151 → 1.0.0-next.155

package/src/geoms/Arc.svelte

@@ -1,81 +1,126 @@
 <script>
-  import { getContext, onMount, onDestroy } from 'svelte'
-  import { buildArcs } from '../lib/brewing/marks/arcs.js'
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildArcs } from '../lib/brewing/marks/arcs.js'
 
-  /**
-   * `fill` is the primary prop name; `color` is accepted as an alias for
-   * spec-driven usage (Plot.svelte passes `color` to all geoms generically).
-   * @type {{ theta?: string, fill?: string, color?: string, pattern?: string, stat?: string, labelFn?: (data: Record<string, unknown>) => string, options?: { innerRadius?: number } }}
-   */
-  let { theta, fill, color, pattern, labelFn = undefined, stat = 'identity', options = {} } = $props()
+	/**
+	 * `fill` is the primary prop name; `color` is accepted as an alias for
+	 * spec-driven usage (Plot.svelte passes `color` to all geoms generically).
+	 * @type {{ theta?: string, fill?: string, color?: string, pattern?: string, stat?: string, labelFn?: (data: Record<string, unknown>) => string, options?: { innerRadius?: number } }}
+	 */
+	let {
+		theta,
+		fill,
+		color,
+		pattern,
+		labelFn = undefined,
+		stat = 'identity',
+		options = {},
+		onselect = undefined
+	} = $props()
 
-  const fillField = $derived(fill ?? color)
+	const fillField = $derived(fill ?? color)
 
-  const plotState = getContext('plot-state')
-  let id = $state(null)
+	const plotState = getContext('plot-state')
+	let id = $state(null)
 
-  onMount(() => {
-    id = plotState.registerGeom({ type: 'arc', channels: { color: fillField, y: theta, pattern }, stat, options })
-  })
-  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'arc',
+			channels: { color: fillField, y: theta, pattern },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
 
-  $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { color: fillField, y: theta, pattern }, stat })
-  })
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { color: fillField, y: theta, pattern }, stat })
+	})
 
-  const data     = $derived(id ? plotState.geomData(id) : [])
-  const colors   = $derived(plotState.colors)
-  const patterns = $derived(plotState.patterns)
-  const w        = $derived(plotState.innerWidth)
-  const h        = $derived(plotState.innerHeight)
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
+	const w = $derived(plotState.innerWidth)
+	const h = $derived(plotState.innerHeight)
 
-  const arcs = $derived.by(() => {
-    if (!data?.length) return []
-    // Guard: skip until data catches up after a fill-field change.
-    // When fillField changes, the $effect updates the geom asynchronously, but
-    // this derived runs first with stale data whose rows don't have the new
-    // field — causing all keys to be undefined (duplicate key error).
-    if (fillField && !(fillField in data[0])) return []
-    const innerRadius = (options.innerRadius ?? 0) * Math.min(w, h) / 2
-    return buildArcs(data, { color: fillField, y: theta, pattern }, colors, w, h, { innerRadius }, patterns)
-  })
+	const arcs = $derived.by(() => {
+		if (!data?.length) return []
+		// Guard: skip until data catches up after a fill-field change.
+		// When fillField changes, the $effect updates the geom asynchronously, but
+		// this derived runs first with stale data whose rows don't have the new
+		// field — causing all keys to be undefined (duplicate key error).
+		if (fillField && !(fillField in data[0])) return []
+		const innerRadius = ((options.innerRadius ?? 0) * Math.min(w, h)) / 2
+		return buildArcs(
+			data,
+			{ color: fillField, y: theta, pattern },
+			colors,
+			w,
+			h,
+			{ innerRadius },
+			patterns
+		)
+	})
 </script>
 
 {#if arcs.length > 0}
-  <g
-    data-plot-geom="arc"
-    transform="translate({w / 2}, {h / 2})"
-  >
-    {#each arcs as arc (arc.key)}
-      <path
-        d={arc.d}
-        fill={arc.fill}
-        stroke={arc.stroke}
-        stroke-width="1"
-        role="presentation"
-        data-plot-element="arc"
-        onmouseenter={() => plotState.setHovered({ ...arc.data, '%': `${arc.pct}%` })}
-        onmouseleave={() => plotState.clearHovered()}
-      />
-      {#if arc.patternId}
-        <path d={arc.d} fill="url(#{arc.patternId})" stroke={arc.stroke} stroke-width="1" pointer-events="none" data-plot-element="arc" />
-      {/if}
-      {#if arc.pct >= 5}
-        {@const labelText = labelFn ? String(labelFn(arc.data) ?? '') : `${arc.pct}%`}
-        {#if labelText}
-          {@const lw = Math.max(36, labelText.length * 7 + 12)}
-          <g transform="translate({arc.centroid[0]},{arc.centroid[1]})" pointer-events="none" data-plot-element="arc-label">
-            <rect x={-lw / 2} y="-9" width={lw} height="18" rx="4" fill="white" fill-opacity="0.82" />
-            <text
-              text-anchor="middle"
-              dominant-baseline="central"
-              font-size="11"
-              font-weight="600"
-              fill={arc.stroke}
-            >{labelText}</text>
-          </g>
-        {/if}
-      {/if}
-    {/each}
-  </g>
+	<g data-plot-geom="arc" transform="translate({w / 2}, {h / 2})">
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		{#each arcs as arc (arc.key)}
+			<path
+				d={arc.d}
+				fill={arc.fill}
+				stroke={arc.stroke}
+				stroke-width="1"
+				role={onselect ? 'button' : 'presentation'}
+				tabindex={onselect ? 0 : undefined}
+				style:cursor={onselect ? 'pointer' : undefined}
+				data-plot-element="arc"
+				onmouseenter={() => plotState.setHovered({ ...arc.data, '%': `${arc.pct}%` })}
+				onmouseleave={() => plotState.clearHovered()}
+				onclick={onselect ? () => onselect({ ...arc.data, '%': `${arc.pct}%` }) : undefined}
+				onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect({ ...arc.data, '%': `${arc.pct}%` }) : undefined}
+			/>
+			{#if arc.patternId}
+				<path
+					d={arc.d}
+					fill="url(#{arc.patternId})"
+					stroke={arc.stroke}
+					stroke-width="1"
+					pointer-events="none"
+					data-plot-element="arc"
+				/>
+			{/if}
+			{#if arc.pct >= 5}
+				{@const labelText = labelFn ? String(labelFn(arc.data) ?? '') : `${arc.pct}%`}
+				{#if labelText}
+					{@const lw = Math.max(36, labelText.length * 7 + 12)}
+					<g
+						transform="translate({arc.centroid[0]},{arc.centroid[1]})"
+						pointer-events="none"
+						data-plot-element="arc-label"
+					>
+						<rect
+							x={-lw / 2}
+							y="-9"
+							width={lw}
+							height="18"
+							rx="4"
+							fill="white"
+							fill-opacity="0.82"
+						/>
+						<text
+							text-anchor="middle"
+							dominant-baseline="central"
+							font-size="11"
+							font-weight="600"
+							fill={arc.stroke}>{labelText}</text
+						>
+					</g>
+				{/if}
+			{/if}
+		{/each}
+	</g>
 {/if}

package/src/geoms/Area.svelte

@@ -1,50 +1,78 @@
 <script>
-  import { getContext, onMount, onDestroy } from 'svelte'
-  import { buildAreas, buildStackedAreas } from './lib/areas.js'
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildAreas, buildStackedAreas } from './lib/areas.js'
 
-  let { x, y, color, pattern, stat = 'identity', options = {} } = $props()
+	let { x, y, color, pattern, stat = 'identity', options = {} } = $props()
 
-  const plotState = getContext('plot-state')
-  let id = $state(null)
+	const plotState = getContext('plot-state')
+	let id = $state(null)
 
-  onMount(() => {
-    id = plotState.registerGeom({ type: 'area', channels: { x, y, color, pattern }, stat, options: { stack: options?.stack ?? false } })
-  })
-  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'area',
+			channels: { x, y, color, pattern },
+			stat,
+			options: { stack: options?.stack ?? false }
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
 
-  $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color, pattern }, stat, options: { stack: options?.stack ?? false } })
-  })
+	$effect(() => {
+		if (id)
+			plotState.updateGeom(id, {
+				channels: { x, y, color, pattern },
+				stat,
+				options: { stack: options?.stack ?? false }
+			})
+	})
 
-  const data     = $derived(id ? plotState.geomData(id) : [])
-  const xScale   = $derived(plotState.xScale)
-  const yScale   = $derived(plotState.yScale)
-  const colors   = $derived(plotState.colors)
-  const patterns = $derived(plotState.patterns)
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
 
-  const areas = $derived.by(() => {
-    if (!data?.length || !xScale || !yScale) return []
-    const channels = { x, y, color, pattern }
-    if (options.stack) {
-      return buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
-    }
-    return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
-  })
+	const areas = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const channels = { x, y, color, pattern }
+		if (options.stack) {
+			return buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+		}
+		return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+	})
 </script>
 
 {#if areas.length > 0}
-  <g data-plot-geom="area">
-    {#each areas as seg (seg.key ?? seg.d)}
-      <path
-        d={seg.d}
-        fill={seg.fill}
-        fill-opacity={seg.patternId ? 1 : (options.opacity ?? 0.6)}
-        stroke={seg.stroke ?? 'none'}
-        data-plot-element="area"
-      />
-      {#if seg.patternId}
-        <path d={seg.d} fill="url(#{seg.patternId})" data-plot-element="area" />
-      {/if}
-    {/each}
-  </g>
+	<g data-plot-geom="area">
+		{#each areas as seg (seg.key ?? seg.d)}
+			<path
+				d={seg.d}
+				fill={seg.fill}
+				fill-opacity={seg.patternId ? 1 : (options.opacity ?? plotState.chartPreset.opacity.area)}
+				stroke={seg.stroke ?? 'none'}
+				data-plot-element="area"
+			/>
+			{#if seg.patternId}
+				<path d={seg.d} fill="url(#{seg.patternId})" data-plot-element="area" />
+			{/if}
+		{/each}
+		<!-- Invisible hit circles for tooltip: one per data point -->
+		{#each data as d, i (`hover::${i}`)}
+			{@const px = typeof xScale?.bandwidth === 'function' ? (xScale(d[x]) ?? 0) + xScale.bandwidth() / 2 : (xScale?.(d[x]) ?? 0)}
+			{@const py = yScale?.(d[y]) ?? 0}
+			<circle
+				cx={px}
+				cy={py}
+				r="8"
+				fill="transparent"
+				stroke="none"
+				role="presentation"
+				data-plot-element="area-hover"
+				onmouseenter={() => plotState.setHovered(d)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+		{/each}
+	</g>
 {/if}

package/src/geoms/Bar.svelte

@@ -1,142 +1,200 @@
 <script>
-  import { getContext, onMount, onDestroy } from 'svelte'
-  import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
-  import LabelPill from './LabelPill.svelte'
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
+	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import LabelPill from './LabelPill.svelte'
 
-  let { x, y, color, fill: fillProp, pattern, label = false, stat = 'identity', options = {}, filterable = false } = $props()
+	let {
+		x,
+		y,
+		color,
+		fill: fillProp,
+		pattern,
+		label = false,
+		stat = 'identity',
+		options = {},
+		filterable = false,
+		onselect = undefined,
+		keyboard = false
+	} = $props()
 
-  // `fill` is accepted as an alias for `color` (consistent with Arc.svelte)
-  const colorChannel = $derived(fillProp ?? color)
+	// `fill` is accepted as an alias for `color` (consistent with Arc.svelte)
+	const colorChannel = $derived(fillProp ?? color)
 
-  /**
-   * @param {Record<string, unknown>} data
-   * @param {string} defaultField
-   * @returns {string | null}
-   */
-  function resolveLabel(data, defaultField) {
-    if (!label) return null
-    if (label === true) return String(data[defaultField] ?? '')
-    if (typeof label === 'function') return String(label(data) ?? '')
-    if (typeof label === 'string') return String(data[label] ?? '')
-    return null
-  }
+	/**
+	 * @param {Record<string, unknown>} data
+	 * @param {string} defaultField
+	 * @returns {string | null}
+	 */
+	function resolveLabel(data, defaultField) {
+		if (!label) return null
+		if (label === true) return String(data[defaultField] ?? '')
+		if (typeof label === 'function') return String(label(data) ?? '')
+		if (typeof label === 'string') return String(data[label] ?? '')
+		return null
+	}
 
-  const plotState = getContext('plot-state')
-  const cf = getContext('crossfilter')
-  let id = $state(null)
+	/**
+	 * Pick white or dark text based on perceived luminance of a hex fill color.
+	 * @param {string | undefined} hex
+	 * @returns {string}
+	 */
+	function contrastColor(hex) {
+		if (!hex || !hex.startsWith('#') || hex.length < 7) return 'white'
+		const r = parseInt(hex.slice(1, 3), 16) / 255
+		const g = parseInt(hex.slice(3, 5), 16) / 255
+		const b = parseInt(hex.slice(5, 7), 16) / 255
+		return 0.299 * r + 0.587 * g + 0.114 * b > 0.55 ? '#333' : 'white'
+	}
 
-  onMount(() => {
-    id = plotState.registerGeom({ type: 'bar', channels: { x, y, color: colorChannel, pattern }, stat, options: { stack: options?.stack ?? false } })
-  })
-  onDestroy(() => {
-    if (id) plotState.unregisterGeom(id)
-  })
+	const plotState = getContext('plot-state')
+	const cf = getContext('crossfilter')
+	let id = $state(null)
 
-  $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color: colorChannel, pattern }, stat, options: { stack: options?.stack ?? false } })
-  })
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'bar',
+			channels: { x, y, color: colorChannel, pattern },
+			stat,
+			options: { stack: options?.stack ?? false }
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
 
-  const data        = $derived(id ? plotState.geomData(id) : [])
-  const xScale      = $derived(plotState.xScale)
-  const yScale      = $derived(plotState.yScale)
-  const colors      = $derived(plotState.colors)
-  const patterns    = $derived(plotState.patterns)
-  const orientation = $derived(plotState.orientation)
-  const innerHeight = $derived(plotState.innerHeight)
+	$effect(() => {
+		if (id)
+			plotState.updateGeom(id, {
+				channels: { x, y, color: colorChannel, pattern },
+				stat,
+				options: { stack: options?.stack ?? false }
+			})
+	})
 
-  const bars = $derived.by(() => {
-    if (!data?.length || !xScale || !yScale) return []
-    const channels = { x, y, color: colorChannel, pattern }
-    if (orientation === 'horizontal') {
-      return buildHorizontalBars(data, channels, xScale, yScale, colors, innerHeight)
-    }
-    if (options.stack) {
-      return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
-    }
-    return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
-  })
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
+	const effectiveOrientation = $derived(options.orientation ?? plotState.orientation)
+	const innerHeight = $derived(plotState.innerHeight)
 
-  /** @type {Record<string, boolean>} */
-  let dimmedByKey = $state({})
+	const bars = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const channels = { x, y, color: colorChannel, pattern }
+		if (effectiveOrientation === 'horizontal') {
+			return buildHorizontalBars(data, channels, xScale, yScale, colors, innerHeight)
+		}
+		if (options.stack) {
+			return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+		}
+		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+	})
 
-  $effect(() => {
-    if (!cf) { dimmedByKey = {}; return }
-    // cf.version is a $state counter that increments on every filter mutation.
-    // Reading it here establishes a reactive dependency so the effect re-runs
-    // whenever any filter changes — including changes from sibling FilterBars.
-    void cf.version
-    const next = /** @type {Record<string, boolean>} */ ({})
-    for (const bar of bars) {
-      const dimmedByX = x ? cf.isDimmed(x, bar.data[x]) : false
-      const dimmedByY = y ? cf.isDimmed(y, bar.data[y]) : false
-      next[bar.key] = dimmedByX || dimmedByY
-    }
-    dimmedByKey = next
-  })
+	/** @type {Record<string, boolean>} */
+	let dimmedByKey = $state({})
 
-  function handleBarClick(barX) {
-    if (!filterable || !x || !cf) return
-    cf.toggleCategorical(x, barX)
-  }
+	$effect(() => {
+		if (!cf) {
+			dimmedByKey = {}
+			return
+		}
+		// cf.version is a $state counter that increments on every filter mutation.
+		// Reading it here establishes a reactive dependency so the effect re-runs
+		// whenever any filter changes — including changes from sibling FilterBars.
+		void cf.version
+		const next = /** @type {Record<string, boolean>} */ ({})
+		for (const bar of bars) {
+			const dimmedByX = x ? cf.isDimmed(x, bar.data[x]) : false
+			const dimmedByY = y ? cf.isDimmed(y, bar.data[y]) : false
+			next[bar.key] = dimmedByX || dimmedByY
+		}
+		dimmedByKey = next
+	})
+
+	function handleBarClick(barX) {
+		if (!filterable || !x || !cf) return
+		cf.toggleCategorical(x, barX)
+	}
 </script>
 
 {#if bars.length > 0}
-  <g data-plot-geom="bar">
-    {#each bars as bar (bar.key)}
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-      <rect
-        x={bar.x}
-        y={bar.y}
-        width={Math.max(0, bar.width)}
-        height={Math.max(0, bar.height)}
-        fill={bar.fill}
-        stroke={bar.stroke ?? 'none'}
-        stroke-width={bar.stroke ? 0.5 : 0}
-        data-plot-element="bar"
-        data-plot-value={bar.data[y]}
-        data-plot-category={bar.data[x]}
-        data-dimmed={dimmedByKey[bar.key] ? true : undefined}
-        style:cursor={filterable ? 'pointer' : undefined}
-        onclick={filterable && x ? () => handleBarClick(bar.data[x]) : undefined}
-        onkeydown={filterable && x ? (e) => (e.key === 'Enter' || e.key === ' ') && handleBarClick(bar.data[x]) : undefined}
-        role={filterable ? 'button' : 'graphics-symbol'}
-        tabindex={filterable ? 0 : undefined}
-        aria-label="{bar.data[x]}: {bar.data[y]}"
-        onmouseenter={() => plotState.setHovered(bar.data)}
-        onmouseleave={() => plotState.clearHovered()}
-      >
-        <title>{bar.data[x]}: {bar.data[y]}</title>
-      </rect>
-      {#if bar.patternId}
-        <rect
-          x={bar.x}
-          y={bar.y}
-          width={Math.max(0, bar.width)}
-          height={Math.max(0, bar.height)}
-          fill="url(#{bar.patternId})"
-          pointer-events="none"
-        />
-      {/if}
-      {#if label}
-        {@const text = resolveLabel(bar.data, orientation === 'horizontal' ? x : y)}
-        {#if text}
-          {#if orientation === 'horizontal'}
-            <LabelPill
-              x={bar.x + bar.width + (options.labelOffset ?? 8)}
-              y={bar.y + bar.height / 2}
-              {text}
-              color={bar.stroke ?? '#333'}
-            />
-          {:else}
-            <LabelPill
-              x={bar.x + bar.width / 2}
-              y={bar.y + (options.labelOffset ?? -8)}
-              {text}
-              color={bar.stroke ?? '#333'}
-            />
-          {/if}
-        {/if}
-      {/if}
-    {/each}
-  </g>
+	<g data-plot-geom="bar">
+		{#each bars as bar (bar.key)}
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<rect
+				x={bar.x}
+				y={bar.y}
+				width={Math.max(0, bar.width)}
+				height={Math.max(0, bar.height)}
+				fill={bar.fill}
+				stroke={bar.stroke ?? 'none'}
+				stroke-width={bar.stroke ? 0.5 : 0}
+				data-plot-element="bar"
+				data-plot-value={bar.data[y]}
+				data-plot-category={bar.data[x]}
+				data-dimmed={dimmedByKey[bar.key] ? true : undefined}
+				style:cursor={filterable || onselect ? 'pointer' : undefined}
+				onclick={filterable && x ? () => { handleBarClick(bar.data[x]); onselect?.(bar.data) } : onselect ? () => onselect(bar.data) : undefined}
+				onkeydown={filterable && x
+					? (e) => (e.key === 'Enter' || e.key === ' ') && handleBarClick(bar.data[x])
+					: onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(bar.data) : undefined}
+				role={filterable || onselect || keyboard ? 'button' : 'graphics-symbol'}
+				tabindex={filterable || onselect || keyboard ? 0 : undefined}
+				use:keyboardNav={keyboard}
+				aria-label="{bar.data[x]}: {bar.data[y]}"
+				onmouseenter={() => plotState.setHovered(bar.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			>
+				<title>{bar.data[x]}: {bar.data[y]}</title>
+			</rect>
+			{#if bar.patternId}
+				<rect
+					x={bar.x}
+					y={bar.y}
+					width={Math.max(0, bar.width)}
+					height={Math.max(0, bar.height)}
+					fill="url(#{bar.patternId})"
+					pointer-events="none"
+				/>
+			{/if}
+			{#if label}
+				{@const text = resolveLabel(bar.data, effectiveOrientation === 'horizontal' ? x : y)}
+				{#if text}
+					{#if effectiveOrientation === 'horizontal'}
+						{#if options.labelInside}
+							{@const estimatedWidth = text.length * 7 + 16}
+							{@const fitsInside = bar.width >= estimatedWidth}
+							<text
+								x={fitsInside ? bar.x + bar.width - 8 : bar.x + bar.width + 6}
+								y={bar.y + bar.height / 2}
+								dominant-baseline="central"
+								text-anchor={fitsInside ? 'end' : 'start'}
+								font-size="11"
+								font-weight="600"
+								fill={fitsInside ? contrastColor(bar.fill) : (bar.stroke ?? '#555')}
+								pointer-events="none"
+								data-plot-element="label"
+							>{text}</text>
+						{:else}
+							<LabelPill
+								x={bar.x + bar.width + (options.labelOffset ?? 8)}
+								y={bar.y + bar.height / 2}
+								{text}
+								color={bar.stroke ?? '#333'}
+							/>
+						{/if}
+					{:else}
+						<LabelPill
+							x={bar.x + bar.width / 2}
+							y={bar.y + (options.labelOffset ?? -8)}
+							{text}
+							color={bar.stroke ?? '#333'}
+						/>
+					{/if}
+				{/if}
+			{/if}
+		{/each}
+	</g>
 {/if}