📌 Recharts – Temel Kullanım ve Dinamik Grafikler

Recharts, React uygulamalarında kolayca veri görselleştirmesi yapmamızı sağlayan güçlü bir kütüphanedir. Grafikler responsive, etkileşimli ve özelleştirilebilir şekilde tasarlanabilir.

1️⃣ ResponsiveContainer

ResponsiveContainer, grafiklerin ekran boyutuna uyumlu olmasını sağlar.

<ResponsiveContainer width="100%" height={300}>
  {/* Grafik bileşenleri buraya */}
</ResponsiveContainer>

Önemli: width="100%" ve height değerleriyle ekran boyutuna göre otomatik uyum sağlar.

2️⃣ AreaChart (Alan Grafiği)

AreaChart, zaman serisi veya sürekli veri görselleştirmeleri için kullanılır.

<ResponsiveContainer height={300} width="100%">
  <AreaChart data={fakeData}>
    <XAxis dataKey="label" tick={{ fill: colors.text }} tickLine={{ stroke: colors.text }} />
    <YAxis unit="$" tick={{ fill: colors.text }} tickLine={{ stroke: colors.text }} />
    <CartesianGrid strokeDasharray="4" />
    <Tooltip contentStyle={{ backgroundColor: colors.background }} />
    <AreadataKey="totalSales"
      type="monotone"
      stroke={colors.totalSales.stroke}
      fill={colors.totalSales.fill}
      strokeWidth={2}
      name="Total sales"
      unit="$"
    />
  </AreaChart>
</ResponsiveContainer>

Ekstra ipuçları:

• unit: Y eksenine birim ekler ($, % vb.)
• type="monotone": Alan eğrisinin düzgün görünmesini sağlar
• Tooltip ve CartesianGrid: Etkileşim ve okunabilirlik sağlar

3️⃣ PieChart (Pasta Grafiği)

PieChart, kategori bazlı dağılımları göstermek için kullanılır.

<ResponsiveContainer width="100%" height={240}>
  <PieChart>
    <Piedata={data}
      nameKey="duration"
      dataKey="value"
      innerRadius={85}
      outerRadius={110}
      cx="40%"
      cy="50%"
      paddingAngle={3}
    >
      {data.map((entry) => (
        <Cell fill={entry.color} stroke={entry.color} key={entry.duration} />
      ))}
    </Pie>
    <Tooltip />
    <LegendverticalAlign="middle"
      align="right"
      width="30%"
      layout="vertical"
      iconType="circle"
    />
  </PieChart>
</ResponsiveContainer>

Önemli: Cell ile her bir pasta diliminin rengi özelleştirilebilir.