Todos los componentes (244)

Gráfico de áreas

Datos · AreaChart

Qué es y cuándo usarlo

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: 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 («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 %.

Cómo se ve

Tipo de gráfico

Líneas

Áreas apiladasBarras apiladas

Tienda
Online
Mayorista

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

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

Props

Se importa con import { AreaChart } 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`	—
`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"`	—
`stacked`	`boolean`	Las series se suman unas sobre otras: el area total es la suma. Por defecto, `false` (se superponen).
`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: