Gráfico de barras horizontales
Comparar categorías con nombres largos.
Definición
Un gráfico de barras horizontales pone una barra por categoría, con la longitud medida desde cero, y el rótulo a la izquierda en horizontal. Es la forma natural de un ranking cuando los nombres son largos o las categorías son muchas. Se usa para carteras, regiones, productos o cualquier lista que se ordena por un valor.
- Datos
- label · value
- Buena para
- Ordenar categorías por un valor y leer su nombre entero sin girar la cabeza.
- Evítala cuando
- Cuando el eje de categorías es el tiempo: los periodos se leen de izquierda a derecha, no de arriba abajo.
- Se lee bien
- Entre 2 y 30 elementos; dibuja hasta 300
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
label · opcional | string | La banda: columns.category, label o y. Los aliases deben nombrar la misma columna. Sin binding se conserva la inferencia por nombre y tipo. |
value · opcional | number | La longitud desde cero: columns.value o x. Admite valores negativos y conserva zero-fill para vacíos; un valor presente no finito falla. Sin binding se conserva la inferencia; sin medida inferible no dibuja. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Las categorías tienen nombres largos o son muchas?
Con pocas categorías de rótulo corto, las columnas verticales son igual de claras y ocupan menos ancho.
Sí: quédate con gráfico de barras horizontales
No: usa Gráfico de barras verticales
¿Importa la longitud de cada barra desde cero?
Si los valores están muy juntos y lejos del cero, los puntos permiten un eje que no empieza en cero sin engañar.
Sí: quédate con gráfico de barras horizontales
No: usa Gráfico de puntos
¿Cada categoría tiene un solo valor?
Si cada categoría se reparte en partes, las barras apiladas enseñan el total y su composición a la vez.
Sí: quédate con gráfico de barras horizontales
No: usa Barras apiladas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('horizontalbar');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Admite valores negativos?
Sí. La barra sigue midiéndose desde el cero, que siempre entra en el eje, y crece hacia la izquierda.
¿Por qué horizontal y no vertical?
Porque el argumento es el ranking y el rótulo va entero y horizontal, sin cortarse ni girarse. Con nombres largos es la diferencia entre leerlos o no.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «quién va primero»
Gráfico de rankingcambios de puesto a lo largo del tiempo
Gráfico de puntos de Clevelandcomparar valores ordenados con poca tinta
Importancia de variablesqué variables pesan más en un modelo
Gráfico de piruletacomparar valores con menos tinta que barras
Cuadro de eliminatoriascruces y avance de un torneo
Curva de la ballenaqué clientes aportan o restan beneficio