Todos los componentes (204)

Gráfico de líneas

Datos · LineChart · .amset-series

Qué es y cuándo usarlo

Líneas de varias series sobre las mismas categorías: ventas por mes, visitas por día, temperatura por hora. Un valor null es un hueco y corta la línea ahí. Comparte datos, escala, leyenda y tabla con AreaChart (Gráfico de áreas) y StackedBarChart (Barras apiladas), que tienen su propia ficha.

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

Evolución en el tiempo de una a cinco series, con pocas decenas de puntos.
zeroBased para que el eje empiece en cero (por defecto se ajusta a los datos, con números redondos); min y max para fijar la escala y poder comparar dos gráficos.
format para escribir los valores (euros, porcentajes); categoryName es la cabecera de la primera columna de la tabla.
markers={false} quita los puntos cuando hay muchos.

Cuándo no

Una línea diminuta dentro de una tarjeta: Trend.
El volumen bajo la línea, o varias series que se suman: AreaChart. El total de pocas categorías y su reparto: StackedBarChart.
Comparar categorías sin orden: BarChart. Partes de un total: DonutChart.
Miles de puntos o interacción fina (zoom, selección): una librería de gráficos.

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 («3 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 y el resumen llevan el nombre de cada serie.

Aspecto fino: variables CSS --amset-series-*: -axis, -bar, -cap, -footer, -height, -label, -stroke. El tamaño mueve el alto (10, 14 o 18 rem); height manda si se pasa.

Cómo se ve

Web
Tienda

Ventas por canal
Periodo	Web	Tienda
Ene	1200	800
Feb	1350	760
Mar	1100
Abr	1700	900
May	1900	1050
Jun	2100	980

Web
Tienda

Ventas por canal, apiladas
Periodo	Web	Tienda
Ene	1200	800
Feb	1350	760
Mar	1100
Abr	1700	900
May	1900	1050
Jun	2100	980

Web
Tienda

Ventas por mes y canal
Periodo	Web	Tienda
Ene	1200	800
Feb	1350	760
Mar	1100
Abr	1700	900
May	1900	1050
Jun	2100	980

<LineChart label="Ventas por canal" categories={meses} series={ventas} />
<AreaChart label="Ventas por canal, apiladas" categories={meses} series={ventas} stacked />
<StackedBarChart label="Ventas por mes y canal" categories={meses} series={ventas} />

Props

Se importa con import { LineChart } 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.
`legend`	`boolean`	La leyenda con el nombre de cada serie. Por defecto, solo si hay mas de una.
`markers`	`boolean`	Un punto en cada valor. Por defecto, `true`.
`max`	`number`	—
`min`	`number`	Minimo y maximo del eje a mano, para comparar dos graficos con la misma escala.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Enseña tambien la tabla. Para el lector de pantalla esta siempre.
`zeroBased`	`boolean`	Con `true` el eje empieza en cero aunque los datos esten lejos de el. Por defecto, se ajusta a los datos.

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

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-series-axis`	`3rem`
`--amset-series-footer`	`1.5rem`
`--amset-series-cap`	`1rem`
`--amset-series-height`	`14rem`
`--amset-series-bar`	`3.5rem`
`--amset-series-stroke`	`2px`
`--amset-series-label`	`var(--amset-text-xs)`

Cómo se cambia

.amset-series {
  --amset-series-axis: ...;
  --amset-series-footer: ...;
}

En el banco de pruebas

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