Bar Chart
Token-driven bar chart built on Recharts v3 — vertical columns or horizontal bars, grouped or stacked, rounded corners, and full light/dark theming.
Playground
Installation
pnpm add @tessinaui/ui rechartsUsage
import { BarChart } from "@tessinaui/ui";
import type { ChartConfig } from "@tessinaui/ui";
const config: ChartConfig = {
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
};
const data = [
{ month: "Jan", desktop: 186, mobile: 80 },
{ month: "Feb", desktop: 305, mobile: 200 },
];
<BarChart data={data} config={config} categoryKey="month" />Examples
Default
A single-series bar chart with upright columns.
Horizontal
Bars run sideways, ideal for long category labels.
Stacked
Multiple series combined into one bar per category, with a legend.
Labels
Each bar's numeric value rendered above the column.
States
The loading skeleton and the empty state side by side.
Theming
| Element | Token |
|---|---|
| Bar fill | --chart-1 … --chart-6 (via config[key].color) |
| Grid + axis lines | border |
| Axis tick labels | muted-foreground |
| Tooltip surface | popover / popover-foreground / border |
Core props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, string | number | null>[] | — | Row-per-category data. |
config | ChartConfig | — | Series metadata (label, color). |
categoryKey | string | — | Datum key for the category axis. |
series | string[] | all config keys | Which series to plot. |
orientation | "vertical" | "horizontal" | "vertical" | Columns vs sideways bars. |
stacked | boolean | false | Stack series into one bar per category. |
radius | number | 4 | Bar corner radius. |
size | "sm" | "md" | "lg" | "md" | Aspect ratio. |
showGrid / showCategoryAxis / showValueAxis / showLegend / showTooltip | boolean | — | Toggle chart chrome. |
dir | "ltr" | "rtl" | "ltr" | Reading direction. |
loading | boolean | false | Render the skeleton. |
error | ReactNode | — | Render an error message instead of the chart. |
emptyState | ReactNode | "No data to display" | Shown when data is empty. |
Banner
A promotional banner for curations, promotions, events, and programs — with an overline, headline, body, one or more call-to-actions, and a disclaimer. Color, full-bleed image, or inset-image backgrounds; three sizes; light and dark mode.
Bottom Nav
Mobile bottom navigation bar in two styles — a full-width dock and an iOS-style floating pill. Controlled or uncontrolled active state. Badge support (dot or count). LTR and RTL.