Área de desviación
Diferencia de una serie respecto a una referencia.
Definición
El área de desviación dibuja una serie observada y la referencia contra la que se mide —plan, presupuesto, objetivo— sobre el mismo eje temporal, y rellena el espacio entre las dos. El área es la desviación y su tinta dice de qué lado cae. Se usa para seguir ventas, costes o tráfico frente a lo previsto.
- Datos
- x · y · target
- Buena para
- Ver cuándo y cuánto se apartó lo real del plan, y en qué sentido.
- Evítala cuando
- Cuando lo que importa es el nivel de la serie y no su distancia a una referencia.
- Se lee bien
- Entre 4 y 200 elementos; dibuja hasta 300
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: resumen en texto
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x | date | El periodo. Mejor en ISO («2025-04»); los meses en inglés y en castellano también se leen. Lo que NO se puede es mezclar granularidades: «2025» y «ene-2025» caen en el mismo instante y el chart falla. |
y | number | La serie OBSERVADA — lo que pasó. |
target | number | La REFERENCIA contra la que se mide la desviación (plan, presupuesto, objetivo). |
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
¿Hay una cifra de referencia en cada periodo?
Si la referencia no es una cifra sino el recorrido de los pares —una banda entre percentiles con su mediana—, la serie con banda de referencia la dibuja así.
Sí: quédate con área de desviación
No: usa Serie con banda de referencia
¿Importa en qué momento se produjo la desviación?
Si solo cuenta la desviación total del periodo repartida por partidas, el análisis de desviaciones la descompone.
Sí: quédate con área de desviación
No: usa Análisis de desviaciones
¿La distancia al plan importa más que la serie misma?
Si lo que se quiere contar es la trayectoria, una línea simple lo dice sin tinta de más.
Sí: quédate con área de desviación
No: usa Gráfico de líneas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('deviation-area');
spec.data.rows = misFilas; // x, y, target
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué indica el color del área?
De qué lado de la referencia cae lo observado: por encima o por debajo. El área mide la distancia entre las dos líneas, no el nivel de ninguna.
¿La referencia tiene que ser fija?
No. Viene en una columna propia, fila a fila, así que puede ser un presupuesto que cambia cada mes.
¿Puedo mezclar años y meses en el eje?
No. «2025» y «ene-2025» caen en el mismo instante y el gráfico falla. Lo más seguro son fechas ISO, como «2025-04».
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿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 «comparar cifras»
- Serie con banda de referenciatu serie frente al rango de sus pares
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
Comparativa con parestu resultado frente al de otras empresas
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición