Barras apiladas

Barras apiladas: una pila por categoría con un tramo por serie, para ver a la vez el total y de qué se compone («ventas por mes y por canal»). Comparte con LineChart y AreaChart 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 pila salen los valores de cada serie y el total.

Cuándo usarlo

• Pocas categorías (meses, tiendas, semanas) donde importa el total de cada una y el reparto entre series.
• El orden de series es el de la pila: la primera va abajo. Los valores son positivos: un negativo o un null no pintan tramo y no suman al total.
• El eje empieza siempre en cero; min y max fijan la escala a mano, para comparar dos gráficos.
• format escribe los valores (euros, unidades) 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

• Una sola serie, o comparar categorías sin reparto: BarChart.
• La evolución con muchos puntos: AreaChart con stacked, o LineChart.
• 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 de cada serie (de dónde a dónde va y dónde llega a su máximo) 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, y cada tramo va separado del de encima por una raya del color del fondo.

Aspecto fino: variables CSS --amset-series-*: -axis, -bar (lo más ancha que puede ser una pila), -cap, -footer, -height y -label. El tamaño mueve el alto (10, 14 o 18 rem) y el ancho máximo de la pila; height manda si se pasa. El color de cada serie sale de su tone.