Chart

Chart adalah representasi visual dari data yang digunakan untuk menyampaikan informasi secara ringkas dan mudah dipahami. Komponen ini membantu pengguna mengenali pola, tren, dan perbandingan data tanpa harus membaca angka secara mendetail.

Penggunaan

Chart digunakan untuk menampilkan data secara visual agar lebih mudah dipahami dan dibandingkan. Pola ini membantu pengguna membaca tren, mengenali pola, serta memahami performa sistem tanpa harus menelusuri data mentah.

Komponen ini dapat digunakan untuk berbagai konteks, mulai dari laporan harian, dashboard, hingga tampilan ringkasan.

Chart berperan penting dalam menjaga keterbacaan informasi numerik sekaligus memperkuat komunikasi data melalui desain yang konsisten dan mudah dipahami.

Anatomi

Varian

Line Chart

Gunakan Line Chart untuk menampilkan data dalam bentuk garis berurutan yang menghubungkan titik-titik data. Komponen ini cocok digunakan untuk menunjukkan perubahan nilai atau tren dari waktu ke waktu.

Ciri khas:

•Menggunakan garis halus untuk merepresentasikan kontinuitas data.
•Umumnya menampilkan sumbu X sebagai waktu (hari, bulan, tahun) dan sumbu Y sebagai nilai.

Contoh penggunaan:

•Perkembangan jumlah pengguna bulanan.
•Grafik pertumbuhan transaksi harian.
•Tren performa layanan dari waktu ke waktu.

Bar Chart

Gunakan Bar Chart untuk menampilkan data dalam bentuk batang horizontal atau vertikal. Cocok digunakan untuk membandingkan kategori data secara visual, baik antar kelompok maupun antar periode.

Ciri khas:

•Setiap batang mewakili kategori dengan panjang proporsional terhadap nilai datanya.
•Warna batang digunakan untuk membedakan jenis data.

Contoh penggunaan:

•Perbandingan jumlah pengguna per wilayah.
•Evaluasi performa produk antar kuartal.
•Statistik aktivitas per departemen.

Pie Chart

Gunakan Pie Chart untuk menampilkan data dalam bentuk lingkaran yang terbagi menjadi beberapa bagian (slice). Komponen ini cocok digunakan untuk menunjukkan proporsi dari keseluruhan data atau distribusi kategori.

Ciri khas:

•Setiap bagian menunjukkan kontribusi satu kategori terhadap total keseluruhan.
•Warna berbeda digunakan untuk membedakan tiap kategori.

Contoh penggunaan:

•Distribusi jenis pengguna berdasarkan role (Admin, User, Guest).
•Proporsi sumber trafik (Website, Aplikasi, Surel).
•Pembagian anggaran per kategori pengeluaran.

Cara Penggunaan yang Disarankan

✅ Disarankan

Menampilkan tooltip berisi label dan nilai saat kursor menunjuk chart agar pengguna dapat membaca data dengan jelas.

❌ Dihindari

Tidak menampilkan tooltip berisi label dan nilai saat kursor menunjuk chart dapat membuat pengguna sulit untuk membaca data.

✅ Disarankan

Gunakan warna yang konsisten untuk menjaga keterbacaan data.

❌ Dihindari

Hindari menggunakan terlalu banyak warna yang mirip dalam satu chart.

Penerapan

Dashboard

Chart dapat digunakan di halaman dashboard untuk menampilkan performa, progres, atau laporan aktivitas secara visual.

Misalnya, menampilkan perkembangan pengguna aktif per bulan, tingkat penyelesaian transaksi, atau komposisi jenis layanan.

Chart juga dapat dikombinasikan dalam satu tampilan untuk memperkaya konteks data, seperti penggunaan Line Chart untuk tren dan Bar Chart untuk perbandingan kategori di waktu yang sama.

Spesifikasi