Radar Chart

Compare a few entities across 4–8 dimensions. Polygons use a 10% wash with 2px outlines.

Import

import { RadarChart } from '@marbleui/ui'

Props

<RadarChart>

Prop	Type	Default	Description
data *required	`Datum[]`	`—`
index *required	`string`	`—`	Key for the axis label of each datum.
series *required	`Series[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
description	`ReactNode`	`—`
max	`number`	`—`
size	`number`	`260`
title	`ReactNode`	`—`

Usage notes

Compares one to a few entities across four to eight dimensions on a shared scale, such as a team skills scorecard. When exact differences matter, a grouped BarChart is easier to read.

<RadarChart
  title="Team skills"
  summary="Platform leads on reliability and speed; Web leads on design and docs."
  data={scores} index="skill" max={100}
  series={[{ key: 'platform', label: 'Platform' }, { key: 'web', label: 'Web' }]}
/>

Set max when the scale has a known ceiling. Without it the outer ring is the largest value in the data, so two charts aren’t comparable.
The rings mark 25/50/75/100% of max with no labels. Values show in the tooltip when you hover an axis and in the “Show data” table, both in compact format (there is no valueFormat).
Hover is pointer-only, so keyboard and screen reader users depend on summary and the table from ChartContainer.
size (default 260) is a fixed pixel width that includes room for the axis labels.

Example source · show

import { RadarChart } from './radar-chart'

const skills = [
  { skill: 'Speed', a: 82, b: 64 },
  { skill: 'Design', a: 70, b: 88 },
  { skill: 'Docs', a: 55, b: 76 },
  { skill: 'A11y', a: 90, b: 60 },
  { skill: 'Theming', a: 76, b: 81 },
  { skill: 'Bundle', a: 68, b: 52 },
]

export const styles = {
  Compare: () => <RadarChart title="Library scorecard" summary="Marble UI vs competitor across six dimensions; Marble UI leads on accessibility and speed." data={skills} index="skill" max={100} series={[{ key: 'a', label: 'Marble UI' }, { key: 'b', label: 'Competitor' }]} />,
  Single: () => <RadarChart title="Team skills" summary="Team skills across six dimensions." data={skills} index="skill" max={100} series={[{ key: 'a', label: 'Team' }]} size={220} />,
}

Source: packages/ui/src/radar-chart/radar-chart.tsx

Catalog