Radar chart
<o-radar-chart> compares values across several axes, one polygon per series on a shared web.
The web is Orbit: one spoke per axis is a .vector, and each level is a ring of .sides, chords that close into a regular polygon. The labels are satellites on a ring just outside it, pushed outward with --o-dir-x and --o-dir-y. The values are an SVG polygon drawn in lanes, because every corner sits at its own distance. Point at a corner, or tab to it, to read its value. Click a name in the legend to hide that series.
Not to be confused with <o-radar>, the scope with a sweep and blips.
Attributes
| Attribute | Default | What it does |
|---|---|---|
data | [] | The axes, clockwise from the top: names (["Speed", "Range"]) or [{ label, max?, min?, value? }]. Items with a value make a single series without series. |
series | [{ label, values, color?, hidden? }], with one value per axis. A missing value sits at the axis minimum; values past the ends are drawn at the ends. | |
min / max | 0 / auto | The scale every axis shares, unless an axis sets its own. The automatic max rounds the largest value up to 1, 2, 2.5 or 5 times a power of ten. |
levels | 4 | Rings of the web, 1 to 12. |
grid | polygon | polygon or circle. Fewer than three axes always draw circles. |
scale | on | Numbers on the levels, along the first axis. Shown only when the axes share a scale; scale="false" hides them. |
legend | auto | Shown with two or more series. legend forces it, legend="false" hides it. |
points | on | points="false" draws the polygons without corner points, and without the tooltip. |
label | The chart's name, for its accessible name and the table caption. Also the name of a series made from data. | |
size | 320px | Width of the chart. The legend goes under it. |
duration | 600 | Milliseconds for the shapes to glide to new values. 0 jumps. |
format, decimals, currency, locale, unit | Number format of the tooltip, the scale and the table. percent is where a value sits on its axis. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Properties and events
| Name | What it does |
|---|---|
select | A point was clicked, or activated with Enter or Space. event.detail has axis, series, value, axisIndex and seriesIndex. |
toggle | The legend hid or showed a series. event.detail has series, seriesIndex and hidden. The last visible series cannot be hidden. |
hiddenSeries | The indexes of the series the legend has hidden. |
formatter | A function (value, { kind, min, max, axis, axisIndex, series, seriesIndex }) => string for every number the chart prints. See Shared options. |
Changing the data
Set data or series again and each polygon glides from its old shape to the new one. The web, the labels and the legend stay put; only a different number of axes or series rebuilds them.
Styling
| Property | Default | What it does |
|---|---|---|
--ok-fill | #4fd1c5 | The first series, when it has no color. The next ones take amber, coral, violet, blue and lime. |
--ok-radar-chart-grid | var(--ok-track, rgba(138,151,165,.3)) | Spokes and levels. |
--ok-radar-chart-edge | a little stronger | The outer level. |
--ok-radar-chart-fill-opacity | .18 | How much the areas are filled. |
--ok-radar-chart-stroke | 2px | Outline of the areas. |
--ok-radar-chart-label | inherits | Color of the axis labels. |
--ok-radar-chart-tip / --ok-radar-chart-tip-text | var(--ok-surface) / var(--ok-text) | The tooltip. |
--ok-radar-chart-legend-size | .875em | Font size of the legend. |
--ok-font-size | 4.1cqmin | Size of the labels and tooltip, as a share of the chart. |
More examples
A scale for each axis
Give an axis its own max (and min) when the axes measure different things. Each value is then drawn as a share of its own axis, and the level numbers go away because they would mean something different on every spoke.
Reacting to a point
On a light page
Accessibility
The chart has role="figure" and a name that counts what it holds, like “Two players: 6 axes, 2 series”. Inside it, a visually hidden table lists every value by axis and series, captioned with label, so a screen reader can read the numbers in order instead of guessing them from a shape.
The points are one tab stop. Left and Right walk the axes, Up and Down switch series, Home and End jump to the first and last axis, Enter and Space fire select, and Escape hides the tooltip. Each point is named after its series, axis and value, such as “Rivera, Passing: 91”. The legend entries are buttons with aria-pressed, and a hidden series leaves the keyboard path too. With reduced motion, new data replaces the old shapes at once.