Barras y línea combinadas
Una cifra absoluta junto a su tasa.
Definición
El gráfico de barras y línea combinadas pone una magnitud en barras, leída desde el cero en el eje izquierdo, y una tasa en línea, leída contra el eje derecho, sobre los mismos periodos. Sirve para enseñar juntas una cifra absoluta y su ritmo: ingresos y crecimiento, ventas y margen. Las dos escalas son independientes, así que el punto donde se cruzan no significa nada.
- Datos
- category · value · y
- Buena para
- Enseñar una cifra absoluta y su tasa en los mismos periodos.
- Evítala cuando
- Cuando las dos series tienen la misma unidad: basta un eje, y el segundo solo confunde.
- 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 eje X (la primera columna de texto). Si no hay ninguna, las barras salen sin rótulo. |
value · opcional | number | 1.ª numérica POR POSICIÓN: la altura de la barra, eje izquierdo. |
y · opcional | number | 2.ª numérica por posición: la línea, eje DERECHO. Con menos de dos numéricas devuelve [] y cae a su demo. |
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 dos series tienen unidades distintas?
Si las dos se miden en la misma unidad, unas barras agrupadas las comparan en un solo eje.
Sí: quédate con barras y línea combinadas
No: usa Barras agrupadas
¿Hay una sola magnitud con su tasa?
Si son varias series que crecen a ritmos distintos, las líneas en base 100 las ponen en el mismo punto de partida.
Sí: quédate con barras y línea combinadas
No: usa Líneas en base 100
¿Importa la cifra absoluta?
Si solo cuenta la evolución de una medida, un gráfico de líneas basta.
Sí: quédate con barras y línea combinadas
No: usa Gráfico de líneas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('barline');
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
¿Qué columnas usa?
Una de texto para el eje horizontal y dos numéricas por posición: la primera da la altura de las barras, en el eje izquierdo; la segunda, la línea, en el eje derecho.
¿Por qué no hay que leer los cruces?
Porque cada serie tiene su escala. Dónde se cruzan la línea y las barras depende de cómo se ajustan los ejes, no de los datos.
¿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 480 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «cómo cambia en el tiempo»
Velocidad del equipotrabajo completado por sprint
Gráfico de áreasuna medida en el tiempo con el volumen destacado
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Bandas de Bollingerprecio frente a su rango habitual de variación
Gráfico con selector de rangoexplorar un tramo de una serie larga
Burndowntrabajo pendiente frente al plan de un sprint