Tabla gráfica

Tabla con marcas visuales en las celdas.

Definición

Una tabla gráfica pone una entidad por fila y varias métricas en columnas, y cada columna elige cómo se pinta: la cifra, una barra o una bola. Se lee por filas para conocer cada entidad y por columnas para ordenar. Se usa para comparativas de producto, proveedores o países con varios criterios a la vez.

Editar con tus datos SVG Spec JSON

Datos: label · value
Buena para: Comparar varias entidades en varias métricas a la vez sin perder la cifra exacta.
Evítala cuando: Cuando solo hay una métrica: una tabla añade lectura donde una barra bastaría.
Se lee bien: Entre 2 y 20 elementos; dibuja hasta 30
Datos que faltan: Omite el valor ausente y lo declara aparte.
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 ENTIDAD, primera columna. No se busca por nombre: es la primera columna de la fila, y su ancho se reparte por texto MEDIDO entre un suelo y un techo declarados en estilos.
`value` · opcional	any	Las demás columnas, en el orden de las claves de la fila. Una celda vacía, en blanco o ilegible se elide con el `missingPlaceholder` («–») y sale del máximo de la mini-barra y del cálculo de decimales: no se imprime como 0. `heuristica` y NO `columns`: el `columns` que esta pieza lee es `overrides.style.columns` —una clave de ESTILOS que declara por columna su `cellType` (text · number · bar · delta · harvey), rótulo, unidad y formato—, no el `spec.columns` que ata roles. Atar `columns.value` en el spec no cambia nada; declarar `overrides.style.columns` sí (probado: 12 164 → 5 414 bytes). Sin esa declaración el tipo se infiere de la forma de cada columna (`inferirCeldas`).

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 × 505 px

Escritorio · 908 × 562 px

Cuándo usarla

Tres preguntas antes de elegirla

¿El lector necesita varias métricas a la vez?

Si solo hay una cifra por entidad, las barras ordenadas se leen de un vistazo.

Sí: quédate con tabla gráfica

No: usa Gráfico de barras horizontales

¿Las columnas son valores de un momento y no series?

Si cada fila tiene una evolución en el tiempo, una línea pequeña por celda la resume mejor.

Sí: quédate con tabla gráfica

No: usa Tabla con sparklines

¿Importa la cifra exacta además del patrón?

Si solo cuenta dónde se concentran los valores altos en una rejilla, el color basta.

Sí: quédate con tabla gráfica

No: usa Mapa de calor

Código

La misma pieza, con tus datos

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

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

¿Cómo decide cada columna su marca?

Cada columna se declara en los estilos como texto, cifra, barra, variación o bola; si no se declara, el tipo se deduce de la forma de sus valores. Una celda vacía o ilegible se escribe como «–» y no cuenta como cero.

¿Qué columna es la entidad?

La primera de cada fila. Las demás se pintan en el orden en que vienen.

¿Qué hace si faltan datos?

Omite el valor ausente y lo declara aparte.

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