Svelte 5 component · machines-ui · Graphs
GraphSpark
Packed 1ch sparkline, centered with a small gap. Never stretched.
Install
GraphSpark is a Svelte 5 ASCII spark chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphSpark } from '@fractaldesign/machines-ui';Usage
<GraphSpark
title="LATENCY"
data={[2, 3, 4, 3, 6, 5, 8, 7, 9, 6, 10, 8]}
caption="last point is the accent"
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
data | number[] Trend values, oldest first; the last point is drawn in the accent colour. | — |
caption | string Muted line drawn under the sparkline. | — |
glyphs | Glyphs Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest. | — |
palette | GraphPalette How many accent colours the graph uses: `mono` one, `duo` two, `multi` three. | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
GraphSpec A labeled specification list with optional accent styling on individual values.GraphStack One or more stacked tracks showing how each row's segments add up, with a shared glyph legend.GraphStat A row of two to four large figures with labels, each optionally hinted and accented.GraphTable A framed data table with a rule under the header and an optional footer row for totals.GraphTimeline A vertical timeline of dated events, each marked as done, now or next and linked by a rail.GraphTimer A live timer that counts time elapsed since an instant, time since it happened, or shows the local clock.