Líneas en base 100
Comparar series con distinta escala.
Definición
Las líneas en base 100 dividen cada serie por su propio valor de partida y la multiplican por cien, de modo que todas arrancan en 100. Lo que se compara es cuánto ha crecido o caído cada una respecto a su inicio, no su nivel. Se usa para comparar precios, ventas o índices que viven en escalas o unidades distintas.
- Datos
- x · series · y
- Buena para
- Comparar la evolución relativa de series con escalas distintas desde un mismo punto de partida.
- Evítala cuando
- Cuando el nivel absoluto importa: una serie pequeña que dobla y una grande que crece un 10 % no pesan lo mismo.
- Se lee bien
- Entre 4 y 200 elementos; dibuja hasta 400
- Datos que faltan
- Omite el valor ausente y lo declara aparte.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x · opcional | date | El periodo. Una fila por periodo (formato ancho) o por periodo × serie (largo). Sin `columns.x`: la primera columna que no sea numérica. |
series · opcional | string | Sólo en formato LARGO: la columna con el nombre de la serie. Se declara EN PAREJA con `y`; una sola de las dos no activa el formato largo. |
y · opcional | number | Sólo en formato LARGO: el valor CRUDO. En ancho, cada serie es su propia columna numérica. |
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
¿Las series tienen escalas o unidades distintas?
Si comparten unidad y el nivel cuenta, el gráfico de líneas enseña los valores reales.
Sí: quédate con líneas en base 100
No: usa Gráfico de líneas
¿Importa el camino entre el inicio y el final?
Si sólo cuentan dos momentos, el gráfico de pendiente une el antes y el después.
Sí: quédate con líneas en base 100
No: usa Gráfico de pendiente
¿Son pocas series, de modo que caben en un mismo eje?
Con muchas series las líneas se enredan; los pequeños múltiplos dan un panel a cada una.
Sí: quédate con líneas en base 100
No: usa Pequeños múltiplos
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('indexed-line');
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é siempre aparece el 100?
Porque es la referencia de la forma: el eje lo contiene siempre, pase lo que pase con los datos, para que se vea quién está por encima y quién por debajo de su punto de partida.
¿Qué forma tiene la tabla?
Ancha, con una columna numérica por serie, o larga, con una columna de serie y otra de valor. Los valores van crudos: el cálculo de la base 100 lo hace la pieza.
¿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 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»
Burndowntrabajo pendiente frente al plan de un sprint- Gráfico de líneasuna medida que cambia en el tiempo
Curva de pérdidacómo converge el entrenamiento de un modelo
Curvas de retencióncuánto aguanta cada cohorte
Retornos móvilesrentabilidad en ventanas que se desplazan
Gráfico de áreasuna medida en el tiempo con el volumen destacado