Rank
GraphRank
A list of labels with a bar of characters and a number on the right.
Good for traffic, coverage, or anything you'd sort highest first. Two histograms side by side is Bars. A table of numbers is Table.
Command
pnpm dlx shadcn@latest add <origin>/r/graph-rank.jsonRoutes
Pages ordered by visits. The longest bar is the busiest.
- /docs12,400
- /install4,100
- /plot860
- /rank420
Coverage
Every bar uses the same scale, so the percents line up.
- frame100%
- plot82%
- invoice41%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| items | RankItem[] | — | Each row is a label, a number, and an optional display string for the right column. |
| max | number | — | Scale for the bars. Defaults to the largest value. |
| ticks | number | 20 | How many character slots each bar uses. |
| glyphs | "shade" | "ascii" | "hash" | "bar" | string[] | "shade" | Character set. shade is ·░▒▓█. ascii is .- =#@. Pass a preset or your own characters. |
| palette | "mono" | "duo" | "multi" | "mono" | mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents. |
| corner | string | "+" | Character at each corner of the frame. |
| className | string | — | Passed to the outer frame. |