Barras divergentes

Valores a ambos lados de un punto neutro.

Definición

Las barras divergentes alinean cada pregunta de una encuesta de acuerdo en torno a un eje central, la frontera entre desacuerdo y acuerdo: el desacuerdo se extiende hacia un lado y el acuerdo hacia el otro. Se lee a qué lado cae el peso de cada fila y se comparan filas entre sí. Es la forma habitual de enseñar encuestas de clima o de satisfacción.

Employee Survey
Datos
category · value
Buena para
Comparar entre preguntas hacia qué lado se inclinan las respuestas de una escala de cinco puntos.
Evítala cuando
Cuando las categorías no tienen un orden ni un punto neutro: dos lados que no existen confunden.
Se lee bien
Entre 2 y 20 elementos; dibuja hasta 200
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

ColumnaTipoPara qué
category · opcionalstringLa fila (la pregunta). Sin ella el chart devuelve una serie vacía.
value · opcionalnumberPor POSICIÓN, no por nombre: las cinco primeras columnas numéricas son, EN ORDEN, muy en desacuerdo · en desacuerdo · neutral · de acuerdo · muy de acuerdo. Cambiar el orden de las columnas cambia el significado del dibujo sin avisar.

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.

Móvil · 528 × 690 px
Escritorio · 848 × 882 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Las respuestas siguen una escala con centro?

Si las categorías no tienen orden ni punto neutro, unas barras apiladas reparten el total sin fingir dos lados.

Sí: quédate con barras divergentes

No: usa Barras apiladas

¿Quieres ver el reparto completo de cada pregunta?

Si basta con un saldo neto por fila, unas barras horizontales ordenadas lo comparan antes.

Sí: quédate con barras divergentes

No: usa Gráfico de barras horizontales

¿Comparas preguntas entre sí, y no dos grupos?

Si enfrentas dos poblaciones —dos años, dos colectivos—, las barras opuestas ponen cada una a un lado.

Sí: quédate con barras divergentes

No: usa Barras opuestas

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('divergingbar');
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

¿En qué orden van las columnas?

Por posición, no por nombre: las cinco primeras columnas numéricas son, en orden, muy en desacuerdo, en desacuerdo, neutral, de acuerdo y muy de acuerdo. Si cambias el orden, cambia el significado del dibujo sin aviso.

¿Por qué las filas se pueden comparar?

Porque el eje se ancla en la frontera entre desacuerdo y acuerdo en todas ellas: el centro es el mismo para cada pregunta.

¿Hace falta la columna de pregunta?

Sí. Sin la columna de categoría el gráfico devuelve una serie vacía.

¿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 «comparar cifras»

Guía para elegir: comparar cifras →