Chart-Bibliotheken mit Claude Code verwenden

Chart-Bibliotheken mit Claude Code nutzen

In Dashboards und Berichtsansichten sind Diagramme unverzichtbar. Es gibt viele Bibliotheken wie Recharts, Chart.js und D3.js, und mit Claude Code können Sie schnell Chart-Komponenten erstellen, die die jeweiligen Stärken nutzen.

Bibliotheksauswahl

> Ich möchte Diagramme in einer React-App anzeigen.
> Implementiere Liniendiagramm, Balkendiagramm, Kreisdiagramm und Flächendiagramm.
> Verwende Recharts, responsiv und mit Dark-Mode-Unterstützung.

• Recharts: React-nativ, deklarativ und einfach
• Chart.js: Leichtgewichtig mit breiter Diagrammunterstützung
• D3.js: Maximale Flexibilität, höhere Lernkurve

Verschiedene Diagramme mit Recharts

// src/components/charts/SalesLineChart.tsx
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
  Legend, ResponsiveContainer
} from 'recharts';

interface DataPoint {
  date: string;
  revenue: number;
  orders: number;
}

export function SalesLineChart({ data }: { data: DataPoint[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">Umsatzverlauf</h3>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
          <XAxis dataKey="date" stroke="#9CA3AF" />
          <YAxis
            yAxisId="revenue"
            stroke="#3B82F6"
            tickFormatter={(v) => `€${(v / 1000).toFixed(0)}k`}
          />
          <YAxis yAxisId="orders" orientation="right" stroke="#10B981" />
          <Tooltip
            contentStyle={{
              backgroundColor: '#1F2937',
              border: 'none',
              borderRadius: '8px',
              color: '#fff',
            }}
            formatter={(value: number, name: string) =>
              name === 'revenue' ? `€${value.toLocaleString()}` : `${value} Bestellungen`
            }
          />
          <Legend />
          <Line yAxisId="revenue" type="monotone" dataKey="revenue" stroke="#3B82F6" name="Umsatz" strokeWidth={2} dot={false} />
          <Line yAxisId="orders" type="monotone" dataKey="orders" stroke="#10B981" name="Bestellungen" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Balkendiagramm

// src/components/charts/CategoryBarChart.tsx
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];

interface CategoryData {
  name: string;
  value: number;
}

export function CategoryBarChart({ data }: { data: CategoryData[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">Umsatz nach Kategorie</h3>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data} layout="vertical">
          <CartesianGrid strokeDasharray="3 3" horizontal={false} />
          <XAxis type="number" tickFormatter={(v) => `€${(v / 1000).toFixed(0)}k`} />
          <YAxis type="category" dataKey="name" width={100} />
          <Tooltip formatter={(v: number) => `€${v.toLocaleString()}`} />
          <Bar dataKey="value" radius={[0, 4, 4, 0]}>
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

Kreisdiagramm

// src/components/charts/DistributionPieChart.tsx
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];

interface SegmentData {
  name: string;
  value: number;
}

export function DistributionPieChart({ data, title }: { data: SegmentData[]; title: string }) {
  const total = data.reduce((sum, d) => sum + d.value, 0);

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">{title}</h3>
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            dataKey="value"
            label={({ name, value }) => `${name} ${((value / total) * 100).toFixed(0)}%`}
          >
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip formatter={(v: number) => `${v.toLocaleString()} (${((v / total) * 100).toFixed(1)}%)`} />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

Chart-Dashboard zusammenstellen

// src/app/dashboard/analytics/page.tsx
import { SalesLineChart } from '@/components/charts/SalesLineChart';
import { CategoryBarChart } from '@/components/charts/CategoryBarChart';
import { DistributionPieChart } from '@/components/charts/DistributionPieChart';

export default async function AnalyticsPage() {
  const [salesData, categoryData, channelData] = await Promise.all([
    fetchSalesData(),
    fetchCategoryData(),
    fetchChannelData(),
  ]);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold dark:text-white">Analyse-Dashboard</h1>
      <SalesLineChart data={salesData} />
      <div className="grid md:grid-cols-2 gap-6">
        <CategoryBarChart data={categoryData} />
        <DistributionPieChart data={channelData} title="Traffic nach Kanal" />
      </div>
    </div>
  );
}

Verwandte Artikel

Zur Datenvisualisierung allgemein siehe Implementierung der Datenvisualisierung, zur Dashboard-Erstellung Entwicklung von Admin-Dashboards.

Die offizielle Recharts-Dokumentation (recharts.org) bietet eine API-Referenz.