fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Graphs

GraphBars

Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.

All components Source

Install

GraphBars is a Svelte 5 ASCII bars chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import 
import '@fractaldesign/machines-ui/style.css';
import { GraphBars } from '@fractaldesign/machines-ui';

Usage

Example 
<script lang="ts">
	import { GraphBars, type BarSeries } from '@fractaldesign/machines-ui';

	const from: BarSeries = { label: 'draft', values: [1, 2, 2, 3, 1] };
	const to: BarSeries = { label: 'shipped', size: 'lg', values: [3, 5, 4, 6, 5] };
</script>

<GraphBars title="DRAFT TO SHIPPED" processor="edit" {from} {to} />

Props

NameTypeDefault
title string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.—
from BarSeries The starting series, drawn in muted bars.—
to BarSeries The resulting series, drawn in accent bars.—
processor string Label on the arrow between the series, e.g. the step applied.—
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

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,…GraphCountdown Time left until a date.GraphDiff A change summary that marks rows as added, removed, or unchanged, with an optional footer row.