React İle Recharts Kütüphanesi Kullanarak İnteraktif Veri Grafiği Nasıl Yapılır?

Gereksinimler ve Ortam Kurulumu

Projeye başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün (20.x veya üzeri) yüklü olduğundan emin olun. React projenizi oluşturmak için Vite kullanmanızı öneririz, çünkü Vite modern React uygulamaları için en hızlı geliştirme ortamını sunar.

Öncelikle terminalinizde aşağıdaki komutu çalıştırarak projenizi oluşturun ve gerekli bağımlılıkları yükleyin:

# Proje dizinini oluşturun
npm create vite@latest veri-gorsellestirme -- --template react
cd veri-gorsellestirme
npm install
# Recharts kütüphanesini projeye dahil edin
npm install recharts

Bu komutlar, projenizin temel yapısını kuracak ve veri görselleştirme için gerekli olan Recharts kütüphanesini node_modules klasörünüze ekleyecektir. Kurulumun başarıyla tamamlandığını doğrulamak için package.json dosyanızda "recharts" bağımlılığını kontrol edebilirsiniz.

Veri Setini Hazırlama ve Bileşen Yapısı

Grafiklerin düzgün çalışması için verinin doğru formatta olması kritiktir. Recharts genellikle dizi içerisinde nesneler (array of objects) şeklinde veri bekler. Bu veri yapısı, JSON formatına oldukça yakındır ve API'lerden gelen verilerle kolayca eşleşir.

Örnek bir veri seti oluşturalım ve bunu grafiğimize nasıl aktaracağımızı inceleyelim:

const veri = [
  { isim: 'Ocak', satis: 4000, gider: 2400 },
  { isim: 'Şubat', satis: 3000, gider: 1398 },
  { isim: 'Mart', satis: 2000, gider: 9800 },
  { isim: 'Nisan', satis: 2780, gider: 3908 },
];

Bu veri yapısı, her bir nesnenin bir veri noktasını temsil ettiği, isim (X ekseni etiketi), satis ve gider (Y ekseni değerleri) anahtarlarını içeren standart bir yapıdır.

Recharts ile İlk Çizgi Grafiğini Oluşturma

Grafik oluştururken en temel bileşenlerden biri LineChart'tır. Bu bileşen, verilerin zaman içerisindeki değişimini göstermek için idealdir. Aşağıdaki kod bloğu, basit bir çizgi grafiğinin nasıl render edileceğini gösterir:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const GrafikBileseni = () => (
  
    
    
    
    
    
    
  
);

Burada CartesianGrid grafiğin arka planındaki ızgarayı, Tooltip ise fare imleci üzerine geldiğinde açılan veri detay kutusunu sağlar. dataKey özelliği, verinizdeki hangi anahtarın kullanılacağını belirtir.

İnteraktif Özellikler ve Özelleştirme

Grafikleri interaktif hale getirmek, kullanıcı deneyimini artırır. Recharts, Tooltip içeriğini özelleştirmenize ve grafik üzerinde tıklama olaylarını (onClick) yakalamanıza olanak tanır. Aşağıdaki örnekte, bir çubuk grafiğine (BarChart) tıklama özelliği ekliyoruz:

import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';

const TiklanabilirGrafik = ({ veri }) => {
  const tikla = (data) => alert(`${data.isim} ayı satış: ${data.satis}`);
  
  return (
    
      
      
      
      
    
  );
};

Bu yapı sayesinde kullanıcı grafikteki bir çubuğa tıkladığında, o veri noktasına ait detayları bir modal penceresi veya uyarı kutusu ile gösterebilirsiniz. Bu, dashboard uygulamaları için oldukça yaygın bir kullanım senaryosudur.

Grafik Türleri Karşılaştırma Tablosu

Responsive (Duyarlı) Tasarım Uygulama

Web uygulamalarında grafiklerin farklı ekran boyutlarına uyum sağlaması gerekir. Recharts'ın ResponsiveContainer bileşeni, grafiğin kapsayıcı elemanın boyutuna göre otomatik olarak ölçeklenmesini sağlar.

import { ResponsiveContainer, AreaChart, Area } from 'recharts';

const ResponsiveGrafik = ({ veri }) => (
  

    
      
        
      
    
  
);

ResponsiveContainer kullanırken, grafiğin içinde bulunduğu kapsayıcının (div) bir yüksekliğe (height) sahip olduğundan emin olmalısınız; aksi takdirde grafik görünmeyecektir.

Güvenlik Uyarısı: Kullanıcıdan gelen verileri grafiklerde gösterirken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Eğer veriler API'den geliyorsa, veriyi render etmeden önce mutlaka temizleyin (sanitize). Doğrudan kullanıcı girdisini Tooltip veya etiketlerde kullanmaktan kaçının.

