Lompat ke isi
CirccaHIG

Komponen / Grafik & jadwal

BarList

Batang horizontal berlabel di atas untuk peringkat per kategori — nama panjang (direktorat, unit, customer) tetap utuh, nilai tertulis di kanan.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pakai untuk peringkat banyak kategori berlabel panjang — label di atas batang tidak perlu dipotong.
  • Urutkan dari terbesar kecuali urutan kategorinya sendiri bermakna.
  • Sertakan satuan di nilai ("3 orang", "Rp 120 jt").
  • Tautkan baris ke daftar terfilter bila pengguna perlu menindaklanjuti.

Hindari

  • Jangan memakai BarList untuk tren waktu — pakai ColumnChart.
  • Jangan menyembunyikan kategori bernilai 0 bila keberadaannya penting (direktorat tanpa orang).
  • Jangan mewarnai tiap batang berbeda tanpa makna.

Contoh benar & salah

  • Operasi dan Pemeliharaan5 orang
  • Komersial3 orang
  • Keuangan dan HC2 orang
  • Utama1 orang
GunakanDiurutkan dari terbesar — peringkat terbaca sekilas.
  • Keuangan dan HC2 orang
  • Utama1 orang
  • Operasi dan Pemeliharaan5 orang
  • Komersial3 orang
HindariUrutan acak memaksa mata membandingkan setiap batang.

Penulisan

  • Label kategori ditulis lengkap ("Direktorat Operasi dan Pemeliharaan"), tanpa singkatan internal.
  • Nilai: angka + satuan, tanpa persen kecuali grafik memang tentang porsi.

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil