F71 — Chart Container Component

HybReport Design Language System • Thành phần biểu đồ

1. Chart Card — Trạng thái bình thường

Doanh thu theo tháng
T1
T2
T3
T4
T5
T6
T7
T8
T9
T10
Doanh thu Chi phí Lợi nhuận Thuế Khấu hao

2. Tooltip

Tháng 6, 2025
Doanh thu 1.250 tỷ
Chi phí 820 tỷ
Lợi nhuận 430 tỷ

3. Trạng thái đặc biệt

Biểu đồ trống

Chưa có dữ liệu

Biểu đồ lỗi
Không thể tải dữ liệu Đã xảy ra lỗi khi kết nối đến máy chủ. Vui lòng thử lại sau.

4. Trạng thái đang tải (Skeleton)

 

5. Bảng màu trực quan (10 màu)

Visualization Palette
#3b82f6
#10b981
#f59e0b
#ef4444
#8b5cf6
#06b6d4
#f97316
#ec4899
#14b8a6
#6366f1

6. Thông số kỹ thuật

Thành phần Thuộc tính Giá trị
Card Shell border-radius 12px
box-shadow 0 4px 6px -1px rgba(0,0,0,0.1)
border 1px solid #f1f5f9
Tooltip background #0f172a
border-radius 6px
Legend font-size 11px
color #475569
DataZoom background #f1f3f5
filler rgba(23,96,192,0.2)
handle #adb5bd

HybReport DLS — F71 Chart Container • Tạo bởi OPUS-4.6 • 2025