Mosaico de cifras
Datos clave destacados de un vistazo.
Definición
El mosaico de cifras pone una o varias baldosas, cada una con un número a tamaño de titular, su unidad y el nombre de la métrica debajo. No hay ejes ni barras: la cifra se dice tal cual. Se usa para abrir una lámina con los datos clave de los que cuelga el resto del argumento.
- Datos
- label · value · category · series
- Buena para
- Destacar unas pocas cifras que se entienden solas.
- Evítala cuando
- Cuando la cifra sólo tiene sentido comparada con otra o con su evolución.
- Se lee bien
- Entre 1 y 8 elementos; dibuja hasta 16
- 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 | El nombre de la métrica, en tenue bajo la cifra. |
value · opcional | any | LA CIFRA. Acepta número o cadena y decide por el valor: «320» se convierte en número y pasa por el formateador de locale; «€12,3 B» se pinta VERBATIM, con la notación que le puso el autor. Sin esta columna NI la de rótulo, `fromExportRows` devuelve []. |
category · opcional | string | La glosa que contextualiza la cifra («2026 estimate»). Se ignora si resuelve a la misma columna que el rótulo. |
series · opcional | string | Un glifo por baldosa, si la fila lo trae. |
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
¿La cifra se entiende sola, sin la trayectoria que la trae?
Si importa de dónde viene cada valor, la tabla con sparklines pone su tendencia al lado.
Sí: quédate con mosaico de cifras
No: usa Tabla con sparklines
¿Son pocas cifras, unas ocho como mucho?
Con más métricas, una tabla gráfica las ordena sin convertir la lámina en un muro de números.
Sí: quédate con mosaico de cifras
No: usa Tabla gráfica
¿Cada cifra se entiende sin compararla con las demás?
Si el mensaje es que una supera a otra, unas barras lo enseñan con la longitud.
Sí: quédate con mosaico de cifras
No: usa Gráfico de barras verticales
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('stat-tile');
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 se escribe la cifra?
Si el valor es un número, se formatea según el idioma; si es un texto como «€12,3 B», se pinta tal cual lo escribiste.
¿Puedo añadir contexto a cada cifra?
Sí: una columna de glosa («estimación 2026») se escribe junto a la cifra, y otra opcional añade un glifo por baldosa.
¿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 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «comparar cifras»
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- Gráfico de barras verticalescomparar valores entre pocas categorías
Serie con banda de referenciatu serie frente al rango de sus pares
Comparativa con parestu resultado frente al de otras empresas
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición