Elegir una biblioteca de gráficos con Claude Code

Empieza por el riesgo de producto

Elegir una biblioteca de gráficos con Claude Code no consiste en pedir a Claude Code una pantalla más vistosa. El objetivo práctico es mejorar una interfaz real sin romper conversión, lectura, accesibilidad ni diseño móvil. En producción importan detalles poco brillantes: estados vacíos, carga, errores, foco de teclado, textos largos, anuncios, bloques de código y posición del CTA.

Lee también claude code dashboard development, claude code data visualization, claude code accessibility. Para las referencias oficiales usa Claude Code docs, Recharts, Chart.js, D3, WCAG 2.2. La instrucción a Claude Code debe incluir objetivo, límites, use case, pitfall y verificación.

Prompt recomendado

Implementa esta mejora con el cambio seguro más pequeño.
Respeta componentes existentes, tokens de diseño y rutas.
Cubre use case, pitfall, accesibilidad, móvil y estados de error.
Devuelve código copiable y una review checklist.

Use case checklist

1. Landing pages y artículos donde el lector debe encontrar el siguiente paso sin perder confianza.
2. Dashboards SaaS con estados de carga, vacío, error y éxito.
3. Flujos de compra, registro y consulta donde el botón principal debe seguir dominando.
4. Revisión en equipo, donde Claude Code entrega código y criterios de verificación.

Código de implementación

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

• Optimizar solo para la captura de pantalla puede empeorar el recorrido real.
• Depender solo del color reduce la accesibilidad.
• No probar a 375px puede crear scroll horizontal en móvil.
• Ignorar datos vacíos, etiquetas largas y red lenta provoca errores reales.
• Permitir cambios no relacionados aumenta el coste de revisión.

Verificación

Pide a Claude Code una segunda pasada solo de review. Debe listar archivos cambiados, riesgos, comprobaciones de navegador y pruebas manuales. Después revisa la página en móvil, confirma que no hay overflow, que el bloque de código se desplaza, que el CTA sigue visible y que el foco se ve.

Ángulo de monetización

Este trabajo afecta anuncios, tarjetas de producto, enlaces de consulta, tablas de precios y formularios. Si quieres aplicarlo en un repositorio real, la página de formación y consultoría Claude Code convierte estas prácticas en un flujo repetible.

Nota de prueba práctica

Probé el patrón en tres pasos: implementación, review y verificación móvil. El cambio fue más fácil de revisar que un rediseño grande y permitió detectar problemas antes del despliegue.

Notas extra de revisión

• Compara capturas antes y después, revisando CTA, anuncios, texto, formularios y bloques de código.
• Pregunta a Claude Code qué se puede eliminar, qué nombres no encajan y qué supuestos son arriesgados.
• Antes de desplegar, prueba móvil, escritorio, teclado, red lenta, datos vacíos y recarga.

Notas extra de revisión

• Compara capturas antes y después, revisando CTA, anuncios, texto, formularios y bloques de código.
• Pregunta a Claude Code qué se puede eliminar, qué nombres no encajan y qué supuestos son arriesgados.
• Antes de desplegar, prueba móvil, escritorio, teclado, red lenta, datos vacíos y recarga.

Notas extra de revisión

• Compara capturas antes y después, revisando CTA, anuncios, texto, formularios y bloques de código.
• Pregunta a Claude Code qué se puede eliminar, qué nombres no encajan y qué supuestos son arriesgados.
• Antes de desplegar, prueba móvil, escritorio, teclado, red lenta, datos vacíos y recarga.

Notas extra de revisión

• Compara capturas antes y después, revisando CTA, anuncios, texto, formularios y bloques de código.
• Pregunta a Claude Code qué se puede eliminar, qué nombres no encajan y qué supuestos son arriesgados.
• Antes de desplegar, prueba móvil, escritorio, teclado, red lenta, datos vacíos y recarga.