Svelte 5 component · machines-ui · Graphs
GraphWaterfall
A running-total chart that shows how sequential increases and decreases contribute to a final value.
Install
GraphWaterfall is a Svelte 5 ASCII waterfall 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 { GraphWaterfall } from '@fractaldesign/machines-ui';Usage
<GraphWaterfall
title="MARGIN"
palette="duo"
ticks={18}
items={[
{ label: 'Revenue', value: 48 },
{ label: 'Refunds', value: -6 },
{ label: 'Hosting', value: -4 },
{ label: 'Profit', value: 38 }
]}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
items | WaterfallItem[] Values in sequence; each item contributes a start, increase, decrease, or ending total. | — |
ticks | number Number of character positions used to draw the chart scale. | 24 |
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
GraphActivity A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.GraphBars Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.GraphBullet A bullet chart: each row lays an actual value against an optional target along a ticked track, with the…GraphCalendar A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.GraphCells One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.GraphCompare A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through,…