Several measures of a few entities at once — models compared on quality, speed, cost — on axes around a centre.

WebBêtaGraphiques

Web uniquement — React, depuis @krizaka/charts/radar. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

Two or three entities compared on five to eight measures of the same scale (scores out of 100).

Quand ne pas l’utiliser

Measures of different units or scales.À la place : Bar chart
More than three entities: the shapes overlap.À la place : Heatmap

Installation

Installer

npm install @krizaka/charts

Importer

import { RadarChart } from "@krizaka/charts/radar";

Exemples

Model comparison

Two Orazaka models scored on five measures, out of 100.

Two chat models compared

Orazaka evaluation set, October 2026 · out of 100

Radar chart, 2 × 5. Mistral Large: lowest 55 (Cost efficiency), highest 95 (French). Mistral Small: lowest 70 (Tool use), highest 91 (Speed).

Two chat models compared — data
Measure	Mistral Large	Mistral Small
Quality	92	78
Speed	64	91
Cost efficiency	55	88
French	95	84
Tool use	89	70

Props

Prop	Type	Défaut	Description
`data`requis	`readonly T[]`	—	One row per axis (“Latency”, “Quality”…).
`series`requis	`readonly SeriesSpec<T>[]`	—	The entities compared, one value per axis each.
`title`requis	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`x`requis	`string \| ((datum: T, index: number) => string)`	—	The field (or function) naming the axis.
`brand`	`BrandId`	—	The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`format`	`ValueFormat`	—	How the values are written.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`live`	`boolean`	—	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`max`	`number`	—	The end of every axis. Default: the largest value, rounded up.
`renderer`	`Renderer`	—	`svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks.
`style`	`CSSProperties`	—	Inline style on the figure (layout only: colours come from the tokens).
`summary`	`"hidden" \| "visible"`	—	The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`xLabel`	`string`	—	The header of the axes in the data table.

Accessibilité

The plot is a group named by the title and described by a summary written from the data, read before anything else.
The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
The engine (ECharts core and this one chart type) loads when the chart nears the screen; a skeleton of the same height holds its place, so nothing shifts.
Under reduced motion the chart is drawn without animation.

Clavier

Touches	Action
`Tab`	Moves the focus to the plot (one tab stop), then to the data and export buttons.
`Arrow keys`	Walk the items one by one: each is announced and highlighted, its tooltip shown.
`Home / End`	Jump to the first or the last item.
`Esc`	Hides the tooltip and clears the highlight.

Bonnes pratiques

Normalise the measures to one scale (0–100) and say it in the description.
Orient every axis the same way: higher is better.

Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Radar chart