Barras opuestas

Dos magnitudes enfrentadas por categoría.

Definición

Las barras opuestas enfrentan dos magnitudes por categoría: una crece hacia la izquierda y la otra hacia la derecha desde una línea central común, con los rótulos de categoría compartidos. Sirven cuando las dos series son dos lados de lo mismo, como votos a favor y en contra o altas y bajas.

Editar con tus datos SVG Spec JSON

Datos: category · left · right
Buena para: Comparar, fila a fila, los dos lados de una misma cuestión y ver hacia dónde se inclina cada categoría.
Evítala cuando: Cuando las dos series no se oponen ni comparten unidad: enfrentarlas sugiere un pulso que no existe.
Se lee bien: Entre 3 y 16 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é
`category` · opcional	string	El rótulo de la fila, en el canal central. Si ningún nombre casa, `findStringColumn` cae a la PRIMERA columna de texto que haya.
`left` · opcional	number	POSICIONAL, sin alias: la 1.ª columna numérica. Su NOMBRE es el rótulo de la serie izquierda —el encabezado del dato manda sobre el del estilo—.
`right` · opcional	number	POSICIONAL: la 2.ª columna numérica, la serie derecha. Con menos de dos columnas numéricas la pieza devuelve cero filas.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px el motor se niega y explica por qué: el eje X no puede pintar «10»: mide 16.8 px y solo tiene 16. Es una CIFRA, así que no se elide —«10…» sería otro número—. Sube `dimensions.width (o baja `numTic. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Las dos series son lados opuestos de lo mismo?

Si son dos medidas que solo se comparan entre sí, unas barras agrupadas lo dicen sin sugerir enfrentamiento.

Sí: quédate con barras opuestas

No: usa Barras agrupadas

¿Interesan los dos lados y no solo el saldo?

Si basta con la diferencia neta de cada categoría, una barra divergente por fila la enseña directamente.

Sí: quédate con barras opuestas

No: usa Barras divergentes

¿Las filas son categorías y no tramos de edad?

Si se trata de hombres y mujeres por edad, la pirámide de población es la convención que el lector reconoce.

Sí: quédate con barras opuestas

No: usa Pirámide de población

Código

La misma pieza, con tus datos

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

const spec = await getPreset('opposed-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

¿Por qué comparten la línea central?

Porque las dos series se leen contra la misma referencia: así la longitud de cada lado se compara directamente dentro de la fila.

¿Cuántas categorías admite?

Se lee bien entre 3 y 16 filas.

¿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?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «comparar cifras»

Guía para elegir: comparar cifras →