Svelte 5 component · machines-ui · Graphs
GraphMeter
Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.
Install
GraphMeter is a Svelte 5 ASCII meter 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 { GraphMeter } from '@fractaldesign/machines-ui';Usage
<GraphMeter title="SHIPPED" value={0.67} caption="characters, not a progress bar" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
value | number Fraction filled, from 0 to 1. | — |
ticks | number Number of ticks the bar is divided into. | 14 |
caption | string Optional muted caption shown under the bar. | — |
glyphs | Glyphs Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest. | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
GraphPlot A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale…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.