Choisir une bibliothèque de graphiques avec Claude Code

Commencer par le risque produit

Choisir une bibliothèque de graphiques avec Claude Code ne signifie pas demander à Claude Code de rendre l’écran plus joli. Le but est d’améliorer une interface réelle sans casser la conversion, la lisibilité, l’accessibilité ou le mobile. En production, les détails comptent: état vide, chargement, erreur, focus clavier, textes longs, publicités, blocs de code et position du CTA.

À lire avec claude code dashboard development, claude code data visualization, claude code accessibility. Les références officielles sont Claude Code docs, Recharts, Chart.js, D3, WCAG 2.2. La demande à Claude Code doit préciser l’objectif, les limites, les use case, les pitfall et la vérification.

Prompt conseillé

Implémente cette amélioration avec le plus petit changement sûr.
Respecte les composants, les design tokens et les routes existantes.
Couvre use case, pitfall, accessibilité, mobile et états d'erreur.
Retourne du code copiable et une review checklist.

Use case checklist

1. Pages d’atterrissage et articles où le lecteur doit voir l’étape suivante sans pression.
2. Dashboards SaaS avec chargement, état vide, erreur et succès.
3. Achat, inscription et demande de rendez-vous où le bouton principal reste prioritaire.
4. Revue en équipe, avec code et critères de vérification fournis par Claude Code.

Code d’implémentation

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

• Optimiser uniquement la capture d’écran peut dégrader le parcours réel.
• Dépendre seulement de la couleur ou du mouvement réduit l’accessibilité.
• Ne pas tester à 375px peut créer un débordement horizontal.
• Oublier les données vides, les longs libellés et le réseau lent provoque des bugs.
• Laisser Claude Code modifier des fichiers sans rapport rend la revue difficile.

Vérification

Demandez une seconde passe de review. Claude Code doit lister fichiers modifiés, risques, vérifications navigateur et contrôles manuels. Ensuite ouvrez la page en largeur mobile, vérifiez l’absence d’overflow, le défilement des blocs de code, le CTA et le focus clavier.

Angle monétisation

Ce sujet touche les annonces, cartes produit, liens de consultation, tarifs et formulaires. Pour l’appliquer dans un vrai dépôt, la page formation et conseil Claude Code transforme cette méthode en processus répétable.

Note de test réel

J’ai testé le flux en trois temps: implémentation, review, contrôle mobile. Le diff reste lisible et les problèmes d’accessibilité apparaissent avant le déploiement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.

Notes de revue supplémentaires

• Comparez les captures avant/après et vérifiez CTA, annonces, texte, formulaires et blocs de code.
• Demandez à Claude Code ce qui peut être supprimé, quels noms ne suivent pas le projet et quelles hypothèses sont risquées.
• Avant déploiement, testez mobile, desktop, clavier, réseau lent, données vides et rechargement.