Gráfico de barras verticales
Comparar valores entre pocas categorías.
Definición
Un gráfico de barras verticales dibuja una barra por categoría con altura proporcional a su valor, medida desde el cero. Se compara por la longitud de las barras, por eso el eje no se puede cortar. Es la forma de partida para comparar pocas categorías: ventas por tienda, votos por opción, coste por partida.
- Datos
- category · value · target
- Buena para
- Decir qué categoría es mayor que otra cuando son pocas.
- Evítala cuando
- Cuando hay muchas categorías o rótulos largos: no caben bajo las barras.
- Se lee bien
- Entre 2 y 15 elementos; dibuja hasta 100
- 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é |
|---|---|---|
category · opcional | string | El rotulo de la banda: columns.category (tambien columns.x). Sin binding se infiere por nombre y despues por la primera columna de texto. |
value | number | La altura de la barra: columns.value (tambien columns.y). Sin binding se infiere por nombre y despues por posicion. Una columna declarada inexistente, conflictiva o no numerica falla con INVALID_BINDING; las celdas vacias conservan zero-fill. |
target · opcional | number | La barra de comparacion opcional: columns.target. Sin binding se infiere por nombre y despues por posicion; sin columna queda a cero. Se dibuja cuando bar.overlap es mayor que cero. |
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
¿Son pocas categorías con rótulos cortos?
Si son muchas o tienen nombres largos, las barras horizontales dan sitio a cada rótulo.
Sí: quédate con gráfico de barras verticales
No: usa Gráfico de barras horizontales
¿Las categorías son grupos y no periodos de tiempo?
Si el eje es el tiempo y lo que importa es la tendencia, un gráfico de líneas la sigue mejor.
Sí: quédate con gráfico de barras verticales
No: usa Gráfico de líneas
¿Cada categoría tiene un solo valor?
Si cada categoría tiene varias series que comparar, las barras agrupadas las ponen lado a lado.
Sí: quédate con gráfico de barras verticales
No: usa Barras agrupadas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('bar');
spec.data.rows = misFilas; // value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Puedo cortar el eje para que se noten las diferencias?
No. La barra se lee por su longitud desde el cero; cortar el eje exagera las diferencias.
¿En qué orden van las barras?
En el que decidas tú: el orden es una decisión del autor, no del dato. Ordenarlas de mayor a menor ayuda cuando no hay un orden natural.
¿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 «comparar cifras»
Barras mensualesuna sola serie por periodo
Economía unitariaingresos y costes de cada unidad vendida
Análisis de desviacionesreal frente a presupuesto por partida
Análisis de accretion/dilutionefecto de una operación en el beneficio por acción
Gráfico de flechascambio con dirección entre dos momentos
Serie con banda de referenciatu serie frente al rango de sus pares