Svelte 5 component · machines-ui · Graphs
GraphPlot
A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale on the left and optional end labels on the x axis.
Install
GraphPlot is a Svelte 5 ASCII plot 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 { GraphPlot } from '@fractaldesign/machines-ui';Usage
<GraphPlot
title="P95"
data={[2, 3, 3, 5, 4, 7, 6, 8, 5, 9, 7, 6]}
labels={['jan', 'dec']}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
data | number[] The plotted values, oldest first, one glyph column each. | — |
labels | string[] X-axis end labels: only the first and last entries are shown, under the plot. | — |
height | number Plot height in glyph rows. Default 7. | 7 |
variant | 'line' | 'area' `line` draws only the cap glyphs; `area` also fills the rows below them. Default 'area'. | 'area' |
progress | number Fraction (0–1) of the points revealed so far, for drawing the plot in live: `0.5` draws the first half. Default 1; values above 1 are treated as 1. | 1 |
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
GraphQuota Quota usage bar: used against a hard limit, with reset date and an end- of-window projection.GraphRank Ranked rows: each item gets a label, a glyph bar whose length follows its value against the max, and the…GraphSlo Error-budget burn bar.GraphSlope A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with…GraphSpark Packed 1ch sparkline, centered with a small gap. Never stretched.GraphSpec A labeled specification list with optional accent styling on individual values.