Barras mensuales
Una sola serie por periodo.
Definición
Unas barras mensuales ponen una barra por mes o periodo, medida desde cero, con su presupuesto como referencia. Se lee la altura de cada barra frente a su referencia. Es la forma más simple de enseñar ventas, gasto o volumen mes a mes.
- Datos
- label · value · target
- Buena para
- Comparar una cifra por periodo contra su presupuesto.
- Evítala cuando
- Cuando lo que importa es la tendencia a lo largo de muchos periodos: una línea la sigue mejor.
- 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é |
|---|---|---|
label · opcional | string | La PRIMERA columna de texto: la banda del eje. |
value · opcional | number | PRIMERA columna numérica por orden: la altura de la barra y lo único que fija el eje Y. |
target · opcional | number | SEGUNDA columna numérica: el presupuesto de referencia. Con menos de dos numéricas la pieza devuelve [] y 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
¿Hay una sola cifra por periodo?
Si cada periodo tiene varias series que comparar, se agrupan las barras.
Sí: quédate con barras mensuales
No: usa Barras agrupadas
¿Te interesa el valor de cada periodo más que la tendencia?
Si importa la evolución a lo largo del tiempo, la línea la enseña con menos tinta.
Sí: quédate con barras mensuales
No: usa Gráfico de líneas
¿Basta con ver la cifra frente al presupuesto?
Si hay que explicar de dónde sale cada desvío, se descompone.
Sí: quédate con barras mensuales
No: usa Análisis de desviaciones
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('monthly-bar');
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
¿Para qué sirve la segunda columna numérica?
Es el presupuesto de referencia. Con menos de dos columnas numéricas la pieza no dibuja.
¿Por qué el eje empieza siempre en cero?
Porque la longitud de la barra es el dato: cortarla exageraría las diferencias.
¿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»
Gráfico de barras verticalescomparar valores entre pocas categorías
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