Komponen / Grafik & jadwal

Treemap

Luas kotak sebanding nominal per jenis (Additional Salary per jenis); jenis bernilai nol tampil sebagai chip garis putus.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Pakai Treemap untuk "jenis mana yang paling besar" dengan 2–8 jenis yang menjumlah ke satu total.
Tulis jenis yang belum terisi sebagai chip "belum ada baris" agar pembaca tahu jenis itu ada.
Sertakan meta jumlah orang/dokumen di kotak — nominal besar dari satu orang berbeda maknanya dengan nominal dari banyak orang.

Hindari

Jangan memakai Treemap untuk membandingkan nilai yang mirip besarnya — luas sulit dibandingkan; pakai BarList.
Jangan memasukkan nilai negatif (potongan) ke Treemap yang sama dengan pendapatan.
Jangan lebih dari 8 jenis; kotak terlalu kecil kehilangan label.

Additional Salary per jenis
Jenis	Nominal	Persen	Keterangan
Natura	Rp 2.651.000	78%	2 orang
Jasop	Rp 750.000	22%	1 orang
Rapel / koreksi	Rp 0	0%	belum ada baris

GunakanJenis bernilai nol ditulis sebagai chip garis putus "belum ada baris".

Additional Salary per jenis
Jenis	Nominal	Persen	Keterangan
Natura	Rp 2.651.000	78%	2 orang
Jasop	Rp 750.000	22%	1 orang

HindariJenis bernilai nol hilang tanpa jejak — pembaca mengira jenis itu tidak ada.

Label kotak = nama jenis Additional Salary persis seperti di master: "Natura", "Jasop".
Meta menyebut jumlah orang: "2 orang", "1 orang".
Chip nol: "<jenis> · belum ada baris".