Chart-Bibliotheken mit Claude Code auswählen

Mit dem Produktrisiko beginnen

Chart-Bibliotheken mit Claude Code auswählen bedeutet nicht, Claude Code um eine hübschere Oberfläche zu bitten. Ziel ist eine echte Verbesserung, ohne Conversion, Lesbarkeit, Barrierefreiheit oder mobile Darstellung zu beschädigen. In der Praxis zählen leere Zustände, Ladezustände, Fehler, Tastaturfokus, lange Texte, Anzeigen, Codeblöcke und die Position des CTA.

Lies dazu auch claude code dashboard development, claude code data visualization, claude code accessibility. Offizielle Quellen: Claude Code docs, Recharts, Chart.js, D3, WCAG 2.2. Die Anfrage an Claude Code sollte Ziel, Grenzen, use case, pitfall und Prüfung enthalten.

Empfehlenswerter Prompt

Implementiere diese Verbesserung mit der kleinsten sicheren Änderung.
Respektiere bestehende Komponenten, Design Tokens und Routen.
Berücksichtige use case, pitfall, Barrierefreiheit, mobile Ansicht und Fehlerzustände.
Gib kopierbaren Code und eine review checklist zurück.

Use case checklist

1. Landingpages und Artikel, bei denen der nächste Schritt sichtbar sein muss.
2. SaaS-Dashboards mit Ladezustand, leerem Zustand, Fehler und Erfolg.
3. Checkout, Registrierung und Beratung, bei denen der Hauptbutton klar bleibt.
4. Team-Reviews, in denen Claude Code Code und Prüfkriterien liefert.

Implementierungscode

npm i recharts chart.js react-chartjs-2 d3
npm i -D @types/d3

"use client";

import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

type Point = {
  date: string;
  revenue: number | null;
  orders: number;
};

const money = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

function normalize(points: Point[]) {
  return points
    .filter((point) => Number.isFinite(Date.parse(point.date)))
    .sort((a, b) => Date.parse(a.date) - Date.parse(b.date))
    .map((point) => ({
      ...point,
      label: new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(
        new Date(point.date),
      ),
      revenue: point.revenue ?? 0,
      orders: Number.isFinite(point.orders) ? point.orders : 0,
    }));
}

export function RevenueChart({ data }: { data: Point[] }) {
  const rows = normalize(data);

  if (rows.length === 0) {
    return <p role="status">No chart data yet. Check the date range or filters.</p>;
  }

  return (
    <figure aria-labelledby="revenue-chart-title">
      <h2 id="revenue-chart-title">Revenue trend</h2>
      <ResponsiveContainer width="100%" height={320}>
        <LineChart data={rows} margin={{ top: 16, right: 24, bottom: 8, left: 8 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis tickFormatter={(value) => money.format(Number(value))} />
          <Tooltip formatter={(value) => money.format(Number(value))} />
          <Line type="monotone" dataKey="revenue" stroke="#2563eb" strokeWidth={3} dot={false} />
        </LineChart>
      </ResponsiveContainer>
      <figcaption>Data is sorted by date and null revenue is rendered as zero.</figcaption>
    </figure>
  );
}

Pitfall checklist

• Nur für den Screenshot zu optimieren verschlechtert oft den echten Nutzerpfad.
• Bedeutung nur über Farbe oder Bewegung zu vermitteln schwächt Barrierefreiheit.
• Ohne Test bei 375px entsteht schnell horizontaler Scroll.
• Leere Daten, lange Labels und langsame Netze müssen geprüft werden.
• Unbezogene Dateiänderungen machen das Review teuer.

Prüfung

Fordere eine zweite reine Review-Runde von Claude Code an. Sie soll geänderte Dateien, Risiken, Browserchecks und manuelle Tests nennen. Danach im mobilen Viewport prüfen: kein Overflow, Codeblock scrollt, CTA sichtbar, Fokus sichtbar.

Monetarisierung

Dieses Thema wirkt auf Anzeigen, Produktkarten, Beratungslinks, Preistabellen und Formulare. Wer es in einem echten Repository einführen möchte, kann über Claude Code Training und Beratung einen wiederholbaren Ablauf aufbauen.

Praxistest

Ich habe Umsetzung, Review und mobilen Test getrennt. Dadurch blieb der Diff klein und Layout- sowie A11y-Probleme wurden vor dem Deployment sichtbar.

Zusätzliche Review-Punkte

• Vergleiche Vorher/Nachher-Screenshots und prüfe CTA, Anzeigen, Text, Formulare und Codeblöcke.
• Frage Claude Code, was entfernt werden kann, welche Namen nicht passen und welche Annahmen riskant sind.
• Vor dem Deployment mobile Ansicht, Desktop, Tastatur, langsames Netz, leere Daten und Reload testen.

Zusätzliche Review-Punkte

• Vergleiche Vorher/Nachher-Screenshots und prüfe CTA, Anzeigen, Text, Formulare und Codeblöcke.
• Frage Claude Code, was entfernt werden kann, welche Namen nicht passen und welche Annahmen riskant sind.
• Vor dem Deployment mobile Ansicht, Desktop, Tastatur, langsames Netz, leere Daten und Reload testen.

Zusätzliche Review-Punkte

• Vergleiche Vorher/Nachher-Screenshots und prüfe CTA, Anzeigen, Text, Formulare und Codeblöcke.
• Frage Claude Code, was entfernt werden kann, welche Namen nicht passen und welche Annahmen riskant sind.
• Vor dem Deployment mobile Ansicht, Desktop, Tastatur, langsames Netz, leere Daten und Reload testen.

Zusätzliche Review-Punkte

• Vergleiche Vorher/Nachher-Screenshots und prüfe CTA, Anzeigen, Text, Formulare und Codeblöcke.
• Frage Claude Code, was entfernt werden kann, welche Namen nicht passen und welche Annahmen riskant sind.
• Vor dem Deployment mobile Ansicht, Desktop, Tastatur, langsames Netz, leere Daten und Reload testen.