Gráfico de áreas
Una medida en el tiempo con el volumen destacado.
Definición
Un gráfico de áreas dibuja una medida a lo largo del tiempo y rellena el espacio entre la línea y el cero, de modo que se ve el volumen además de la trayectoria. Se lee de izquierda a derecha, fecha a fecha, y los negativos quedan por debajo del cero real. Se usa para ingresos, usuarios, existencias u otras magnitudes acumulables.
- Datos
- x · y
- Buena para
- Enseñar cómo ha evolucionado una magnitud acumulable y cuánto volumen representa.
- Evítala cuando
- Cuando hay que comparar varias series a la vez: las áreas se tapan unas a otras.
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x | date | columns.x (alias columns.date) fija el periodo exacto; sin binding se infiere una columna de fechas. Las fechas ilegibles fallan con su número de fila, sin fabricar meses. |
y | number | columns.y (alias columns.value) fija la medida exacta en datos y dominio de frames; sin binding se conservan los aliases y la inferencia. Los ceros y negativos se dibujan respecto al cero real. Un valor presente no finito falla; los ausentes conservan zero-fill. |
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
¿Es una sola serie?
Si son varias que suman un total, las áreas apiladas enseñan el reparto y el total juntos.
Sí: quédate con gráfico de áreas
No: usa Áreas apiladas
¿El volumen importa además de la trayectoria?
Si solo cuenta la forma de la curva, un gráfico de líneas lo dice con menos tinta.
Sí: quédate con gráfico de áreas
No: usa Gráfico de líneas
¿Los periodos se leen como un continuo?
Si cada mes es un periodo cerrado que se compara con los demás, las barras mensuales los separan.
Sí: quédate con gráfico de áreas
No: usa Barras mensuales
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('area');
spec.data.rows = misFilas; // x, y
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Necesita una columna de fechas?
Sí. Sin fechas la pieza falla en lugar de numerar las filas como meses seguidos, y una fecha ilegible falla indicando su número de fila.
¿Admite valores negativos?
Sí. Ceros y negativos se dibujan respecto al cero real.
¿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 360 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»
Gráfico con selector de rangoexplorar un tramo de una serie larga
Burnuptrabajo completado frente al alcance total
Curva de adopción tecnológicacómo se extiende una tecnología entre tipos de usuario
Curva de capitalevolución del valor de una cartera
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Barras y línea combinadasuna cifra absoluta junto a su tasa