@rokkit/chart 1.3.6 → 1.3.7

package/dist/Plot/Axis.svelte

@@ -141,5 +141,7 @@
 	}
 	[data-plot-axis-line] {
 		stroke: currentColor;
+		/* Decoration only — never intercept clicks meant for data marks beneath it. */
+		pointer-events: none;
 	}
 </style>

package/dist/Plot/Grid.svelte

@@ -2,26 +2,44 @@
 	import { getContext } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
 
+	type Props = {
+		lines?: 'auto' | 'x' | 'y' | 'both'
+		xTicks?: number
+		yTicks?: number
+	}
+	let { lines = 'auto', xTicks = 6, yTicks = 6 }: Props = $props()
+
 	const state = getContext<PlotState>('plot-state')
 
-	const xGridLines = $derived.by(() => {
-		const s = state.xScale
-		if (!s || typeof s.bandwidth !== 'function') return []
-		return s.domain().map((val: unknown) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
-	})
+	const isBand = (s: unknown) =>
+		!!s && typeof (s as { bandwidth?: unknown }).bandwidth === 'function'
 
-	const yGridLines = $derived.by(() => {
+	const showX = $derived(
+		lines === 'x' || lines === 'both' || (lines === 'auto' && isBand(state.xScale))
+	)
+	const showY = $derived(lines === 'auto' || lines === 'y' || lines === 'both')
+
+	const yLines = $derived.by(() => {
 		const s = state.yScale
-		if (!s || typeof s.ticks !== 'function') return []
-		return s.ticks(6).map((val: number) => ({ pos: s(val) }))
+		if (!showY || !s || typeof s.ticks !== 'function') return []
+		return s.ticks(yTicks).map((val: number) => ({ pos: s(val) }))
+	})
+
+	const xLines = $derived.by(() => {
+		const s = state.xScale
+		if (!showX || !s) return []
+		if (isBand(s))
+			return s.domain().map((val: unknown) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
+		if (typeof s.ticks !== 'function') return []
+		return s.ticks(xTicks).map((val: number) => ({ pos: s(val) }))
 	})
 </script>
 
 <g class="grid" data-plot-grid>
-	{#each yGridLines as line (line.pos)}
-		<line x1="0" y1={line.pos} x2={state.innerWidth} y2={line.pos} data-plot-grid-line />
+	{#each yLines as line (line.pos)}
+		<line x1="0" y1={line.pos} x2={state.innerWidth} y2={line.pos} data-plot-grid-line="y" />
 	{/each}
-	{#each xGridLines as line (line.pos)}
+	{#each xLines as line (line.pos)}
 		<line x1={line.pos} y1="0" x2={line.pos} y2={state.innerHeight} data-plot-grid-line="x" />
 	{/each}
 </g>
@@ -29,7 +47,8 @@
 <style>
 	[data-plot-grid-line] {
 		stroke: var(--chart-grid-color, currentColor);
-		opacity: 0.15;
-		stroke-dasharray: 2 4;
+		stroke-width: var(--chart-grid-width, 1);
+		stroke-dasharray: var(--chart-grid-dash, 2 4);
+		opacity: var(--chart-grid-opacity, 0.15);
 	}
 </style>

package/dist/Plot/Grid.svelte.d.ts

@@ -1,3 +1,8 @@
-declare const Grid: import("svelte").Component<Record<string, never>, {}, "">;
+type Props = {
+    lines?: 'auto' | 'x' | 'y' | 'both';
+    xTicks?: number;
+    yTicks?: number;
+};
+declare const Grid: import("svelte").Component<Props, {}, "">;
 type Grid = ReturnType<typeof Grid>;
 export default Grid;

package/dist/Plot.svelte

@@ -21,8 +21,11 @@
 	import Waterfall from './geoms/Waterfall.svelte'
 	import Hexbin from './geoms/Hexbin.svelte'
 	import Ribbon from './geoms/Ribbon.svelte'
+	import Highlight from './geoms/Highlight.svelte'
+	import Trend from './geoms/Trend.svelte'
 
 	type Row = Record<string, unknown>
+	type Method = string | number | { type: string; [k: string]: unknown }
 	type Margin = { top: number; right: number; bottom: number; left: number }
 	type ChartPresetCtx = { current: typeof defaultPreset }
 
@@ -33,7 +36,7 @@
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
-		grid?: boolean
+		grid?: boolean | 'x' | 'y' | 'both'
 		axes?: boolean
 		margin?: Margin
 		legend?: boolean
@@ -46,6 +49,14 @@
 		xTicks?: number
 		yTicks?: number
 		minorTicks?: boolean
+		x?: string
+		y?: string
+		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
+		label?: boolean | string | ((row: Row) => unknown)
+		trend?: Method | Method[]
+		onselect?: (detail: unknown) => void
+		selectable?: boolean
+		selected?: Row[]
 		children?: Snippet
 	}
 
@@ -69,6 +80,14 @@
 		xTicks = undefined,
 		yTicks = undefined,
 		minorTicks = false,
+		x = undefined,
+		y = undefined,
+		highlight = undefined,
+		label = false,
+		trend = undefined,
+		onselect = undefined,
+		selectable = false,
+		selected = $bindable([]),
 		children
 	}: Props = $props()
 
@@ -92,7 +111,11 @@
 
 	const effectiveWidth = $derived(observedWidth > 0 ? observedWidth : (spec?.width ?? width))
 	const svgHeight = $derived(spec?.height ?? height)
-	const showGrid = $derived(spec?.grid ?? grid)
+	const gridValue = $derived(spec?.grid ?? grid)
+	const showGrid = $derived(gridValue !== false)
+	const gridLines = $derived(
+		gridValue === true || gridValue === false ? 'auto' : gridValue
+	)
 	const showLegend = $derived(spec?.legend ?? legend)
 	const chartTitle = $derived(spec?.title ?? title)
 	const chartSummary = $derived(spec?.summary ?? summary)
@@ -125,7 +148,9 @@
 			colorScheme: spec?.colorScheme,
 			colorMidpoint: spec?.colorMidpoint,
 			orientation: spec?.orientation,
-			chartPreset
+			chartPreset,
+			onselect,
+			selectable
 		}
 	}
 
@@ -140,6 +165,17 @@
 		plotState.update(buildPlotConfig())
 	})
 
+	// external control → state
+	$effect(() => {
+		plotState.setSelected(selected)
+	})
+	// clicks (state) → prop, guarded to avoid an update loop
+	$effect(() => {
+		const rows = plotState.selectedRows
+		const same = rows.length === selected.length && rows.every((r, i) => r === selected[i])
+		if (!same) selected = rows
+	})
+
 	$effect(() => {
 		if (!zoom || !svgEl) return
 		// d3-zoom/d3-selection are client-only; load them dynamically so they are
@@ -169,6 +205,9 @@
 	// Geoms from spec (spec-driven API)
 	const specGeoms = $derived(spec?.geoms ?? [])
 
+	const overlayX = $derived(spec?.x ?? x)
+	const overlayY = $derived(spec?.y ?? y)
+
 	// Geom component resolver for spec-driven mode
 	const GEOM_COMPONENTS = {
 		bar: Bar,
@@ -217,7 +256,7 @@
 		>
 			<!-- Grid (behind everything) -->
 			{#if showGrid}
-				<Grid />
+				<Grid lines={gridLines} {xTicks} {yTicks} />
 			{/if}
 
 			<!-- Declarative children (geom components) -->
@@ -250,6 +289,14 @@
 				<Axis type="x" label={spec?.labels?.[spec?.x ?? ''] ?? ''} format={xFormat} ticks={xTicks} {minorTicks} />
 				<Axis type="y" label={spec?.labels?.[spec?.y ?? ''] ?? ''} format={yFormat} ticks={yTicks} {minorTicks} />
 			{/if}
+
+			{#if trend !== null && trend !== undefined}
+				<Trend x={overlayX} y={overlayY} {trend} />
+			{/if}
+
+			{#if (highlight !== null && highlight !== undefined) || selectable || selected.length}
+				<Highlight x={overlayX} y={overlayY} {highlight} {label} />
+			{/if}
 		</g>
 	</svg>
 

package/dist/Plot.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { PlotSpec, PlotHelpers } from './lib/plot/types.js';
 type Row = Record<string, unknown>;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Margin = {
     top: number;
     right: number;
@@ -14,7 +18,7 @@ type Props = {
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
-    grid?: boolean;
+    grid?: boolean | 'x' | 'y' | 'both';
     axes?: boolean;
     margin?: Margin;
     legend?: boolean;
@@ -27,8 +31,16 @@ type Props = {
     xTicks?: number;
     yTicks?: number;
     minorTicks?: boolean;
+    x?: string;
+    y?: string;
+    highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
+    label?: boolean | string | ((row: Row) => unknown);
+    trend?: Method | Method[];
+    onselect?: (detail: unknown) => void;
+    selectable?: boolean;
+    selected?: Row[];
     children?: Snippet;
 };
-declare const Plot: import("svelte").Component<Props, {}, "">;
+declare const Plot: import("svelte").Component<Props, {}, "selected">;
 type Plot = ReturnType<typeof Plot>;
 export default Plot;

package/dist/PlotState.svelte.d.ts

@@ -40,6 +40,7 @@ export class PlotState {
         patterns: any;
         symbols: any;
     };
+    get data(): any[];
     get margin(): {
         top: number;
         right: number;
@@ -71,8 +72,14 @@ export class PlotState {
         symbols: string[];
     };
     get hovered(): null;
+    get interactive(): boolean;
+    get selectedRows(): any[];
     setHovered(data: any): void;
     clearHovered(): void;
+    isSelected(row: any): boolean;
+    setSelected(rows: any): void;
+    clearSelected(): void;
+    handleSelect(detail: any): void;
     applyZoom(transform: any): void;
     resetZoom(): void;
     #private;

package/dist/PlotState.svelte.js

@@ -39,6 +39,9 @@ export class PlotState {
 	#mode = $state('light')
 	#chartPreset = $state(defaultPreset)
 	#hovered = $state(null)
+	#selected = $state(new SvelteSet())
+	#onselect = $state(undefined)
+	#selectable = $state(false)
 	#orientationOverride = $state(undefined)
 
 	axisOrigin = $state([undefined, undefined])
@@ -274,6 +277,9 @@ export class PlotState {
 		this.#height = config.height ?? 400
 		this.#mode = config.mode ?? 'light'
 		this.#chartPreset = config.chartPreset ?? defaultPreset
+		this.#onselect = config.onselect
+		this.#selectable = config.selectable ?? false
+		if (config.selected) this.#selected = new SvelteSet(config.selected)
 		this.#axisOffset = config.axisOffset ?? 0
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
@@ -298,6 +304,8 @@ export class PlotState {
 		if (config.height !== undefined) this.#height = config.height
 		if (config.mode !== undefined) this.#mode = config.mode
 		if (config.chartPreset !== undefined) this.#chartPreset = config.chartPreset
+		if (config.onselect !== undefined) this.#onselect = config.onselect
+		if (config.selectable !== undefined) this.#selectable = config.selectable
 		if (config.axisOffset !== undefined) this.#axisOffset = config.axisOffset
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
@@ -345,6 +353,13 @@ export class PlotState {
 		return resolvePreset(this.#presetName, this.#helpers)
 	}
 
+	get data() {
+		// Return #rawData (not #data): geoms read their rows via geomData() which
+		// returns #rawData, so overlays and index lookups (plotState.data.indexOf(datum))
+		// must use the SAME proxy identity. #data and #rawData proxy the same source
+		// array separately, so their elements are not ===. Same content, aligned identity.
+		return this.#rawData
+	}
 	get margin() {
 		return this.#effectiveMargin
 	}
@@ -363,6 +378,12 @@ export class PlotState {
 	get hovered() {
 		return this.#hovered
 	}
+	get interactive() {
+		return Boolean(this.#onselect) || this.#selectable
+	}
+	get selectedRows() {
+		return [...this.#selected]
+	}
 
 	setHovered(data) {
 		this.#hovered = data
@@ -370,6 +391,22 @@ export class PlotState {
 	clearHovered() {
 		this.#hovered = null
 	}
+	isSelected(row) {
+		return this.#selected.has(row)
+	}
+	setSelected(rows) {
+		this.#selected = new SvelteSet(rows ?? [])
+	}
+	clearSelected() {
+		this.#selected = new SvelteSet()
+	}
+	handleSelect(detail) {
+		this.#onselect?.(detail)
+		if (this.#selectable && detail?.datum !== undefined) {
+			if (this.#selected.has(detail.datum)) this.#selected.delete(detail.datum)
+			else this.#selected.add(detail.datum)
+		}
+	}
 
 	applyZoom(transform) {
 		this.#zoomTransform = transform

package/dist/charts/AreaChart.svelte

@@ -3,6 +3,7 @@
 	import Area from '../geoms/Area.svelte'
 
 	type Row = Record<string, unknown>
+	type Method = string | number | { type: string; [k: string]: unknown }
 	type Format = (v: unknown) => string
 
 	type Props = {
@@ -17,13 +18,18 @@
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
-		grid?: boolean
+		grid?: boolean | 'x' | 'y' | 'both'
 		legend?: boolean
+		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 {
@@ -40,14 +46,38 @@
 		mode = 'light',
 		grid = true,
 		legend = 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} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
+<Plot
+	{data}
+	{x}
+	{y}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
 	<Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
 </Plot>

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

@@ -1,4 +1,8 @@
 type Row = Record<string, unknown>;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Format = (v: unknown) => string;
 type Props = {
     data?: Row[];
@@ -12,14 +16,19 @@ type Props = {
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
-    grid?: boolean;
+    grid?: boolean | 'x' | 'y' | 'both';
     legend?: boolean;
+    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 AreaChart: import("svelte").Component<Props, {}, "">;
+declare const AreaChart: import("svelte").Component<Props, {}, "selected">;
 type AreaChart = ReturnType<typeof AreaChart>;
 export default AreaChart;

package/dist/charts/LineChart.svelte

@@ -3,6 +3,7 @@
 	import Line from '../geoms/Line.svelte'
 
 	type Row = Record<string, unknown>
+	type Method = string | number | { type: string; [k: string]: unknown }
 	type Format = (v: unknown) => string
 
 	type Props = {
@@ -18,13 +19,18 @@
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
-		grid?: boolean
+		grid?: boolean | 'x' | 'y' | 'both'
 		legend?: boolean
+		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 {
@@ -42,14 +48,39 @@
 		mode = 'light',
 		grid = true,
 		legend = 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}>
+<Plot
+	{data}
+	{x}
+	{y}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{tooltip}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
 	<Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
 </Plot>

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

@@ -1,4 +1,8 @@
 type Row = Record<string, unknown>;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Format = (v: unknown) => string;
 type Props = {
     data?: Row[];
@@ -13,14 +17,19 @@ type Props = {
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
-    grid?: boolean;
+    grid?: boolean | 'x' | 'y' | 'both';
     legend?: boolean;
+    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 LineChart: import("svelte").Component<Props, {}, "">;
+declare const LineChart: import("svelte").Component<Props, {}, "selected">;
 type LineChart = ReturnType<typeof LineChart>;
 export default LineChart;

package/dist/geoms/Area.svelte

@@ -2,6 +2,9 @@
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildAreas, buildStackedAreas } from './lib/areas.js'
+	import { buildSelectDetail } from '../lib/select.js'
+
+	type Row = Record<string, unknown>
 
 	type Options = {
 		stack?: boolean
@@ -23,6 +26,13 @@
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
+	function selectPoint(d: Row, event: MouseEvent | KeyboardEvent) {
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(d, plotState.data.indexOf(d), { x, y }, 'area', color ? d[color] : undefined, event)
+			)
+	}
+
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'area',
@@ -79,16 +89,23 @@
 			{#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}
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 				<circle
 					cx={px}
 					cy={py}
 					r="8"
 					fill="transparent"
 					stroke="none"
-					role="presentation"
+					role={plotState.interactive ? 'button' : 'presentation'}
+					tabindex={plotState.interactive ? 0 : undefined}
+					style:cursor={plotState.interactive ? 'pointer' : undefined}
 					data-plot-element="area-hover"
 					onmouseenter={() => plotState.setHovered(d)}
 					onmouseleave={() => plotState.clearHovered()}
+					onclick={plotState.interactive ? (e) => selectPoint(d, e) : undefined}
+					onkeydown={plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(d, e)
+						: undefined}
 				/>
 			{/each}
 		{/if}

package/dist/geoms/Bar.svelte

@@ -4,6 +4,7 @@
 	import type { createCrossFilter } from '../crossfilter/createCrossFilter.svelte.js'
 	import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
 
 	type Row = Record<string, unknown>
@@ -134,6 +135,36 @@
 		if (!filterable || !x || !cf) return
 		cf.toggleCategorical(x, barX)
 	}
+
+	function selectBar(bar: { data: Row }, event: MouseEvent | KeyboardEvent) {
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(
+					bar.data,
+					plotState.data.indexOf(bar.data),
+					{ x, y },
+					'bar',
+					colorChannel ? bar.data[colorChannel] : undefined,
+					event
+				)
+			)
+	}
+
+	function handleBarActivate(bar: { data: Row }, event: MouseEvent) {
+		if (filterable && x) handleBarClick(bar.data[x])
+		onselect?.(bar.data)
+		selectBar(bar, event)
+	}
+
+	function handleBarKeyActivate(bar: { data: Row }, event: KeyboardEvent) {
+		if (event.key !== 'Enter' && event.key !== ' ') return
+		if (filterable && x) {
+			handleBarClick(bar.data[x])
+		} else {
+			onselect?.(bar.data)
+		}
+		selectBar(bar, event)
+	}
 </script>
 
 {#if bars.length > 0}
@@ -152,13 +183,15 @@
 				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}
+				style:cursor={filterable || onselect || plotState.interactive ? 'pointer' : undefined}
+				onclick={filterable || onselect || keyboard || plotState.interactive
+					? (e) => handleBarActivate(bar, e)
+					: undefined}
+				onkeydown={filterable || onselect || keyboard || plotState.interactive
+					? (e) => handleBarKeyActivate(bar, e)
+					: undefined}
+				role={filterable || onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
+				tabindex={filterable || onselect || keyboard || plotState.interactive ? 0 : undefined}
 				use:keyboardNav={keyboard}
 				aria-label="{bar.data[x ?? '']}: {bar.data[y ?? '']}"
 				onmouseenter={() => plotState.setHovered(bar.data)}