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

Pages d’atterrissage et articles où le lecteur doit voir l’étape suivante sans pression.
Dashboards SaaS avec chargement, état vide, erreur et succès.
Achat, inscription et demande de rendez-vous où le bouton principal reste prioritaire.
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>
  );
}

Choisir la bibliothèque : Recharts, Chart.js ou D3

Choisir une bibliothèque de graphiques « parce qu’elle est populaire » se paie plus tard. En production, on décide selon ce qu’on priorise : le type de graphique à afficher, la maîtrise de l’équipe, la liberté de design ou la taille du bundle. Même quand vous confiez le choix à Claude Code, passez ces trois candidats et faites-lui expliquer « pourquoi celui-ci » : la justification de la décision reste tracée.

Bibliothèque	Situations adaptées	Points d’attention
Recharts	Sortir vite des graphiques classiques en React : cartes de KPI, courbe de revenus	Mal à l’aise avec les rendus sur mesure complexes ou des milliers de points
Chart.js	Utilisable hors React, rendu léger sur Canvas	Ce n’est pas du DOM : l’accessibilité doit être complétée séparément
D3	Construire finement une visualisation de données sur mesure	Coût d’apprentissage élevé, davantage de code et de revue

La première décision est simple. S’il s’agit juste de sortir des graphiques classiques (courbe, barre, secteur) dans un dashboard React, Recharts suffit. Pour des pages hors React ou des graphiques lourds de plusieurs milliers de points, le rendu Canvas de Chart.js est plus stable. N’envisagez D3 que lorsque vous avez besoin d’une expression animée sur mesure ou d’une figure soignée façon rapport. En cas d’hésitation, fabriquez d’abord quelque chose qui marche avec Recharts, puis migrez quand l’expression devient insuffisante : il y a moins de retours en arrière.

Quand Masa l’a essayé sur un petit dashboard, partir d’emblée sur D3 a fait gonfler l’implémentation au point que la revue ne suivait plus. Séparer les rôles — Recharts pour les graphiques classiques, D3 pour la seule figure spéciale — rend la maintenance globale bien plus simple. Demandez à Claude Code « ce graphique en Recharts, seulement celui-ci en D3 » en délimitant le périmètre, et vous éviterez qu’il n’ajoute des bibliothèques inutilement riches.

Toujours prévoir l’état vide, le chargement et l’erreur

Le plus gros des incidents avec les graphiques vient de l’affichage quand les données n’existent pas encore. Si vous construisez sans penser aux cas « l’API a renvoyé un tableau vide », « l’agrégat est à zéro », « la récupération a échoué », vous montrez au lecteur un graphique réduit à ses axes, une zone toute blanche, ou au pire un écran planté. Dans l’exemple ci-dessus, renvoyer un message lorsque rows.length === 0 sert précisément à éviter cet incident.

En production, prévoyez au minimum ces quatre états. Pour le chargement, posez un substitut de même hauteur que le graphique afin que la mise en page ne saute pas. Pour l’état vide, indiquez la raison et l’action suivante (« pas encore de données »). Pour l’erreur, affichez la cause et un bouton de réessai. Et ne dessinez le graphique lui-même que dans le cas normal.

État	Affichage	Échec fréquent
Chargement	Squelette de même hauteur	Un simple spinner change la hauteur et fait sauter l’écran
Données vides	Raison et action suivante	Montrer un graphique réduit aux axes
Erreur	Cause et réessai	Une exception fait tomber toute la page
Normal	Le graphique	Ne pas distinguer « zéro élément » de « normal »

Quand vous sollicitez Claude Code, dites-lui dès le départ « affiche aussi l’état vide, le chargement et l’erreur, pas seulement le cas normal ». Sans cette consigne, l’IA tend à n’implémenter que le chemin de succès et bloquera à coup sûr avec les vraies données. Un graphique étant visuellement marquant, l’impression d’une casse l’est tout autant : soigner les états vaut l’investissement.

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.

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.

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.