Todos los componentes (204)

Gráfico de radar

Datos · RadarChart · .amset-radar

Qué es y cuándo usarlo

Un gráfico de radar: varias series medidas sobre los mismos ejes, para comparar perfiles -las notas de un producto, las capacidades de un equipo-. Cada eje sale del centro como un radio y cada serie es el polígono que une sus valores.

Cuándo usarlo

Para comparar de un vistazo el perfil de dos o tres cosas medidas con los mismos criterios.
Con entre tres y ocho ejes y valores en la misma unidad.

Cuándo no

Para una evolución en el tiempo: es un LineChart.
Para comparar cantidades exactas entre pocas categorías: es un BarChart.
Con menos de tres ejes, que no forman polígono (el componente lo dice en vez de dibujar un segmento), ni con muchas series, que se tapan unas a otras.

Teclado: no es interactivo; no entra en la tabulación. Pasar el ratón por un punto enseña su valor.

Accesibilidad: el dibujo es el adorno y la tabla es el dato. El gráfico es una img con su nombre y un resumen -cuántas series y ejes hay y, de cada serie, lo más alto y lo más bajo- y la tabla entera está siempre para el lector de pantalla (tableVisible la enseña a todos). El color nunca es el único dato: cada serie lleva su nombre en la leyenda y en la tabla.

Escala: empieza en cero, porque en un radar el área se lee como «cuánto» y un origen movido la falsea. min y max fijan la escala a mano para comparar dos radares con la misma. Un valor null es un hueco: la serie pasa del eje anterior al siguiente, sin hundirse en el centro.

Aspecto fino: variables CSS --amset-radar-size (lado máximo del dibujo) y --amset-radar-pad (el margen que reservan los nombres de los ejes).

Cómo se ve

Anillo Aurora
Anillo Brisa

Comparativa de productos
Eje	Anillo Aurora	Anillo Brisa
Acabado	8	5
Precio	6	9
Durabilidad	9	4
Peso	4	8
Garantía	7	6

<RadarChart
  label="Comparativa de productos"
  categories={["Acabado", "Precio", "Durabilidad", "Peso", "Garantía"]}
  series={[
    { key: "a", label: "Anillo Aurora", values: [8, 6, 9, 4, 7] },
    { key: "b", label: "Anillo Brisa", values: [5, 9, 4, 8, 6], tone: "success" },
  ]}
  axes
  filled
/>

Props

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

Prop	Tipo	Para qué sirve
`categories`obligatoria	`readonly string[]`	Los ejes, uno por criterio, en el orden en que se dibujan desde arriba y hacia la derecha. Al menos tres.
`label`obligatoria	`string`	Que se esta midiendo. Obligatoria: un grafico sin titulo no informa.
`series`obligatoria	`readonly ChartSeries[]`	Un valor por eje. `null` es un hueco: la serie pasa del eje anterior al siguiente.
`axes`	`boolean`	Los anillos de fondo, con el valor de cada uno sobre el primer eje.
`categoryName`	`string`	Como se llama la primera columna de la tabla. Por defecto, «Eje».
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`filled`	`boolean`	Rellena cada serie con su color suave. Con `false` solo se ve el contorno. Por defecto, `true`.
`format`	`(value: number) => string`	—
`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 de la escala a mano, para comparar dos radares con la misma. El minimo por defecto es 0.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Enseña tambien la tabla. Para el lector de pantalla esta siempre.

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-radar-size`	`22rem`
`--amset-radar-pad`	`3.5rem`
`--amset-radar-gap`	`0.25rem`
`--amset-radar-label`	`var(--amset-text-xs)`

Cómo se cambia

.amset-radar {
  --amset-radar-size: ...;
  --amset-radar-pad: ...;
}

En el banco de pruebas

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