Lompat ke isi
CirccaHIG

Komponen / Grafik & jadwal

DonutChart

Donut berangka tengah untuk komposisi satu populasi menurut status (Bersih · Peringatan · Menahan), dengan legenda daftar "3 · 50%". ProgressRing untuk satu nilai: ring KPI dan mini ring kualitas data.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pilih donut bila pertanyaan kartu adalah "berapa bagian dari keseluruhan" dengan 2–5 kategori; angka tengah menjawab pertanyaan itu langsung.
  • Pakai tone semantik (success/warning/danger) untuk status bermakna, dataviz/cat-* untuk kategori netral.
  • Sertakan jumlah dan persen di legenda; jangan andalkan warna saja.
  • ProgressRing untuk satu nilai terhadap target; beri catatan sisa merah hanya bila sisa itu menahan proses.

Hindari

  • Jangan memakai donut untuk tren waktu atau lebih dari 5 kategori — pakai ColumnChart atau BarList.
  • Jangan memakai pie 3D, gradasi, atau label di dalam segmen.
  • Jangan menggambar segmen untuk data semua-nol.
  • Jangan menambah ProgressRing hanya sebagai hiasan angka tanpa target.

Contoh benar & salah

3belum bersih

  • Bersih3 · 50%
  • Peringatan1 · 17%
  • Menahan2 · 33%
GunakanTiga status bermakna, angka tengah menjawab pertanyaan kartu.
  • Kategori A
  • Kategori B
  • Kategori C
  • Kategori D
  • Kategori E
  • Kategori F
  • Kategori G
  • Kategori H
HindariDelapan kategori berdesakan tanpa angka tengah — sulit dibandingkan.

Rekening 60%

3/5 · sisa 2

Status pajak 100%

5/5 ✓

GunakanMini ring menunjukkan kelengkapan nyata (3/5 · sisa 2).
Total gajiRp 1,2 M
HindariRing penuh dekoratif tanpa target di sebelah angka.

Penulisan

  • Label kategori kata benda singkat: "Bersih", "Peringatan", "Menahan".
  • centerLabel melanjutkan angka menjadi frasa: "3 belum bersih".
  • Catatan ProgressRing: "<nilai>/<target> · sisa <n>" atau "<target>/<target> ✓".

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil