@rokkit/chart 1.3.7 → 1.3.9

package/dist/PlotState.svelte.js

@@ -17,6 +17,9 @@ import { assignSymbols } from './lib/brewing/marks/points.js'
 
 let nextId = 0
 
+// Geoms that treat the x channel as categorical (band scale), even for numeric x.
+const CATEGORICAL_X = new Set(['bar', 'box', 'violin', 'jitter'])
+
 export class PlotState {
 	#data = $state([])
 	#rawData = $state([])
@@ -43,6 +46,13 @@ export class PlotState {
 	#onselect = $state(undefined)
 	#selectable = $state(false)
 	#orientationOverride = $state(undefined)
+	// When true, the category (x) axis is a CONTINUOUS position scale (kept linear, not
+	// band-forced) — e.g. AnimatedPlot's bar-chart race, whose tweened `_rank` must position
+	// smoothly. It still flips like any category-x chart; buildBars uses continuous positioning.
+	#continuousCategory = $state(false)
+	// Order the category (band) axis by aggregated value instead of by label: 'desc' | 'asc'.
+	// Sorts bars by size (histogram-style); undefined keeps data/label order.
+	#sort = $state(undefined)
 
 	axisOrigin = $state([undefined, undefined])
 	#axisOffset = $state(0)
@@ -53,29 +63,78 @@ export class PlotState {
 	#innerWidth = $derived(this.#width - this.#effectiveMargin.left - this.#effectiveMargin.right)
 	#innerHeight = $derived(this.#height - this.#effectiveMargin.top - this.#effectiveMargin.bottom)
 
-	// Effective channels: prefer top-level channels; fall back to first geom's channels
-	// for the declarative API where no spec is provided.
+	// Effective channels: prefer top-level channels PER FIELD, falling back to the
+	// first geom's channels. Merged per-field (not all-or-nothing) so a composable
+	// <Plot.Root x y> that omits `color` still picks up a geom's color channel
+	// (e.g. <Plot.Box color=x>) — otherwise `colors` has no per-category entries and
+	// every mark falls back to gray.
 	#mergeGeomChannels(tc, geom) {
 		return {
 			x: tc.x ?? geom.channels?.x,
 			y: tc.y ?? geom.channels?.y,
 			color: tc.color ?? geom.channels?.color,
+			fill: tc.fill ?? geom.channels?.fill,
 			pattern: tc.pattern ?? geom.channels?.pattern,
 			symbol: tc.symbol ?? geom.channels?.symbol
 		}
 	}
 
+	// Field names feeding the shared categorical color scale: the `color` AND `fill` channels,
+	// from the top-level channels and EVERY geom (union, de-duped, order-preserving). Literal
+	// CSS colors are excluded. One palette/legend spans both aesthetics — the "shared scale"
+	// model (see docs/backlog/2026-08-17-chart-aesthetics-unification.md §2).
+	#sharedColorValues() {
+		const fields = []
+		const addField = (f) => {
+			if (f && !isLiteralColor(f) && !fields.includes(f)) fields.push(f)
+		}
+		addField(this.#channels.color)
+		addField(this.#channels.fill)
+		for (const g of this.#geoms) {
+			addField(g.channels?.color)
+			addField(g.channels?.fill)
+		}
+		const seen = new Set()
+		const values = []
+		for (const f of fields) {
+			for (const v of distinct(this.#data, f)) {
+				if (!seen.has(v)) {
+					seen.add(v)
+					values.push(v)
+				}
+			}
+		}
+		return values
+	}
+
 	#effectiveChannels = $derived.by(() => {
 		const tc = this.#channels
-		if (tc.x && tc.y) return tc
 		const firstGeom = this.#geoms[0]
 		if (!firstGeom) return tc
 		return this.#mergeGeomChannels(tc, firstGeom)
 	})
 
 	#resolveXType(rawXType, yType) {
-		const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
-		return hasBarGeom && rawXType === 'continuous' && yType === 'continuous' ? 'band' : rawXType
+		const hasBandGeom = this.#geoms.some((g) => CATEGORICAL_X.has(g.type))
+		return hasBandGeom && rawXType === 'continuous' && yType === 'continuous' ? 'band' : rawXType
+	}
+
+	// Category order sorted by aggregated value (sum of the value channel per category).
+	// Drives "sort bars by size" for the band axis + its ticks. Returns null when not sorting.
+	#sortedBandDomain(datasets) {
+		if (!this.#sort) return null
+		const xf = this.#effectiveChannels.x
+		const yf = this.#effectiveChannels.y
+		if (!xf || !yf) return null
+		const totals = new Map()
+		for (const ds of datasets) {
+			for (const d of ds) {
+				const key = d[xf]
+				totals.set(key, (totals.get(key) ?? 0) + (Number(d[yf]) || 0))
+			}
+		}
+		const dir = this.#sort === 'asc' ? 1 : -1
+		return [...totals.keys()].sort((a, b) => dir * ((totals.get(a) ?? 0) - (totals.get(b) ?? 0)))
 	}
 
 	orientation = $derived.by(() => {
@@ -89,6 +148,24 @@ export class PlotState {
 		return inferOrientation(this.#resolveXType(rawXType, yType), yType)
 	})
 
+	// True when the x-channel is the categorical (band) axis — a string category, or a numeric
+	// category a bar/box/violin/jitter geom bands (incl. a race's rank via continuousCategory).
+	// Only such charts flip; a plain scatter (both continuous, no banding geom) is false → the
+	// orientation is a no-op for the scales.
+	#bandIsX = $derived.by(() => {
+		const x = this.#effectiveChannels.x
+		const y = this.#effectiveChannels.y
+		if (!x || !y) return false
+		// Resolved type: a bar/box/violin/jitter geom bands a numeric x (e.g. year, week),
+		// so those NUMERIC categories are flippable too — not just string categories.
+		return this.#resolveXType(inferFieldType(this.#data, x), inferFieldType(this.#data, y)) === 'band'
+	})
+
+	// Flip = render a category-on-x chart horizontally: the category (x) axis stands up on the
+	// vertical screen and the value (y) axis runs along the horizontal screen. x/y channels are
+	// unchanged — only the screen mapping rotates.
+	#flipped = $derived(this.orientation === 'horizontal' && this.#bandIsX)
+
 	colorScaleType = $derived.by(() => {
 		const field = this.#effectiveChannels.color
 		if (!field) return 'categorical'
@@ -118,15 +195,30 @@ export class PlotState {
 		if (!field) return null
 		const datasets =
 			this.#geoms.length > 0 ? this.#geoms.map((g) => this.geomData(g.id)) : [this.#rawData]
-		const includeZero = this.orientation === 'horizontal'
-		// For vertical bar charts, force scaleBand even when X values are numeric (e.g. year).
-		// Horizontal bar charts keep X as a continuous value axis.
-		const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
-		const bandX = hasBarGeom && this.orientation !== 'horizontal'
+		// includeZero applies to the VALUE axis. When flipped, x is the category axis, not
+		// the value axis, so it must NOT include zero.
+		const includeZero = this.orientation === 'horizontal' && !this.#flipped
+		// Force scaleBand when x is the categorical axis (incl. flipped, where numeric categories
+		// must stay a band). Exception: a CONTINUOUS category axis (a bar race's tweened rank) is
+		// kept LINEAR so fractional positions tween smoothly — buildBars positions it directly.
+		const hasBandGeom = this.#geoms.some((g) => CATEGORICAL_X.has(g.type))
+		const bandX =
+			hasBandGeom &&
+			!this.#continuousCategory &&
+			(this.orientation !== 'horizontal' || this.#flipped)
+		// Flip: the category (x) axis stands up on the vertical screen → range over height.
+		const range = this.#flipped ? [this.#innerHeight, 0] : undefined
+		// Sort the band domain by aggregated value when requested (bars by size); an explicit
+		// xDomain override wins.
+		const domain = this.#xDomain ?? (bandX ? this.#sortedBandDomain(datasets) : null) ?? undefined
 		const base = buildUnifiedXScale(datasets, field, this.#innerWidth, {
-			domain: this.#xDomain,
+			domain,
 			includeZero,
-			band: bandX
+			band: bandX,
+			range,
+			// A continuous category axis (bar-race rank) uses a deliberately padded domain —
+			// don't nice() it back to whole numbers.
+			nice: !this.#continuousCategory
 		})
 		return this.#zoomTransform && typeof base?.bandwidth !== 'function'
 			? this.#zoomTransform.rescaleX(base)
@@ -139,15 +231,20 @@ export class PlotState {
 		if (!boxGeom) return null
 		const boxData = this.geomData(boxGeom.id)
 		const isValid = (v) => v !== null && v !== undefined && !isNaN(v)
-		const mins = boxData.map((d) => d.iqr_min).filter(isValid)
-		const maxs = boxData.map((d) => d.iqr_max).filter(isValid)
+		const flatOutliers = boxData.flatMap((d) => d.outliers ?? []).filter(isValid)
+		const mins = [...boxData.map((d) => d.iqr_min).filter(isValid), ...flatOutliers]
+		const maxs = [...boxData.map((d) => d.iqr_max).filter(isValid), ...flatOutliers]
 		return mins.length > 0 && maxs.length > 0 ? [Math.min(...mins), Math.max(...maxs)] : null
 	}
 
 	// For stacked bars, compute y domain from per-x column totals.
 	#resolveStackDomain(field) {
-		const stackGeom = this.#geoms.find((g) => g.options?.stack)
+		const stackGeom = this.#geoms.find(
+			(g) => g.options?.stack || g.options?.position === 'stack' || g.options?.position === 'fill'
+		)
 		if (!stackGeom) return null
+		// position='fill' normalizes each column to 100% → the value domain is [0,1].
+		if (stackGeom.options?.position === 'fill') return [0, 1]
 		const xField = this.#effectiveChannels.x
 		const stackData = this.geomData(stackGeom.id)
 		if (!xField || stackData.length === 0) return null
@@ -157,8 +254,13 @@ export class PlotState {
 		const colorField = isLiteralColor(this.#effectiveChannels.color)
 			? null
 			: this.#effectiveChannels.color
+		const fillField = isLiteralColor(this.#effectiveChannels.fill)
+			? null
+			: this.#effectiveChannels.fill
 		const patternField = this.#effectiveChannels.pattern
-		const stackField = [colorField, patternField].find((f) => f && f !== xField) ?? colorField
+		// Mirror buildStackedBars/subBandFields (group=fill first, then color, then pattern).
+		const stackField =
+			[fillField, colorField, patternField].find((f) => f && f !== xField) ?? (fillField ?? colorField)
 		const lookup = new SvelteMap()
 		for (const d of stackData) {
 			const xVal = d[xField]
@@ -181,9 +283,13 @@ export class PlotState {
 		if (!field) return null
 		const datasets =
 			this.#geoms.length > 0 ? this.#geoms.map((g) => this.geomData(g.id)) : [this.#rawData]
-		const includeZero = this.orientation === 'vertical'
+		// includeZero applies to the VALUE axis: vertical charts (value on y) and flipped
+		// charts (value still y, but now the horizontal screen axis) both want a 0 baseline.
+		const includeZero = this.orientation === 'vertical' || this.#flipped
 		const yDomain = this.#yDomain ?? this.#resolveBoxDomain() ?? this.#resolveStackDomain(field)
-		const base = buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero })
+		// Flip: the value (y) axis runs along the horizontal screen → range over width.
+		const range = this.#flipped ? [0, this.#innerWidth] : undefined
+		const base = buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero, range })
 		return this.#zoomTransform ? this.#zoomTransform.rescaleY(base) : base
 	})
 
@@ -200,7 +306,7 @@ export class PlotState {
 			const literal = new Map([[null, { fill: field, stroke: field }]])
 			return literal
 		}
-		const values = this.#colorDomain ?? distinct(this.#data, field)
+		const values = this.#colorDomain ?? this.#sharedColorValues()
 		// No color channel but data exists → use first preset color for single-series rendering.
 		// This prevents geoms from falling back to gray (#888) on charts with no fill channel.
 		if (values.length === 0 && this.#data.length > 0) return assignColors([null], this.#mode, this.#chartPreset)
@@ -228,6 +334,10 @@ export class PlotState {
 	colorField = $derived(
 		isLiteralColor(this.#effectiveChannels.color) ? null : this.#effectiveChannels.color
 	)
+	// Fill field (interior aesthetic), parallel to colorField. Null for a literal CSS color.
+	fillField = $derived(
+		isLiteralColor(this.#effectiveChannels.fill) ? null : this.#effectiveChannels.fill
+	)
 	patternField = $derived(this.#effectiveChannels.pattern)
 	symbolField = $derived(this.#effectiveChannels.symbol)
 
@@ -283,6 +393,8 @@ export class PlotState {
 		this.#axisOffset = config.axisOffset ?? 0
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
+		this.#continuousCategory = config.continuousCategory ?? false
+		this.#sort = config.sort ?? undefined
 	}
 
 	update(config) {
@@ -309,6 +421,8 @@ export class PlotState {
 		if (config.axisOffset !== undefined) this.#axisOffset = config.axisOffset
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
+		this.#continuousCategory = config.continuousCategory ?? false
+		this.#sort = config.sort ?? undefined
 	}
 
 	registerGeom(config) {
@@ -360,6 +474,36 @@ export class PlotState {
 		// array separately, so their elements are not ===. Same content, aligned identity.
 		return this.#rawData
 	}
+	/** @returns {{ x?: string, y?: string, color?: string, fill?: string, pattern?: string, symbol?: string }} */
+	get channels() {
+		return this.#channels
+	}
+
+	// ─── Orientation helpers (horizontal / axis-flip) ──────────────────────────
+	// True when the chart is rendered horizontally (category axis stood up on the
+	// vertical screen, value axis along the horizontal screen). x/y channels unchanged.
+	get isFlipped() {
+		return this.#flipped
+	}
+	// True when the category (x) axis is a continuous position scale (kept linear) rather than a
+	// band — a bar-chart race's tweened rank. buildBars uses continuous positioning for it.
+	get continuousCategory() {
+		return this.#continuousCategory
+	}
+	// Map abstract (x-channel, y-channel) scale outputs to screen coords. When flipped,
+	// the two screen axes swap. Geoms compute u = xScale(d[x]), v = yScale(d[y]) then
+	// `const { x, y } = plotState.place(u, v)`.
+	place(u, v) {
+		return this.#flipped ? { x: v, y: u } : { x: u, y: v }
+	}
+	// The categorical (band) scale and the continuous (value) scale, regardless of
+	// orientation — their ranges are already oriented to the correct screen axis.
+	get bandScale() {
+		return this.#bandIsX ? this.xScale : this.yScale
+	}
+	get valueScale() {
+		return this.#bandIsX ? this.yScale : this.xScale
+	}
 	get margin() {
 		return this.#effectiveMargin
 	}

package/dist/PlotSurface.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { setContext, untrack } from 'svelte'
+	import type { Snippet } from 'svelte'
+	import { PlotState } from './PlotState.svelte.js'
+	import DefinePatterns from './patterns/DefinePatterns.svelte'
+
+	type Row = Record<string, unknown>
+
+	type Props = {
+		/** Full PlotState config. `config.width` is the initial/fallback width — PlotSurface
+		 *  owns the responsive width via a ResizeObserver and overrides it. */
+		config?: Record<string, unknown>
+		/** Animate marks on data/flip changes (data-plot-animate). Enabled one frame after the
+		 *  width settles so the initial layout paints un-animated. */
+		animate?: boolean
+		/** Enable d3-zoom pan/zoom on the svg. */
+		zoom?: boolean
+		ariaLabel?: string
+		/** SVG <desc> for screen readers. */
+		summary?: string
+		/** Two-way selection (row references), synced with the PlotState selection. */
+		selected?: Row[]
+		/** Canvas content (geoms/grid/axes) — rendered inside the svg. */
+		children?: Snippet
+		/** HTML overlays (legend/tooltip/a11y table) — rendered outside the svg but INSIDE the
+		 *  plot-state context, so they can read plotState. */
+		overlay?: Snippet
+	}
+
+	let {
+		config = {},
+		animate = true,
+		zoom = false,
+		ariaLabel = 'Chart visualization',
+		summary = '',
+		selected = $bindable([]),
+		children,
+		overlay
+	}: Props = $props()
+
+	// ── Responsive width: observe the container, use its pixel width so the chart fills the stage.
+	let containerEl = $state<HTMLDivElement | null>(null)
+	let svgEl = $state<SVGSVGElement | null>(null)
+	let observedWidth = $state(0)
+	$effect(() => {
+		if (!containerEl) return
+		const ro = new ResizeObserver((entries) => {
+			const w = Math.floor(entries[0].contentRect.width)
+			if (w > 0) observedWidth = w
+		})
+		ro.observe(containerEl)
+		return () => ro.disconnect()
+	})
+	const fallbackWidth = $derived(Number(config.width) || 600)
+	const effectiveWidth = $derived(observedWidth > 0 ? observedWidth : fallbackWidth)
+	const svgHeight = $derived(Number(config.height) || 400)
+	const mode = $derived(config.mode as 'light' | 'dark' | undefined)
+
+	// ── The single PlotState + context. config.width is overridden with the observed width.
+	const fullConfig = () => ({ ...config, width: effectiveWidth })
+	const plotState = untrack(() => new PlotState(fullConfig()))
+	setContext('plot-state', plotState)
+	$effect(() => {
+		plotState.update(fullConfig())
+	})
+
+	// ── Selection sync (external prop ↔ PlotState). Guarded to avoid an update loop.
+	$effect(() => {
+		plotState.setSelected(selected)
+	})
+	$effect(() => {
+		const rows = plotState.selectedRows
+		const same = rows.length === selected.length && rows.every((r, i) => r === selected[i])
+		if (!same) selected = rows
+	})
+
+	// ── Enable data-change / flip animation one frame after the width first settles, so the
+	//    initial (possibly reflowed) layout paints without animating.
+	let animateReady = $state(false)
+	$effect(() => {
+		if (!animate || animateReady || observedWidth <= 0) return
+		const raf = requestAnimationFrame(() => {
+			animateReady = true
+		})
+		return () => cancelAnimationFrame(raf)
+	})
+
+	// ── Pan/zoom (d3-zoom/d3-selection are client-only → dynamic import).
+	$effect(() => {
+		if (!zoom || !svgEl) return
+		let cancelled = false
+		let detach: (() => void) | undefined
+		Promise.all([import('d3-zoom'), import('d3-selection')]).then(
+			([{ zoom: d3Zoom }, { select }]) => {
+				if (cancelled || !svgEl) return
+				const zoomBehavior = d3Zoom<SVGSVGElement, unknown>()
+					.scaleExtent([1, 8])
+					.on('zoom', (event) => plotState.applyZoom(event.transform))
+				const sel = select(svgEl)
+				sel.call(zoomBehavior)
+				detach = () => sel.on('.zoom', null)
+			}
+		)
+		return () => {
+			cancelled = true
+			detach?.()
+			plotState.resetZoom()
+		}
+	})
+</script>
+
+<div class="plot-surface" bind:this={containerEl}>
+	<svg
+		bind:this={svgEl}
+		width={effectiveWidth}
+		height={svgHeight}
+		viewBox="0 0 {effectiveWidth} {svgHeight}"
+		role="img"
+		aria-label={ariaLabel}
+		data-plot-root
+		data-mode={mode}
+		data-plot-animate={animate && animateReady ? '' : undefined}
+		style:cursor={zoom ? 'grab' : undefined}
+	>
+		{#if summary}
+			<desc>{summary}</desc>
+		{/if}
+		<!-- SVG <pattern> defs for texture fills (Bar/Area/Arc/Box/Violin `pattern` channel) -->
+		<DefinePatterns />
+		<g
+			class="plot-canvas"
+			transform="translate({plotState.margin.left}, {plotState.margin.top})"
+			data-plot-canvas
+		>
+			{@render children?.()}
+		</g>
+	</svg>
+	<!-- HTML overlays (legend/tooltip/a11y table) — inside the context, outside the svg. -->
+	{@render overlay?.()}
+</div>
+
+<style>
+	.plot-surface {
+		width: 100%;
+	}
+	.plot-surface svg {
+		display: block;
+		width: 100%;
+		height: auto;
+		overflow: visible;
+	}
+	.plot-canvas {
+		pointer-events: all;
+	}
+	/* Mode token-lock colour (only when data-mode is set explicitly). */
+	[data-plot-root][data-mode='light'] {
+		color: rgba(var(--color-surface-700, 59, 65, 77), 1);
+	}
+	[data-plot-root][data-mode='dark'] {
+		color: rgba(var(--color-surface-200, 224, 224, 224), 1);
+	}
+</style>

package/dist/PlotSurface.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+type Row = Record<string, unknown>;
+type Props = {
+    /** Full PlotState config. `config.width` is the initial/fallback width — PlotSurface
+     *  owns the responsive width via a ResizeObserver and overrides it. */
+    config?: Record<string, unknown>;
+    /** Animate marks on data/flip changes (data-plot-animate). Enabled one frame after the
+     *  width settles so the initial layout paints un-animated. */
+    animate?: boolean;
+    /** Enable d3-zoom pan/zoom on the svg. */
+    zoom?: boolean;
+    ariaLabel?: string;
+    /** SVG <desc> for screen readers. */
+    summary?: string;
+    /** Two-way selection (row references), synced with the PlotState selection. */
+    selected?: Row[];
+    /** Canvas content (geoms/grid/axes) — rendered inside the svg. */
+    children?: Snippet;
+    /** HTML overlays (legend/tooltip/a11y table) — rendered outside the svg but INSIDE the
+     *  plot-state context, so they can read plotState. */
+    overlay?: Snippet;
+};
+declare const PlotSurface: import("svelte").Component<Props, {}, "selected">;
+type PlotSurface = ReturnType<typeof PlotSurface>;
+export default PlotSurface;

package/dist/charts/AreaChart.svelte

@@ -14,12 +14,18 @@
 		stat?: string
 		curve?: 'linear' | 'smooth' | 'step'
 		pattern?: string
+		/** @deprecated use `position="stack"`. */
 		stack?: boolean
+		/** Multi-series arrangement: 'stack' | 'fill' | 'identity' (default). */
+		position?: 'stack' | 'fill' | 'identity'
+		/** Fixed area opacity 0–1. */
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
 		grid?: boolean | 'x' | 'y' | 'both'
 		legend?: boolean
+		tooltip?: boolean | ((data: Row) => string)
 		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
 		trend?: Method | Method[]
 		xFormat?: Format
@@ -41,11 +47,14 @@
 		curve = undefined,
 		pattern = undefined,
 		stack = false,
+		position = undefined,
+		alpha = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
+		tooltip = false,
 		highlight = undefined,
 		trend = undefined,
 		xFormat = undefined,
@@ -68,6 +77,7 @@
 	{mode}
 	{grid}
 	{legend}
+	{tooltip}
 	{highlight}
 	{trend}
 	{xFormat}
@@ -79,5 +89,5 @@
 	{selectable}
 	bind:selected
 >
-	<Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
+	<Area {x} {y} color={fill} {pattern} {stat} {position} {alpha} options={{ curve, stack }} />
 </Plot>

package/dist/charts/AreaChart.svelte.d.ts

@@ -12,12 +12,18 @@ type Props = {
     stat?: string;
     curve?: 'linear' | 'smooth' | 'step';
     pattern?: string;
+    /** @deprecated use `position="stack"`. */
     stack?: boolean;
+    /** Multi-series arrangement: 'stack' | 'fill' | 'identity' (default). */
+    position?: 'stack' | 'fill' | 'identity';
+    /** Fixed area opacity 0–1. */
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
     grid?: boolean | 'x' | 'y' | 'both';
     legend?: boolean;
+    tooltip?: boolean | ((data: Row) => string);
     highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
     trend?: Method | Method[];
     xFormat?: Format;

package/dist/charts/BarChart.svelte

@@ -4,6 +4,7 @@
 
 	type Row = Record<string, unknown>
 	type Format = (v: unknown) => string
+	type Method = string | number | { type: string; [k: string]: unknown }
 
 	type Props = {
 		data?: Row[]
@@ -17,14 +18,24 @@
 		grid?: boolean
 		legend?: boolean
 		stat?: string
+		/** @deprecated use `position="stack"`. */
 		stack?: boolean
+		/** Multi-series arrangement: 'stack' | 'dodge' (default) | 'fill' | 'identity'. */
+		position?: 'stack' | 'dodge' | 'fill' | 'identity'
+		/** Fixed bar opacity 0–1. */
+		alpha?: number
 		label?: boolean | string | ((data: Row) => unknown)
 		tooltip?: boolean | ((data: Row) => string)
+		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
+		trend?: Method | Method[]
 		xFormat?: Format
 		yFormat?: Format
 		xTicks?: number
 		yTicks?: number
 		minorTicks?: boolean
+		onselect?: (detail: unknown) => void
+		selectable?: boolean
+		selected?: Row[]
 	}
 
 	let {
@@ -35,21 +46,46 @@
 		pattern = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		stat = 'identity',
 		stack = false,
+		position = undefined,
+		alpha = undefined,
 		label = false,
 		tooltip = false,
+		highlight = undefined,
+		trend = undefined,
 		xFormat = undefined,
 		yFormat = undefined,
 		xTicks = undefined,
 		yTicks = undefined,
-		minorTicks = false
+		minorTicks = false,
+		onselect = undefined,
+		selectable = false,
+		selected = $bindable([])
 	}: Props = $props()
 </script>
 
-<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
-	<Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
+<Plot
+	{data}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{tooltip}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
+	<Bar {x} {y} color={fill} {pattern} {label} {stat} {position} {alpha} options={{ stack }} />
 </Plot>

package/dist/charts/BarChart.svelte.d.ts

@@ -1,5 +1,9 @@
 type Row = Record<string, unknown>;
 type Format = (v: unknown) => string;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Props = {
     data?: Row[];
     x?: string;
@@ -12,15 +16,25 @@ type Props = {
     grid?: boolean;
     legend?: boolean;
     stat?: string;
+    /** @deprecated use `position="stack"`. */
     stack?: boolean;
+    /** Multi-series arrangement: 'stack' | 'dodge' (default) | 'fill' | 'identity'. */
+    position?: 'stack' | 'dodge' | 'fill' | 'identity';
+    /** Fixed bar opacity 0–1. */
+    alpha?: number;
     label?: boolean | string | ((data: Row) => unknown);
     tooltip?: boolean | ((data: Row) => string);
+    highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
+    trend?: Method | Method[];
     xFormat?: Format;
     yFormat?: Format;
     xTicks?: number;
     yTicks?: number;
     minorTicks?: boolean;
+    onselect?: (detail: unknown) => void;
+    selectable?: boolean;
+    selected?: Row[];
 };
-declare const BarChart: import("svelte").Component<Props, {}, "">;
+declare const BarChart: import("svelte").Component<Props, {}, "selected">;
 type BarChart = ReturnType<typeof BarChart>;
 export default BarChart;