Área apilada con degradado

Descripción general

Los gráficos de área apilada con degradado combinan la vista composicional de las áreas apiladas con rellenos suaves que generan transiciones de color. Esto mejora el atractivo visual y ayuda a percibir cómo cambian las contribuciones de cada serie en el tiempo.

Cuándo usarlo

Mostrar cómo las partes contribuyen a un todo a lo largo del tiempo
Destacar transiciones suaves entre diferentes estados de composición
Crear presentaciones atractivas de tendencias multi-componente
Representar capas con énfasis estético

No es ideal para

Situaciones donde los valores exactos son críticos (los degradados dificultan la lectura precisa)
Más de 5–7 series (se vuelve confuso)
Categorías sin un orden natural

Variaciones clave

Degradados verticales (de abajo hacia arriba en cada banda)
Degradados horizontales (a lo largo de la línea de tiempo)
Paradas de color personalizadas por serie
Variaciones de opacidad para crear profundidad

Casos de uso

Evolución de cuota de mercado por marca
Mezcla energética por tipo de fuente a través de los años
Cambios en la asignación de presupuesto entre departamentos
Composición de fuentes de tráfico para sitios web
Desglose de ingresos por portafolio de productos

Datos (CSV)

x,Line 1,Line 2,Line 3,Line 4,Line 5
Mon,140,120,320,220,220
Tue,232,282,132,402,302
Wed,101,111,201,231,181
Thu,264,234,334,134,234
Fri,90,220,190,190,210
Sat,340,340,130,230,290
Sun,250,310,220,120,150

Configuración del gráfico (JSON)

Consejos de rendimiento

Limita la cantidad de series a 7 o menos para conservar la claridad
Usa transiciones suaves para las animaciones
Considera un renderizado progresivo en conjuntos muy grandes

Preguntas frecuentes

¿Qué la diferencia de un área apilada tradicional? Aquí cada banda usa un relleno degradado en vez de un color sólido, creando una estética moderna y fluida que facilita percibir la continuidad de los datos.

¿Cuántas series son demasiadas? Más de 5–7 capas generan confusión, especialmente con degradados. Agrupa categorías pequeñas en “Otros” o utiliza otra visualización si manejas muchas series.

¿Siempre debo usar degradados? No. Úsalos cuando:

El atractivo visual sea prioritario (presentaciones, reportes, dashboards)
Busques un acabado moderno y pulido
El relato de datos se beneficie de fluidez visual
Tu audiencia espere visualizaciones atractivas

Evítalos cuando:

Necesitas lecturas numéricas precisas
Trabajas con datos científicos o analíticos estrictos
Tu audiencia prefiere gráficos tradicionales
Debes imprimir en blanco y negro

¿Curvas suaves o ángulos marcados?

Curvas suaves (smooth: true): ideales para datos continuos (ventas, temperatura) y combinan muy bien con degradados.
Ángulos marcados (smooth: false): mejores para datos discretos o cuando quieres enfatizar puntos exactos.

En la mayoría de los casos con degradados, las curvas suaves refuerzan el efecto fluido.

¿Cómo elijo buenos colores?

Asegura contraste suficiente entre bandas adyacentes
Usa paletas armónicas (colores análogos funcionan bien)
Respeta el significado de color en tu dominio (azul para agua, verde para crecimiento)
Ajusta la opacidad: degradados más claros funcionan mejor cuando están apilados
Evita combinaciones problemáticas para personas con daltonismo (no mezcles rojo-verde)
Limita a 5–6 colores distintos

¿Cuál es la mejor forma de leer valores? Los gráficos de área apilada son mejores para entender:

Tendencias del total (borde superior)
Proporciones relativas (grosor de cada banda)
Cambios en la composición a lo largo del tiempo

Son menos eficaces para comparar valores exactos de capas intermedias; usa tooltips o gráficos alternativos si eso es crucial.

¿Puedo resaltar una serie específica? Sí. Prueba:

Colores más brillantes o saturados
Mayor opacidad en la serie enfocada
Ubicar la serie clave en la parte inferior
Usar contraste de color para dirigir la atención

¿Diferencia entre área apilada y stream graph? El área apilada parte de cero y conserva los valores absolutos y el total. Los stream graphs centran los datos alrededor de un eje medio, priorizando el patrón fluido pero perdiendo la referencia absoluta. Usa áreas apiladas cuando importan los totales; usa stream graphs cuando buscas únicamente ritmo visual.

Example

Guide