Gráfico con selector de rango
Explorar un tramo de una serie larga.
Definición
Un gráfico con selector de rango enseña una serie larga en dos niveles: un gráfico grande con el tramo que se discute y, debajo, un minigráfico con la serie entera y ese tramo marcado. Se lee el detalle arriba sin perder de vista dónde cae dentro del conjunto. Se usa con ventas, tráfico o precios de varios años cuando la conversación se centra en un periodo.
- Datos
- x · y
- Buena para
- Mirar un tramo de una serie larga sin perder la forma completa.
- Evítala cuando
- Cuando la serie es corta y se lee entera de un vistazo: el selector sobra.
- Datos que faltan
- Dibuja el valor ausente como cero.
- 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. Primero se busca una columna cuyos VALORES parezcan fechas y sólo después por nombre; «2024-01» se completa al día 1 y se ancla en UTC. Una fila con fecha ilegible se descarta EN SILENCIO (data.ts:86), que es lo único que esta pieza no dice con una cifra. |
y · opcional | number | La altura de la serie, en el gráfico grande y en el minigráfico de contexto. |
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 serie es larga y discutes un tramo?
Si la serie se lee entera de un vistazo, un gráfico de áreas sin ventana basta.
Sí: quédate con gráfico con selector de rango
No: usa Gráfico de áreas
¿Es una sola serie?
Si hay muchas series largas que comparar, el gráfico de horizonte las apila en poco alto.
Sí: quédate con gráfico con selector de rango
No: usa Gráfico de horizonte
¿Basta con enfocar un tramo, sin explicarlo?
Si hay que contar qué pasó en fechas concretas, la serie temporal anotada rotula los hechos en su sitio.
Sí: quédate con gráfico con selector de rango
No: usa Serie temporal anotada
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('brush');
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
¿Qué enseña el minigráfico de abajo?
La serie entera, con la ventana marcada encima. Así el tramo ampliado nunca se lee fuera de su contexto.
¿Qué fechas reconoce?
Busca la columna cuyos valores parecen fechas. «2024-01» se toma como el día 1 de ese mes; una fecha que no puede leer se descarta sin aviso, así que conviene revisarlas.
¿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 480 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 de áreasuna medida en el tiempo con el volumen destacado
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