All components (204)

Radar chart

Data · RadarChart · .amset-radar

What it is and when to use it

A radar chart: several series measured on the same axes, to compare profiles -a product's ratings, a team's capabilities-. Each axis leaves the centre as a radius and each series is the polygon joining its values.

When to use it

To compare at a glance the profile of two or three things measured with the same criteria.
With between three and eight axes and values in the same unit.

When not to

For evolution over time: that is a LineChart.
To compare exact quantities between a few categories: that is a BarChart.
With fewer than three axes, which do not form a polygon (the component says so instead of drawing a segment), or with many series, which cover each other.

Keyboard: it is not interactive; it does not enter the tab order. Hovering a point shows its value.

Accessibility: the drawing is the ornament and the table is the data. The chart is an img with its name and a summary -how many series and axes there are and, for each series, the highest and the lowest- and the whole table is always there for the screen reader (tableVisible shows it to everyone). Colour is never the only datum: each series carries its name in the legend and in the table.

Scale: it starts at zero, because in a radar the area reads as "how much" and a moved origin falsifies it. min and max fix the scale by hand to compare two radars with the same one. A null value is a gap: the series goes from the previous axis to the next, without sinking into the centre.

Fine-tuning: CSS variables --amset-radar-size (maximum side of the drawing) and --amset-radar-pad (the margin the axis names reserve).

What it looks like

Aurora ring
Breeze ring

Product comparison
Axis	Aurora ring	Breeze ring
Finish	8	5
Price	6	9
Durability	9	4
Weight	4	8
Warranty	7	6

<RadarChart
  label="Product comparison"
  categories={["Finish", "Price", "Durability", "Weight", "Warranty"]}
  series={[
    { key: "a", label: "Aurora ring", values: [8, 6, 9, 4, 7] },
    { key: "b", label: "Breeze ring", values: [5, 9, 4, 8, 6], tone: "success" },
  ]}
  axes
  filled
/>

Props

Import it with import { RadarChart } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`categories`required	`readonly string[]`	The axes, one per criterion, in the order they are drawn from the top and clockwise. At least three.
`label`required	`string`	What is being measured. Required: a chart without a title does not inform.
`series`required	`readonly ChartSeries[]`	One value per axis. `null` is a gap: the series goes from the previous axis to the next.
`axes`	`boolean`	The background rings, with the value of each one on the first axis.
`categoryName`	`string`	What the first column of the table is called. Defaults to "Axis".
`className`	`string`	Merged with the library classes; it does not replace them.
`filled`	`boolean`	Fills each series with its soft colour. With `false` only the outline shows. Defaults to `true`.
`format`	`(value: number) => string`	—
`legend`	`boolean`	The legend with the name of each series. By default, only if there is more than one.
`max`	`number`	—
`min`	`number`	Minimum and maximum of the scale by hand, to compare two radars with the same one. The default minimum is 0.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Also shows the table. For the screen reader it is always there.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-radar-size`	`22rem`
`--amset-radar-pad`	`3.5rem`
`--amset-radar-gap`	`0.25rem`
`--amset-radar-label`	`var(--amset-text-xs)`

How to change it

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

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: