Chart

Ne zaman kullanılır

Chart, bir veri setinin biçimini ya da eğilimini bir bakışta göstermek içindir: aylık değişim, kategoriler arası karşılaştırma, bir bütünün payları. Kesin değer gerekiyorsa grafik tabloyla birlikte gelir.

Doğru türü seçin:

• Çizgi (line): sıralı bir eksendeki değişim, zaman serileri.
• Alan (area): tek bir serinin büyüklüğü ve eğilimi.
• Çubuk (bar): kategorileri yan yana karşılaştırma.
• Yığılmış çubuk (stacked-bar): her kategoride bütünün parçaları.
• Halka (donut): tek serinin payları, en fazla 5 parça.

Ne zaman kullanılmaz

• Tek bir sayı için: Değer ve değişim için StatCard kullanın.
• Kesin değerlerin okunması için: Satır satır kayıtlar için Table ya da DataTable kullanın.
• Çok sayıda parçalı paylar için: 5’ten fazla dilim okunmaz; çubuk grafik ya da tablo kullanın.
• Süs için: Bir bilgiyi taşımayan grafik koymayın.

Anatomi

1. Şekil (figure): grafiğin, başlığın ve tablonun kabı.
2. Başlık (figcaption): zorunlu title; titleHidden ile yalnızca ekran okuyucuya kalır.
3. Açıklama: isteğe bağlı description, aria-describedby ile bağlanır.
4. Tablo düğmesi: table="toggle" iken başlığın sonunda.
5. Çizim: role="img" ve özet cümleyle adlandırılmış SVG; ipucu üzerine gelince açılır.
6. Gösterge: birden çok seri ve halka grafikte üstte, başta; 8 px kareler.
7. Veri tablosu: başlık caption, kategoriler satır başlığı, seriler sütun başlığı.

Davranış

• Grafik ilk çizimde 400 ms içinde belirir. Veri değişince seriler yerinde 240 ms ile güncellenir; giriş hareketi yeniden oynamaz.
• Azaltılmış harekette animasyon kapalıdır.
• loading iken yer tutucu blok gösterilir ve şekil aria-busy olur. Veri yoksa “Bu dönem için veri yok” yazar.
• hideValues eksen değerlerini kaldırır; ipucu, özet ve tabloda •••• görünür.
• Grafik kabının genişliğine uyar ve kap boyutu değişince yeniden boyutlanır.
• Noktalar klavyeyle odaklanmaz; tüm veri tabloda vardır.

Yönergeler

Halka en fazla 5 parça

Beşten fazla dilim ayırt edilemez. Çok parça varsa çubuk grafik kullanın.

Kategorilerin payı

YapınDört parça: dilimler okunuyor.

Kategorilerin payı

YapmayınSekiz küçük dilim: parçalar ayırt edilemiyor.

Çubuk ekseni sıfırdan başlar

Çubuğun uzunluğu değeri anlatır. Chart bunu sizin için sıfırdan başlatır; değer eksenini kırpmayın.

Aylık değerler

YapınEksen sıfırdan başlıyor; oranlar doğru okunuyor.

Aylık değerler

YapmayınEksen 50'den başlasa küçük fark büyük görünür; Chart bunu desteklemez, çizgi grafik kullanın.

Renk tek başına anlatmasın

Birden çok seride çizgilerin sembolü ve biçimi, çubukların deseni farklıdır. Anlamı yalnızca renge yüklemeyin; seri adlarını gösterge ve tabloda yazın.

Aylık değerler

YapınSeriler sembol, çizgi biçimi ve adla ayrışıyor.

Kırmızı çizgi artışı, mavi çizgi azalışı gösterir.

YapmayınBaşlıkta yalnızca "kırmızı çizgi" yazması: anlam renge bağlı.

İçerik

• Başlığı grafiğin ne gösterdiğini söyleyen bir isim öbeği yapın: “Aylık değerler”.
• description iki cümleyi geçmesin; dönem ve birimi yazın.
• Seri adları kısa olsun: “Birinci seri”, “Kategori A”.
• Sayıları formatValue ile birimiyle biçimlendirin; ham sayıyı birimsiz bırakmayın.
• Boş durum metnini ne yapılacağını söyleyecek biçimde değiştirebilirsiniz: emptyLabel.

İlgili bileşenler

• StatCard: Tek bir sayı ve küçük eğilim çizgisi için.
• Card: Grafiği başlık ve işlemlerle bir yüzeyde toplamak için.
• Button: Tablo düğmesi bu bileşenle çizilir.