Skip to content
kerfjsGitHub

RadarChart

Compares a few items across the same set of scores.

SourcePackage @kerf-js/veneer

Preview

tsx
import { RadarChart } from '@kerf-js/veneer'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 @kerf-js/veneer

Usage

tsx
import { RadarChart } from '@kerf-js/veneer'<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

PropTypeDefaultDescription
titlestring—The heading.
level2 | 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.
descriptionunknown—One supporting line under the title.
toolbarunknown—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.
loadingstring—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.
actionunknown—The next step under an empty or error state: a Retry button.
data{ name: string; values: number[]; }[]—The series to draw.
summarystring | ((c: { data: { name: string; values: number[]; }[]; title: stri…—One sentence for screen readers and the page; generated from the data when absent.
axesstring[]—The name of each score.
formatFmt—Turns a value into the text shown.

RelatedRadial chartBar chart