ComponentsCharts

Bar chart & Bar list

Category comparison — columns or ranked rows, grouped, stacked or 100% stacked, with highlight, value labels and a zero line for negatives. Bar list is the plain-DOM ranked list for top pages, sources and referrers.

Recharts BarChart (Bar list: plain DOM) charts/bar-chart.tsx, charts/bar-list.tsxtheme · material · accent · density · font

May – Oct. Sign-ups: low 1,196 (Jul), high 1,865 (Oct), average 1,500.

Monthly sign-ups
MonthSign-ups
May1,284
Jun1,412
Jul1,196
Aug1,538
Sep1,702
Oct1,865

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { BarChart, BarList } from "@vamos-ui/react/charts";

<BarChart title="Won by rep" data={reps} x="rep" layout="horizontal" config={{ won: { label: "Won", format: "currency" } }} />
<BarList aria-label="Top sources" data={sources} showShare />

More than 20 categories in columns logs a development hint — switch to horizontal or group into Other.

Examples

Grouped

Two series side by side; the target uses the neutral fg-subtle token.

Q1 – Q4. Target: low $420,000.00 (Q1), high $560,000.00 (Q4), average $485,000.00. Actual: low $386,500.00 (Q1), high $512,800.00 (Q3), average $467,200.00.

Bookings vs target
QuarterTargetActual
Q1$420,000.00$386,500.00
Q2$460,000.00$471,200.00
Q3$500,000.00$512,800.00
Q4$560,000.00$498,300.00

Stacked

Only the outer segment is rounded; the tooltip reads the total.

Mon – Sun. Chat: low 35 (Sun), high 116 (Thu), average 81.86. Email: low 18 (Sun), high 77 (Thu), average 54.14. Phone: low 4 (Sun), high 31 (Thu), average 18.71.

Support tickets by channel
DayChatEmailPhone
Mon926421
Tue1047126
Wed885819
Thu1167731
Fri976924
Sat41226
Sun35184

Ranking (CRM)

layout="horizontal" grows rows from inline-start; valueLabels print each value.

Maya Chen – Sam Okafor. Closed won: low $61,300.00 (Sam Okafor), high $184,000.00 (Maya Chen), average $119,216.67.

Closed won by rep, Q4
RepClosed won
Maya Chen$184,000.00
Diego Alvarez$152,500.00
Priya Raman$131,200.00
Tom Becker$98,400.00
Aylin Kaya$87,900.00
Sam Okafor$61,300.00

Profit and loss

Negative values get a prominent zero line.

May – Oct. Net income: low -$12,400.00 (Jul), high $42,300.00 (May), average $17,783.33.

Net income
MonthNet income
May$42,300.00
Jun$18,900.00
Jul-$12,400.00
Aug-$4,800.00
Sep$27,600.00
Oct$35,100.00

Highlight (CMS)

highlight(row) keeps full colour; the rest dim to 35%.

May – Nov. Posts published: low 19 (Nov), high 52 (Oct), average 37.

Posts published
MonthPosts published
May34
Jun41
Jul29
Aug38
Sep47
Oct52
Nov19

Bar list

An <ol> with full text per row; max groups the tail into "Other (n)"; delta shows the change.

Top sources

  1. google.com, 18,420, 46.6%, +12.4%
  2. Direct, 9,860, 24.9%, +3.1%
  3. linkedin.com, 4,210, 10.7%, −8.2%
  4. Weekly newsletter, 3,180, 8%, +21%
  5. news.ycombinator.com, 1,940, 4.9%
  6. Other (3), 1,910, 4.8%

Track variant

  1. google.com, 18,420, +12.4%
  2. Direct, 9,860, +3.1%
  3. linkedin.com, 4,210, −8.2%
  4. Weekly newsletter, 3,180, +21%

API

BarChart

PropTypeDefault
…Chart props
See Chart frame.
ChartProps—
series
Keys to draw. Default: every config key.
string[]—
layout
Columns, or rows (rankings, long labels).
"vertical" | "horizontal""vertical"
stack
Stacking.
"none" | "stacked" | "percent""none"
radius
Corner radius; stacked bars round the outer segment only.
number4
highlight
Rows to keep in full colour; others dim.
(row) => boolean—
valueLabels
Formatted values on the bars.
booleanfalse
barSize
Fixed bar thickness.
"auto" | number"auto"
reference
Reference lines on the value axis.
{ y, label?, color? }[]—

BarList

PropTypeDefault
data
Rows. delta is a ratio (0.12 → +12%).
{ key, label, value, textLabel?, href?, icon?, delta? }[]—
format
Value format.
FormatSpec"number"
color
Bar colour token.
ChartColoraccent-soft
max
Top N; the rest merge into "Other (n)".
number—
sort
Ties are sorted with the locale collator.
"desc" | "asc" | "none""desc"
showShare
Each row's share of the total.
booleanfalse
onItemClick
Rows become buttons. Rows with href are links.
(item) => void—
variant
Bar behind the label, or a thin bar under it.
"filled" | "track""filled"
size
Row height 28 / 32 px.
"sm" | "md""md"
loading / emptyMessage
Descending skeleton rows; text when data is empty.
boolean / ReactNode—
Previous
Badge
Next
Rich text / block editor