BarChart

BarChart so sánh độ lớn giữa các danh mục — cột dọc hoặc thanh ngang, nhóm hoặc chồng, có hỗ trợ giá trị âm.

SVG viết tay theo phương pháp dataviz: cột mảnh ≤ 24px, đầu dữ liệu bo 4px và vuông ở đường gốc, khe bề mặt 2px giữa các cột/đoạn chồng, một trục Y, lưới mảnh lùi về sau. Rê chuột hoặc Tab vào biểu đồ rồi dùng phím mũi tên để xem tooltip; nút “Bảng dữ liệu” chuyển sang bảng tương đương cho trình đọc màn hình.

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

Doanh thu theo kênh

6 tháng gần nhất

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 { BarChart } 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.

Sản phẩm bán chạy

Thanh ngang & nhãn giá trị

Nhiều danh mục hoặc tên dài → thanh ngang. Một chuỗi nên không có legend; giá trị nằm ở đầu thanh.

Doanh thu theo mảng (nghìn US$)

Cột chồng

Phần–tổng theo danh mục; khe 2px giữa các đoạn, chỉ đoạn ngoài cùng bo góc. Tooltip liệt kê mọi đoạn và tổng.

Lợi nhuận ròng (nghìn US$)

Giá trị âm (phân kỳ)

Cột mọc hai phía đường gốc 0. diverging tô hai cực Sakura ↔ Ai; vị trí đã mã hoá dấu, màu chỉ nhấn thêm.

Tỉ trọng kênh bán (%)

Hoa văn (texture)

Kênh dự phòng cho mù màu toàn phần, in ấn và forced-colors: hoa văn 45° / 135°. Tự bật ở theme Tương phản cao.

Cách dùng

Nên

Dùng cột để so sánh độ lớn; chuyển sang thanh ngang khi nhiều danh mục hoặc tên dài.
Một chuỗi = một màu (ô 1) cho mọi cột — tiêu đề đã gọi tên chuỗi nên không cần legend.
Chỉ bật nhãn giá trị khi ít cột; phần còn lại để trục, tooltip và bảng dữ liệu đảm nhận.

Không nên

Không dùng hai trục Y — tách thành hai biểu đồ hoặc chỉ số hoá về cùng gốc (= 100).
Không tô cột đậm dần theo giá trị cho danh mục không có thứ tự — độ dài cột đã nói điều đó.
Không vẽ biểu đồ chỉ một cột — dùng StatTile.

Props

Prop · Kiểu	Mặc định	Mô tả
dataChartDatum[]	Mặc định: —	Mảng dòng dữ liệu (object).
indexstring	Mặc định: —	Trường danh mục.
series{ key, label, color? }[]	Mặc định: —	Chuỗi giá trị; color (1–8) ghim ô màu, mặc định theo thứ tự.
orientation"vertical" \| "horizontal"	Mặc định: "vertical"	Cột dọc hoặc thanh ngang.
layout"grouped" \| "stacked"	Mặc định: "grouped"	Cạnh nhau hoặc chồng.
valueFormat / axisFormatIntl.NumberFormatOptions \| (v) => string	Mặc định: —	Định dạng giá trị; trục tự rút gọn từ 1.000.
showValuesboolean	Mặc định: false	Nhãn ở đầu cột — chỉ khi vừa chỗ.
divergingboolean	Mặc định: false	Một chuỗi: âm / dương theo cặp màu phân kỳ.
legendboolean	Mặc định: ≥ 2 chuỗi	Legend bật/tắt chuỗi (màu không đổi khi lọc).
barSizenumber	Mặc định: 24	Độ dày tối đa của cột (px).
title / description / toolbarReactNode	Mặc định: —	Khung ChartContainer.
heightnumber	Mặc định: 280 (dọc) · tự tính (ngang)	Chiều cao vùng vẽ, gồm dải nhãn trục.
localestring	Mặc định: "vi-VN"	Locale cho Intl.
textureboolean	Mặc định: tự động	Hoa văn nhận diện — tự bật ở tương phản cao / forced-colors.
ariaLabel, indexLabel, hideTableToggle, defaultShowTable, animate…	Mặc định: —	Mô tả truy cập, tiêu đề cột bảng, nút bảng, animation.

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}`