Uso de bibliotecas de graficos con Claude Code

Aprovechando las bibliotecas de graficos con Claude Code

La visualizacion de graficos es indispensable en dashboards y pantallas de reportes. Existen muchas bibliotecas como Recharts, Chart.js y D3.js, y con Claude Code puedes construir rapidamente componentes de graficos aprovechando las caracteristicas de cada una.

Seleccion de la biblioteca

> Quiero mostrar graficos en una aplicacion React.
> Implementa graficos de lineas, barras, circular y de area.
> Usa Recharts con soporte responsivo y modo oscuro.

• Recharts: Nativo de React, declarativo y simple
• Chart.js: Ligero con amplia variedad de graficos
• D3.js: Maxima flexibilidad, mayor curva de aprendizaje

Diversos graficos con 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">Tendencia de ventas</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} pedidos`
            }
          />
          <Legend />
          <Line yAxisId="revenue" type="monotone" dataKey="revenue" stroke="#3B82F6" name="Ventas" strokeWidth={2} dot={false} />
          <Line yAxisId="orders" type="monotone" dataKey="orders" stroke="#10B981" name="Pedidos" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Grafico de barras

// 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">Ventas por categoria</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>
  );
}

Grafico circular

// 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>
  );
}

Ensamblaje del dashboard de graficos

// 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">Dashboard de analisis</h1>
      <SalesLineChart data={salesData} />
      <div className="grid md:grid-cols-2 gap-6">
        <CategoryBarChart data={categoryData} />
        <DistributionPieChart data={channelData} title="Trafico por canal" />
      </div>
    </div>
  );
}

Articulos relacionados

Para la visualizacion de datos en general, consulta implementacion de visualizacion de datos, y para la construccion de dashboards, consulta desarrollo de dashboard de administracion.

Puedes consultar la referencia de la API en la documentacion oficial de Recharts (recharts.org).