Todos los componentes (204)

Gráfico de barras

Datos · BarChart · .amset-bars

Qué es y cuándo usarlo

Las barras de un cuadro de mando: ventas por categoría, pedidos por día, visitas por canal. El dibujo es el adorno y la tabla es el dato: debajo va una tabla de verdad, oculta a la vista salvo que se pida.

Cuándo usarlo

Para comparar cantidades de unas pocas categorías (de 3 a 12) de un vistazo.
orientation="rows" cuando los nombres son largos; tableVisible cuando el número exacto importa tanto como la forma.
max para que dos gráficos que se comparan tengan la misma escala.
format para escribir los valores (euros, unidades); sin él, números en el idioma del LocaleProvider. valueName es la cabecera de la columna de valores en la tabla («Valor» por defecto).
markers para una línea de referencia sobre las barras (la media del grupo, un objetivo): cruza todas a su valor, entra en el techo del eje y en la tabla.
detail en una barra para una segunda cifra visible junto a su número («+8 pts»); solo en filas, y en columnas se queda en la tabla.
tone colorea las barras; axes y values quitan o ponen el eje y las cifras.

Cuándo no

Para la evolución en el tiempo, con muchos puntos: Trend.
Para las partes de un total: DonutChart.
Para una sola cifra con su variación: Stat.

Teclado: no tiene: no hay nada que pulsar.

Accesibilidad: el dibujo es una imagen (role="img") con el resumen escrito («5 barras, total 7810 €. La mayor, Anillos con 3240 €. La menor, Relojes con 310 €») y la tabla, con cabeceras de fila y de columna, está siempre para el lector de pantalla. Son cajas con alto en porcentaje, no un SVG: se imprimen y se amplían sin deformarse. El eje sube al número redondo de encima del mayor valor.

Aspecto fino: variables CSS --amset-bars-*: -axis, -bar, -cap, -figure-slot, -footer, -gap, -height, -label, -name (lo que ocupa el nombre en filas), -thickness. El tamaño mueve el alto del dibujo (8, 11.25 o 15 rem), el grosor de la barra y el eje; height sigue mandando si se pasa.

Cómo se ve

82Julio

51Agosto

118Septiembre

Pedidos por mes
Concepto	Valor
Julio	82
Agosto	51
Septiembre	118

<BarChart
  label="Pedidos por mes"
  data={[
    { key: 'jul', label: 'Julio', value: 82 },
    { key: 'sep', label: 'Septiembre', value: 118, tone: 'success' },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`data`obligatoria	`readonly DataBar[]`	—
`label`obligatoria	`string`	Que se esta comparando. Obligatoria: un grafico sin titulo no informa.
`axes`	`boolean`	Rayas de fondo con su numero.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`format`	`(value: number) => string`	—
`height`	`number`	Alto del dibujo cuando son columnas.
`markers`	`readonly BarMarker[]`	Lineas de referencia sobre las barras (la media, un objetivo): entran en el techo del eje y en la tabla.
`max`	`number`	Techo del eje a mano, para comparar dos graficos con la misma escala.
`orientation`	`"rows" \| "columns"`	`columns` sube desde el suelo; `rows` crece hacia el lado.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Enseña tambien la tabla. Para el lector de pantalla esta siempre.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	El color de la serie, del vocabulario comun (`neutral` para lo secundario).
`valueName`	`string`	Como se llama la columna de valores en la tabla.
`values`	`boolean`	El numero encima (o al final) de cada barra.

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-bars-axis`	`3rem`
`--amset-bars-footer`	`1.5rem`
`--amset-bars-cap`	`1.25rem`
`--amset-bars-height`	`11.25rem`
`--amset-bars-bar`	`3.5rem`
`--amset-bars-thickness`	`0.875rem`
`--amset-bars-gap`	`var(--amset-space-2)`
`--amset-bars-figure-slot`	`3.5rem`
`--amset-bars-label`	`var(--amset-text-xs)`
`--amset-bars-name`	`8rem`
`--amset-bars-row-gap`	`var(--amset-space-3)`

Cómo se cambia

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

En el banco de pruebas

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