Todos los componentes (244)

Barras apiladas

Datos · StackedBarChart

Qué es y cuándo usarlo

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: por defecto no tiene: no hay nada que pulsar. Con toggleSeries la leyenda es una fila de botones (Tab y Intro o Espacio ocultan o devuelven una serie) y con onPointPress cada valor del globo de una categoría es un botón al que se llega con Tab. 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.

Cómo se ve

Tipo de gráfico

LíneasÁreas apiladas

Barras apiladas

Tienda
Online
Mayorista

Ventas por mes y canal
Mes	Tienda	Online	Mayorista
Jul	6900	5100	1900
Ago	5200	5600	2400
Sep	7800	6300	2800

<StackedBarChart
  label="Ventas por mes y canal"
  categories={['Jul', 'Ago', 'Sep']}
  series={canales}
  categoryName="Mes"
  tableVisible
/>

Props

Se importa con import { StackedBarChart } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`categories`obligatoria	`readonly string[]`	Lo que va en el eje de abajo: los meses, los dias. Una por valor de cada serie.
`label`obligatoria	`string`	Que se esta midiendo. Obligatoria: un grafico sin titulo no informa.
`series`obligatoria	`readonly ChartSeries[]`	—
`axes`	`boolean`	Rayas de fondo con su numero.
`categoryName`	`string`	Como se llama la primera columna de la tabla. Por defecto, «Periodo».
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`format`	`(value: number) => string`	—
`grouped`	`boolean`	Las barras de cada categoria van una al lado de otra, cada una desde el cero, en vez de apiladas. Por defecto, `false`.
`height`	`number`	Alto del dibujo en pixeles. Por defecto, el del tamaño.
`hiddenSeries`	`readonly string[]`	Las claves de las series ocultas, si las lleva quien usa el grafico. Sin ella, las lleva el grafico.
`legend`	`boolean`	La leyenda con el nombre de cada serie. Por defecto, solo si hay mas de una.
`max`	`number`	—
`min`	`number`	Minimo y maximo del eje a mano, para comparar dos graficos con la misma escala.
`onHiddenSeriesChange`	`(hidden: readonly string[]) => void`	Se llama con las claves ocultas tras pulsar una entrada de la leyenda.
`onPointPress`	`(point: ChartPoint) => void`	Hace pulsable cada valor (en el globo de su categoria, tambien con teclado y dedo) y entrega el punto pulsado.
`referenceBands`	`readonly ChartReferenceBand[]`	Bandas horizontales de referencia: un rango aceptable.
`referenceLines`	`readonly ChartReferenceLine[]`	Rayas horizontales de referencia: un objetivo, una media.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Enseña tambien la tabla. Para el lector de pantalla esta siempre.
`toggleSeries`	`boolean`	La leyenda deja de ser un rotulo y cada entrada pasa a ser un boton que oculta o devuelve su serie. Por defecto, `false`.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: