tổng người dùng
12,345
+12.5% data visualize pattern
mẫu trực quan hóa dữ liệu cho dashboard và analytics. tập trung vào clarity, comparison, và accessibility của dữ liệu.
metric cards
doanh thu
$48,290
+8.2% tỷ lệ chuyển đổi
3.24%
-0.4% thời gian tải
245ms
-15% chart layout patterns
single chart
full-width chart với title, legend, và optional timeframe selector. dùng chart container component.
chart grid
2-4 charts trong bento grid. mỗi chart độc lập với dữ liệu riêng. responsive: stack trên mobile.
chart + table
chart phía trên, data table phía dưới. liên kết: filter trên table ảnh hưởng chart.
data visualization principles
color
dùng semantic colors (success=green, error=red, info=blue). tránh dùng brand color cho data.
typography
số liệu dùng Space Grotesk (--font-number). label dùng Inter. kích thước theo cấp độ quan trọng.
spacing
khoảng cách giữa các phần tử data phải đủ để phân biệt. dùng spacing tokens.
accessibility
không chỉ dùng màu để truyền tải thông tin. thêm label, pattern, hoặc text alternative.