ShareBar

Parts of a whole as one bar, with the parts listed under it.

For many parts or long names, where a donut runs out of room: the bar shows the proportions at a glance, the list carries the names and the numbers. Bar and list are one thing. Hover a segment and its row lights up, with a tooltip over the bar; hover or focus a row and its segment stands out while the rest fade. Give it onSelect and every row is a toggle button that picks its part — the bar then keeps the others faded until the pick is dropped, so the same pick can be shown in other bars elsewhere. Without the legend it is a thin bar for a table row or a card: hover still names each segment, and with focusable the arrows walk them. Every part is also a row in a visually-hidden table, inside a clipped box so it never widens a phone page.

Charts · two-way: bind:selected · keyboard contract

<script lang="ts">
	import { ShareBar } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
data required	ShareDatum[]	—	The parts, largest first reads best. Values must be non-negative.
total	number	—	The whole the shares are of. Defaults to the sum of the parts; a larger whole leaves the rest of the bar empty.
format	(value: number) => string	compact	Formats every value: tooltip, legend and table.
legend	boolean	true	List the parts under the bar.
thickness	number	10	Bar height in pixels.
selected bind:	string | null	null	The picked part's key. Others fade in the bar. Bindable.
onSelect	(key: string | null) => void	—	Makes every legend row a toggle button; called with the new pick, or null when it is dropped.
focusable	boolean	true	Without a legend: whether the bar is a tab stop whose arrows walk the parts. Turn off inside a link.
trailing	Snippet<[ShareDatum, number]>	—	Extra content at the end of a legend row, outside its button, such as a link into the part.
partsLabel	string	'Part'	Heads the part column of the screen-reader table — what the parts are ('File type', 'Folder').
aria-label required	string	—	Names the chart, and captions the table. Required.
class	string	—	Merged with the component's own classes, last — so yours win.

Keyboard

Key	Does
← / ↑, → / ↓	move between parts, when the bar is a tab stop (no legend)
Home / End	first / last part
Escape	clear the highlight
Tab, Enter / Space	with a legend and onSelect: reach a row, pick or drop its part

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<ShareBar
	data={[
		{ label: 'Media', value: 5240, detail: 'Video, photos, music' },
		{ label: 'Backups', value: 3180 },
		{ label: 'Code', value: 980 },
		{ label: 'Archives', value: 620 }
	]}
	selected="Backups"
	onSelect={() => {}}
	format={(v) => `${(v / 1000).toFixed(1)} TB`}
	partsLabel="Category"
	aria-label="Stored, by category"
/>

Charts · LineChart · BarChart · DonutChart · Heatmap · Gauge · Sparkline · ChartLegend

---

← All components · Getting started · Theming · source