LineChart

LineChart và AreaChart thể hiện xu hướng theo thời gian hoặc theo chuỗi danh mục, nhiều chuỗi trên một trục.

Đường 2px bo đầu, vùng phủ ~10% (AreaChart), crosshair bám theo mốc X gần nhất và một tooltip liệt kê mọi chuỗi. Trục X nhận chuỗi (cách đều) hoặc Date (theo thời gian thực). Với ≤ 4 chuỗi, tên chuỗi được ghi ở cuối đường — tự tắt khi các nhãn va nhau.

Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản

Lượt truy cập theo nguồn

Tháng 1 – tháng 8

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { LineChart, AreaChart } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Lượt truy cập mỗi ngày

Trục thời gian & điểm đánh dấu

index là Date → vị trí theo thời gian thực, nhãn trục định dạng bằng Intl (vi-VN). markers vẽ chấm ≥ 8px có viền bề mặt.

Người dùng hoạt động

AreaChart

Một chuỗi: vùng phủ nhạt dưới đường, trục Y luôn từ 0. Giá trị cuối được ghi trực tiếp.

Dung lượng đã dùng (GB)

Vùng chồng

stacked cộng dồn các chuỗi — phần–tổng theo thời gian; tooltip có thêm dòng Tổng.

Thuê bao theo gói

Nhấn mạnh một chuỗi

Khi câu chuyện là “gói Pro tăng mạnh”: highlight tô màu một chuỗi, phần còn lại về xám làm nền.

Cách dùng

Nên

Dùng đường cho xu hướng; AreaChart khi chỉ một chuỗi hoặc khi cần phần–tổng theo thời gian (stacked).
Ghi nhãn trực tiếp ở cuối đường khi ≤ 4 chuỗi; nhiều hơn thì dựa vào legend, tooltip hoặc chia small multiples.
Khi câu chuyện là một chuỗi, dùng highlight thay vì tám màu ngang nhau.

Không nên

Không đặt hai đại lượng khác thang đo lên hai trục Y — tách biểu đồ hoặc chỉ số hoá (= 100 tại mốc đầu).
Không chồng vùng phủ đậm che nhau — vùng chỉ là lớp nhạt ~10%, đường mới là mark chính.
Không ghi số ở mọi điểm — chỉ điểm cuối hoặc điểm cực trị.

Props

Prop · Kiểu	Mặc định	Mô tả
data / index / seriesChartDatum[] / string / ChartSeries[]	Mặc định: —	Dữ liệu sắp xếp tăng dần theo X.
xType"category" \| "time"	Mặc định: tự nhận	Có Date → time (vị trí theo thời gian).
xFormat / xTooltipFormatIntl.DateTimeFormatOptions \| (v) => string	Mặc định: —	Nhãn trục / tooltip & bảng.
valueFormat / axisFormatIntl.NumberFormatOptions \| (v) => string	Mặc định: —	Định dạng giá trị và trục.
markersboolean	Mặc định: false	Chấm tại mọi điểm.
curve"monotone" \| "linear"	Mặc định: "monotone"	Nội suy không vượt đỉnh dữ liệu.
endLabelsboolean	Mặc định: ≤ 4 chuỗi	Nhãn cuối đường; tự tắt nếu va nhau.
highlightstring	Mặc định: —	Key chuỗi được nhấn mạnh (các chuỗi khác xám).
includeZeroboolean	Mặc định: false (Line) · true (Area)	Trục Y bắt đầu từ 0.
AreaChart.stackedboolean	Mặc định: false	Chỉ AreaChart: chồng vùng.
title, description, toolbar, height, locale, texture, legend…ChartFrameProps	Mặc định: —	Như BarChart.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.chart

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
roleDescriptionstring aria-roledescription của vùng vẽ.	Mặc định (tiếng Anh)`"chart"`	messagesVi`"biểu đồ"`
heatmapRoleDescriptionstring	Mặc định (tiếng Anh)`"heat map"`	messagesVi`"bản đồ nhiệt"`
dataTablestring Nút bật chế độ bảng của ChartContainer.	Mặc định (tiếng Anh)`"Data table"`	messagesVi`"Bảng dữ liệu"`
totalstring Dòng tổng (tooltip, bảng) và nhãn giữa vòng DonutChart.	Mặc định (tiếng Anh)`"Total"`	messagesVi`"Tổng"`
valuestring	Mặc định (tiếng Anh)`"Value"`	messagesVi`"Giá trị"`
sharestring	Mặc định (tiếng Anh)`"Share"`	messagesVi`"Tỉ lệ"`
noDatastring	Mặc định (tiếng Anh)`"No data"`	messagesVi`"Không có dữ liệu"`
timestring Tiêu đề cột đầu của bảng (khi không truyền `indexLabel`).	Mặc định (tiếng Anh)`"Time"`	messagesVi`"Thời gian"`
categorystring	Mặc định (tiếng Anh)`"Category"`	messagesVi`"Danh mục"`
groupstring	Mặc định (tiếng Anh)`"Group"`	messagesVi`"Nhóm"`
namestring	Mặc định (tiếng Anh)`"Name"`	messagesVi`"Tên"`
otherstring Nhóm gộp (DonutChart vượt `maxSlices`, ScatterChart nhóm thứ 9+).	Mặc định (tiếng Anh)`"Other"`	messagesVi`"Khác"`
trendstring Nút bật đường xu hướng của ScatterChart.	Mặc định (tiếng Anh)`"Trend"`	messagesVi`"Xu hướng"`
increasestring	Mặc định (tiếng Anh)`"Increase"`	messagesVi`"Tăng"`
decreasestring	Mặc định (tiếng Anh)`"Decrease"`	messagesVi`"Giảm"`
noChangestring	Mặc định (tiếng Anh)`"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.	Mặc định (tiếng Anh)`"Visible range"`	messagesVi`"Vùng xem"`
brushRoleDescriptionstring	Mặc định (tiếng Anh)`"zoom window"`	messagesVi`"cửa sổ thu phóng"`
brushViewingstring	Mặc định (tiếng Anh)`"Showing"`	messagesVi`"Đang xem"`
brushPoints(shown: number, total: number) => string	Mặc định (tiếng Anh)(shown, total) => `${shown}/${total} ${total === 1 ? "point" : "points"}`	messagesVi(shown, total) => `${shown}/${total} mốc`
brushResetstring	Mặc định (tiếng Anh)`"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 `ariaLabel`).	Mặc định (tiếng Anh)Hàm, xem messages.ts	messagesViHàm, xem messages.ts
barSummary(info: { horizontal: boolean; stacked: boolean; categories: number; series: string[] }) => string	Mặc định (tiếng Anh)Hàm, xem messages.ts	messagesViHàm, xem messages.ts
donutSummary(info: { groups: number; total: string; largest?: { label: string; share: string } }) => string	Mặc định (tiếng Anh)Hàm, xem messages.ts	messagesViHàm, xem 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	Mặc định (tiếng Anh)Hàm, xem messages.ts	messagesViHàm, xem messages.ts
heatmapSummary(info: { rows: number; columns: number; min?: string; max?: string; hasEmpty: boolean }) => string	Mặc định (tiếng Anh)Hàm, xem messages.ts	messagesViHàm, xem messages.ts
sparklineSummary(info: { points: number; first: string; last: string; min: string; max: string }) => string	Mặc định (tiếng Anh)Hàm, xem 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}`