BarChart

Compara categorías: agrupadas o apiladas, verticales u horizontales, con valores en las barras.

import { BarChart } from '@alea/pro';

Ejemplos

Barras agrupadas

Compara dos años por trimestre.

Revenue (k$)

2026 beat 2025 in every quarter.

2025
2026

Horizontales y apiladas

Los nombres de categoría largos se leen mejor en horizontal; valores sobre las barras.

Users by plugin

Free
Pro

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-border…
--alea-focus…
--alea-text…
--alea-text-muted…

Type

--alea-font-family-body…

Motion

--alea-motion-duration-fast…
--alea-motion-duration-slower…
--alea-motion-spring…

Props

`BarChart` props

Compara montos entre categorías: agrupadas, apiladas u horizontales.

Prop	Tipo	Por defecto	Descripción
`data`obligatoria	`ChartRow[]`	-	Filas de datos, una por valor de x o categoría.
`series`obligatoria	`Series[]`	-	Las series a dibujar: key en cada fila, label para la leyenda, color opcional.
`x`obligatoria	`string`	-	La clave del eje x (fechas, meses, categorías).
`className`	`string`	-	Clases extra para el elemento raíz.
`description`	`ReactNode`	-	Una oración sobre lo que muestran los datos; se lee antes del gráfico.
`height`	`number`	`260`	Altura del gráfico en px. Por defecto 260.
`horizontal`	`boolean`	-	Las barras van de lado (bien para nombres de categoría largos).
`isLoading`	`boolean`	-	Muestra un relleno con brillo mientras cargan los datos.
`showTable`	`boolean`	`true`	Muestra el botón de tabla. Por defecto true.
`showValues`	`boolean`	-	Muestra el valor en cada barra.
`stacked`	`boolean`	-	Apila las series en una barra.
`title`	`ReactNode`	-	El título que se muestra arriba y que leen los lectores de pantalla.
`valueFormat`	`((v: number) => string)`	-	Da formato a los valores (eje, tooltip, tabla).
`xFormat`	`((x: string \| number) => string)`	-	Da formato a las etiquetas de x.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Estados: Keyboard focus
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-chart-svgwrap.alea-chart-svg.alea-chart-grid.alea-chart-axis.alea-chart-bargroup.alea-chart-bar.alea-chart-value
Atributos data: data-dim

Igual que LineChart: resumen, lectura por teclado y vista de tabla.

Teclado

Tecla	Acción
`Flechas`	Lee cada categoría

Qué hacer y qué evitar

Hacer

Empieza las barras en cero.
Usa barras horizontales para nombres de categoría largos.

Evitar

No uses más de cuatro series en un gráfico agrupado.
No uses 3D ni degradados en las barras.