Sparkline & Stat
Sometimes the answer isn't a chart: StatTile leads with the number, plus a delta and a small trend sparkline.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { Sparkline, StatTile } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Revenue grew steadily over 12 months.
Sparkline in a sentence
Inline, as tall as the line of text; the aria-label summarizes the first, last, lowest and highest values automatically.
Variants
variant area; color picks a categorical color slot instead of the background gray.
Down is good
goodDirection="down": a falling churn rate → success color, always with an icon and text.
Hero number
size="extra-large" (68px, same sans font) for the one number the screen leads with.
Usage
- Use StatTile when the data is a single current number (+ a trend), instead of a single-bar chart.
- State the comparison period of the delta (“vs. last month”) and set goodDirection to match its meaning.
- Keep sparklines to ~12 points, gray as background, with only the current point in an accent color.
- Don't use color as the only signal for the delta. Always include an icon and a signed number.
- Don't put several hero numbers on one screen.
- Don't use tabular-nums for a large standalone number.
Props
| Prop · Type | Default | Description |
|---|---|---|
| Sparkline | Default: — | null creates a gap. |
| Sparkline | Default: 120 / 32 | "auto" = follows the parent element (measured with a ResizeObserver); a number measures nothing. |
| Sparkline | Default: "line" | Line, or line + light fill. |
| Sparkline | Default: "neutral" | Background gray or a categorical color slot. |
| Sparkline | Default: true | Dot on the last point; labels for the tooltip. |
| StatTile | Default: — | Numeric values abbreviate automatically from 10,000. |
| StatTile | Default: — | Signed change (percent by default). |
| StatTile | Default: "up" | Which direction is good. |
| StatTile | Default: — | Sparkline next to the value. |
| StatTile | Default: "medium" | 28 / 40 / 68px. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.chart
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| roleDescriptionstring aria-roledescription của vùng vẽ. | Default (English)"chart" | messagesVi"biểu đồ" |
| heatmapRoleDescriptionstring | Default (English)"heat map" | messagesVi"bản đồ nhiệt" |
| dataTablestring Nút bật chế độ bảng của ChartContainer. | Default (English)"Data table" | messagesVi"Bảng dữ liệu" |
| totalstring Dòng tổng (tooltip, bảng) và nhãn giữa vòng DonutChart. | Default (English)"Total" | messagesVi"Tổng" |
| valuestring | Default (English)"Value" | messagesVi"Giá trị" |
| sharestring | Default (English)"Share" | messagesVi"Tỉ lệ" |
| noDatastring | Default (English)"No data" | messagesVi"Không có dữ liệu" |
| timestring Tiêu đề cột đầu của bảng (khi không truyền | Default (English)"Time" | messagesVi"Thời gian" |
| categorystring | Default (English)"Category" | messagesVi"Danh mục" |
| groupstring | Default (English)"Group" | messagesVi"Nhóm" |
| namestring | Default (English)"Name" | messagesVi"Tên" |
| otherstring Nhóm gộp (DonutChart vượt | Default (English)"Other" | messagesVi"Khác" |
| trendstring Nút bật đường xu hướng của ScatterChart. | Default (English)"Trend" | messagesVi"Xu hướng" |
| increasestring | Default (English)"Increase" | messagesVi"Tăng" |
| decreasestring | Default (English)"Decrease" | messagesVi"Giảm" |
| noChangestring | Default (English)"No change" | messagesVi"Không đổi" |
| brushstring ChartBrush: tên cửa sổ thu phóng, dòng "Đang xem … · n/N mốc", nút đặt lại. | Default (English)"Visible range" | messagesVi"Vùng xem" |
| brushRoleDescriptionstring | Default (English)"zoom window" | messagesVi"cửa sổ thu phóng" |
| brushViewingstring | Default (English)"Showing" | messagesVi"Đang xem" |
| brushPoints(shown: number, total: number) => string | Default (English)(shown, total) => `${shown}/${total} ${total === 1 ? "point" : "points"}` | messagesVi(shown, total) => `${shown}/${total} mốc` |
| brushResetstring | Default (English)"Reset" | messagesVi"Đặt lại" |
| lineSummary(info: { kind: "line" | "area" | "stacked" | "expand"; points: number; /** Mốc đầu / cuối (chỉ có khi points > 0). */ from?: string; to?: string; series: string[]; }) => string Mô tả truy cập tự sinh (khi không truyền | Default (English)Function, see messages.ts | messagesViFunction, see messages.ts |
| barSummary(info: { horizontal: boolean; stacked: boolean; categories: number; series: string[] }) => string | Default (English)Function, see messages.ts | messagesViFunction, see messages.ts |
| donutSummary(info: { groups: number; total: string; largest?: { label: string; share: string } }) => string | Default (English)Function, see messages.ts | messagesViFunction, see messages.ts |
| scatterSummary(info: { points: number; x: string; y: string; /** Tên đại lượng kích thước (biểu đồ bong bóng). */ size?: string; /** Tên các nhóm (khi có nhiều nhóm). */ groups?: string[]; trends: { group?: string; slope: string; r2: string }[]; }) => string | Default (English)Function, see messages.ts | messagesViFunction, see messages.ts |
| heatmapSummary(info: { rows: number; columns: number; min?: string; max?: string; hasEmpty: boolean }) => string | Default (English)Function, see messages.ts | messagesViFunction, see messages.ts |
| sparklineSummary(info: { points: number; first: string; last: string; min: string; max: string }) => string | Default (English)Function, see messages.ts | messagesVi({ points, first, last, min, max }) => `Xu hướng ${points} điểm: từ ${first} đến ${last}, thấp nhất ${min}, cao nhất ${max}` |