RadarChart
Compares a few items across the same set of scores.
SourcePackage @weft-js/warp
Preview
tsx
import { RadarChart } from '@weft-js/warp'export function Health() { return ( <RadarChart title="Project health" description="Each score out of 100" data={SKILLS.data} axes={SKILLS.axes} /> )}const SKILLS = { axes: ['Speed', 'Uptime', 'Test coverage', 'Docs', 'Cost', 'Security'], data: [ { name: 'storefront', values: [0.84, 0.97, 0.72, 0.58, 0.62, 0.8] }, { name: 'mobile-bff', values: [0.46, 0.68, 0.51, 0.34, 0.74, 0.66] }, ],}Installation
npm install @weft-js/warpUsage
tsx
import { RadarChart } from '@weft-js/warp'<RadarChart title="Project health" description="Each score out of 100" data={SKILLS.data} axes={SKILLS.axes} />Accessibility
- Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The heading. |
level | 2 | 3 | 4 | 6 | 5 | — | The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section. |
description | unknown | — | One supporting line under the title. |
toolbar | unknown | — | Beside the view toggle: a layout switch, a range picker. |
state | "error" | "loading" | "empty" | — | Replaces the plot, in the same frame. With no data the frame shows empty on its own. |
loading | string | — | Shows that work is under way. |
empty | { title: string; detail?: unknown; } | — | The title and detail shown in place of the plot when there is no data. |
error | { title: string; detail?: unknown; } | — | A message that marks the field invalid and says why. |
action | unknown | — | The next step under an empty or error state: a Retry button. |
data | { name: string; values: number[]; }[] | — | The series to draw. |
summary | string | ((c: { data: { name: string; values: number[]; }[]; title: stri… | — | One sentence for screen readers and the page; generated from the data when absent. |
axes | string[] | — | The name of each score. |
format | Fmt | — | Turns a value into the text shown. |
RelatedRadial chartBar chart