Sıkça Sorulan Sorular

Recharts performans sorunu yaşatır mı?

Recharts, SVG tabanlı bir kütüphanedir. Eğer binlerce veri noktasını aynı anda render etmeye çalışırsanız performans düşebilir. Bu durumda veriyi önceden filtrelemek veya örneklemek (sampling) en iyi yöntemdir.

Grafik renklerini nasıl değiştiririm?

Recharts bileşenlerinde stroke (çizgi rengi) ve fill (dolgu rengi) özelliklerini kullanarak CSS renk kodları veya değişkenleri ile kolayca özelleştirme yapabilirsiniz.

Grafiği PDF veya resim olarak kaydedebilir miyim?

Recharts doğrudan dışa aktarma özelliği sunmaz. Ancak, html2canvas gibi kütüphaneler kullanarak grafiği içeren DOM elementini resme dönüştürebilirsiniz.

Mobil cihazlarda Tooltip kullanımı nasıl iyileştirilir?

Mobil cihazlarda dokunmatik etkileşim için Tooltip bileşeninin trigger="click" özelliğini kullanarak kullanıcının üzerine dokunmasıyla veriyi görmesini sağlayabilirsiniz.

Recharts ile animasyonları nasıl kapatırım?

Tüm grafik bileşenlerinde isAnimationActive={false} prop'unu kullanarak animasyonları devre dışı bırakabilir ve render süresini kısaltabilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce hata yönetimi (error handling) ve veri doğrulama süreçlerini projenizin mimarisine göre yapılandırmanız önerilir.

Recharts ile İleri Seviye Veri Dinamikleştirme: ComposedChart Kullanımı

Temel grafik türlerinin ötesine geçmek istediğinizde, Recharts'ın sunduğu ComposedChart bileşeni en güçlü aracınız haline gelir. Bu bileşen, aynı grafik üzerinde çizgi, sütun ve alan grafiklerini birleştirmenize olanak tanır. Özellikle finansal veriler veya karmaşık metriklerin karşılaştırıldığı dashboard tasarımlarında oldukça kritiktir.

Aşağıdaki örnekte, bir e-ticaret sitesinin günlük satış miktarı ile kâr oranını aynı grafik üzerinde nasıl gösterebileceğinizi inceleyelim:

import { ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Pzt', satis: 4000, kar: 2400 },
  { name: 'Sal', satis: 3000, kar: 1398 },
  { name: 'Çar', satis: 2000, kar: 9800 },
];

const AdvancedChart = () => (
  
    
      
      
      
      
      
      
      
    
  
);

Grafiklerde Hata Ayıklama ve Veri Doğrulama Stratejileri

Recharts ile çalışırken karşılaşılan en yaygın sorunlar genellikle veri formatındaki uyumsuzluklardan kaynaklanır. Grafiklerin render edilmemesi veya boş görünmesi durumunda izlemeniz gereken hata ayıklama adımları şunlardır:

• Veri Tipi Kontrolü: Recharts, sayısal değerlerin string değil, number tipinde olmasını bekler. API'den gelen verileri mutlaka parseFloat() veya Number() ile dönüştürün.
• Eksik Veri Yönetimi: Veri setinizde null veya undefined değerler varsa, grafik kırılabilir. Bu durumları 0 ile eşitleyerek veya veriyi filtreleyerek yönetin.
• Container Boyutlandırma: ResponsiveContainer kullanırken, ebeveyn elementin (parent) mutlaka tanımlı bir yüksekliğe sahip olduğundan emin olun. Aksi takdirde grafik görünmez.

Özellikle büyük veri setleri ile çalışırken, verinin doğruluğunu kontrol etmek için şu basit yardımcı fonksiyonu kullanabilirsiniz:

const sanitizeData = (data) => {
  return data.map(item => ({
    ...item,
    value: item.value ? Number(item.value) : 0
  }));
};

// Kullanımı:
//  ... 

Bu yöntem, üretim ortamında uygulamanızın beklenmedik veri girişleri nedeniyle çökmesini engeller ve kullanıcıya her zaman tutarlı bir görsel deneyim sunar.

Sonuç

React ile Recharts kullanarak veri görselleştirme süreci, doğru bileşen seçimi ve veri yapısı ile oldukça verimli bir deneyime dönüşür. Bu rehberde; kurulumdan başlayarak, temel grafik oluşturma, interaktif özellikler ekleme ve responsive tasarım prensiplerini adım adım inceledik. Bir sonraki adım olarak, kendi gerçek verilerinizle bir dashboard tasarlayabilir ve Recharts'ın sunduğu ComposedChart gibi daha gelişmiş bileşenleri keşfedebilirsiniz.