RadarChart

A polygon per series over axes that start at the same center, to compare profiles. Use it to compare a few items across the same five to eight criteria.

Charts need Recharts. Install it once with yarn add recharts, then import from @bolio-ui/core/charts. The package stays out of your bundle until you use a chart.

General

Each row of data is one axis, named by dataKey. Each item of series is one polygon.

Radius axis and dots

withPolarRadiusAxis writes the scale, and withDots marks each value.

Clean

Turn the grid and the axis names off to leave only the shape.

APIs

RadarChart.Props

Attribute	Description	Type	Accepted values	Default
data	one object per axis	`Array<Record<string, ...>>`	-	-
dataKey	key of `data` that names the axis	`string`	-	-
series	the polygons to draw, one per key of `data`	`ChartSeries[]`	ChartSeries	-
height	height of the chart, in pixels	`number`	-	`320`
withLegend	show the legend	`boolean`	-	`false`
withTooltip	show the values on hover and focus	`boolean`	-	`true`
withPolarGrid	draw the web behind the polygons	`boolean`	-	`true`
withPolarAngleAxis	write the name of each axis	`boolean`	-	`true`
withPolarRadiusAxis	write the scale along one axis	`boolean`	-	`false`
withDots	draw a dot on each value	`boolean`	-	`false`
valueFormatter	how a value is written in the scale and the tooltip	`(value: number) => string`	-	-
...	native props, passed to the root	`HTMLAttributes`	`'aria-label', 'className', ...`	-

ChartSeries

type ChartSeries = {
  name: string // key of `data` with the values
  label?: string // shown in the legend and the tooltip, `name` when missing
  color?: string // any CSS color, a theme color when missing
}

Ref

The ref points at the root div.

Accessibility

Name the chart with aria-label, or with aria-labelledby pointing at a heading. A named chart becomes a group.

A radar is hard to read without sight, so write the key values in text next to it, or offer the same data in a Table.

Edit this page on GitHub