Gráfico de áreas

Lo mismo que LineChart, con el área de debajo de cada línea rellena: la evolución de una o varias series sobre las mismas categorías, con el peso de cada una a la vista. Comparte con LineChart y StackedBarChart los datos, la escala, la leyenda y la tabla.

El dibujo es el adorno y la tabla es el dato: debajo va una tabla de verdad (una fila por categoría, una columna por serie), oculta a la vista salvo con tableVisible. Al pasar el ratón por una categoría salen los valores de todas las series.

Cuándo usarlo

• Un volumen que se acumula en el tiempo: ventas, visitas, horas.
• stacked apila las series: el borde de arriba es el total y cada capa, lo que aporta cada una. Al apilar, un hueco (null) cuenta como cero. Sin stacked las áreas se superponen, translúcidas, y conviene que sean dos o tres; un null es un hueco y corta el área ahí.
• El eje empieza siempre en cero, porque un área que arranca en otro sitio exagera las diferencias; min y max fijan la escala a mano, para comparar dos gráficos.
• format escribe los valores (euros, porcentajes) en el eje, al pasar el ratón, en el resumen y en la tabla; categoryName es la cabecera de la primera columna de la tabla.

Cuándo no

• Comparar la forma de varias series sin relleno, o con el eje ajustado a los datos: LineChart.
• Pocas categorías en las que importa el total de cada una: StackedBarChart.
• Partes de un total en un solo momento: DonutChart.

Teclado: no tiene: no hay nada que pulsar. El dato completo está en la tabla.

Accesibilidad: el dibujo es una imagen (role="img") con un resumen escrito («2 series, 9 puntos. Tienda: de 4200 € a 7800 €, el máximo, 7800 €, en Sep. …») y la tabla está siempre para el lector de pantalla. El color nunca es la única pista: la leyenda (por defecto, solo con más de una serie) y el resumen llevan el nombre de cada serie.

Aspecto fino: variables CSS --amset-series-*: -axis, -cap, -footer, -height, -label y -stroke. El tamaño mueve el alto (10, 14 o 18 rem); height manda si se pasa. El color de cada serie sale de su tone, y el relleno es ese color al 22 %.