Bars

GraphBars

Two bar groups side by side, drawn with glyphs. The right group is usually the larger one.

Command

pnpm dlx shadcn@latest add <origin>/r/graph-bars.json

Before / after

Same shape on both sides. The right group is just taller.

[ THROUGHPUT ]

███ ████ ████████ ███

before

████ ███████ █████████████ ████

after

Different values. Processor label is custom.

[ DRAFT TO SHIPPED ]

██ ████ █████████ ██

draft

edit

█████ ███████ ██████████████ ███████

shipped

Prop	Type	Default	Description
title	string	—	Caption drawn on the top edge of the frame.
from	BarSeries	—	Left series. values is an array of relative heights.
to	BarSeries	—	Right series. Set size to lg for the larger group.
processor	string	—	Optional label between the two groups.
glyphs	"shade" \| "ascii" \| "hash" \| "bar" \| string[]	"shade"	Character set. shade is ·░▒▓█. ascii is .- =#@. Pass a preset or your own characters.
corner	string	"+"	Character at each corner of the frame.
className	string	—	Passed to the outer frame.