machines-ui
graphs

Waterfall

A running-total chart that shows how sequential increases and decreases contribute to a final value.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphWaterfall } from '@fractaldesign/machines-ui';

Preview

[ MARGIN ]
  • Revenue 48
  • Refunds −6
  • Hosting −4
  • Profit 38
Revenue 48, Refunds −6, Hosting −4, Profit 38
<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

PropTypeDefaultDescription
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 24Number of character positions used to draw the chart scale.
glyphs Glyphs —Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest.
palette GraphPalette
'mono''duo''multi'
—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 ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
WaterfallKindtypeRunning total drawn as floating bars over a shared scale.
'start' | 'in' | 'out' | 'end'
WaterfallIteminterface
Segmentinterface

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --graph-accent-2
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphWaterfall.svelte

machines-ui