PatternDisponible

Chart

Gráficos adaptables con series del tema y alternativa textual.

Components used per week

Week 1: 4; Week 2: 7; Week 3: 10; Week 4: 12.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/chart.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@/components/ui/chart';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';

export default function Demo() {
  const data = [
    { week: 'W1', count: 4 },
    { week: 'W2', count: 7 },
    { week: 'W3', count: 10 },
    { week: 'W4', count: 12 },
  ];
  return (
    <div className="w-full">
      <p className="mb-4 bl-type-label">Components used per week</p>
      <ChartContainer
        config={{ count: { label: 'Components', color: 'var(--primary)' } }}
        className="h-56 w-full"
      >
        <BarChart accessibilityLayer data={data}>
          <CartesianGrid vertical={false} />
          <XAxis dataKey="week" />
          <YAxis allowDecimals={false} />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Bar dataKey="count" fill="var(--color-count)" radius={4} />
        </BarChart>
      </ChartContainer>
      <p className="bl-type-small">
        Week 1: 4; Week 2: 7; Week 3: 10; Week 4: 12.
      </p>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
config	ChartConfig	—	Names, icons, and colors for each series.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.