BetaCharts

RadarChart

Several quantities at once, each on its own axis.

Overview

Several quantities at once, each on its own axis.

import { RadarChart } from '@xaui/native/radar-chart'
;<RadarChart
  data={[
    { skill: 'Vitesse', alice: 80, bob: 55 },
    { skill: 'Endurance', alice: 65, bob: 90 },
    { skill: 'Précision', alice: 92, bob: 70 },
  ]}
  axisKey="skill"
  yKeys={['alice', 'bob']}
  maxValue={100}
/>

The palette, the variants and the ink are the family's — chart.md.

First example

import { RadarChart } from '@xaui/native/radar-chart'

export function Example() {
  return <RadarChart />
}

Anatomy

RadarChart is a standalone component with no public slots.

Usage

import { RadarChart } from '@xaui/native/radar-chart' ;<RadarChart data={[ { skill: 'Vitesse', alice: 80, bob: 55 }, { skill: 'Endurance', alice: 65, bob: 90 }, { skill: 'Précision', alice: 92, bob: 70 }, ]} axisKey="skill" yKeys={['alice', 'bob']} maxValue={100} />

Root props

RadarChartProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
data	`readonly Data[]`	Yes	One row per axis, not per reading along one — a radar is transposed.
axisKey	`AK`	Yes	Which key names each axis, and what its label prints.
yKeys	`readonly YK[]`	Yes	Which keys are the series, in the order the palette walks them.
variant	`ChartVariant \| undefined`	No	—
size	`ChartSize \| undefined`	No	The web's diameter, before the labels are given room.
color	`string \| undefined`	No	A raw tint (R7). The palette is walked out of it, a shade per series.
levels	`number \| undefined`	No	How many rings the web is drawn with. They are the chart's only scale, so this is also how many gradations a reader can count.
maxValue	`number \| undefined`	No	The top of every axis. Unset, it is the highest reading across all of them — which is what makes the shape comparable within one chart but not between two, so a dashboard of radars should set it.
hasLabels	`boolean \| undefined`	No	Whether the axis names are drawn around the web.
fillOpacity	`number \| undefined`	No	How much of the colour a series' fill is.
strokeWidth	`number \| undefined`	No	The outline's thickness, in points.
hasPoints	`boolean \| undefined`	No	A dot at every vertex. Off by default: six axes of dots is a dotted outline.
isDisabled	`boolean \| undefined`	No	—
style	`StyleProp<ViewStyle>`	No	—

Slots

This component is standalone and exposes no public slot.

Variants, sizes and colour

This component adds no visual axis of its own. The values it does take are in the generated types above and in the live demo.

Accessibility

The source defines no extra rule. Keep the React Native labels, roles, states and focus order your case needs, then check the result with VoiceOver and TalkBack.

Migration from legacy

This component declares no rule of its own. The migration guide covers variants, colours and slots.

Implementation notes

The data is transposed

A row here is an axis, not a reading along one, and it is the one thing to get right at the call site. That is what a radar is: several quantities compared across the same set of measures. Reading it the other way round produces a chart with one axis per month, which is a line chart drawn in a circle.

The edges are always straight

The vertices are the axes. A curve between two of them would draw a reading on an axis that does not exist, which is why nothing here takes a curve.

`maxValue` is what makes two radars comparable

Unset, the web's edge is the highest reading in this chart — so its shape says how the measures compare within it, and nothing at all about any other chart. A dashboard of radars should give all of them the same top.

Every axis shares one scale, always. A radar whose axes were scaled apart would be several charts drawn on top of each other.

Its own props

Prop	Type	Default	Notes
`data`	`Data[]`	—	One row per axis
`axisKey`	`keyof Data`	—	What names each axis
`yKeys`	`(keyof Data)[]`	—	The series
`levels`	`number`	`4`	Rings — the chart's only scale
`maxValue`	`number`	the data's	The top of every axis
`hasLabels`	`boolean`	`true`	`false` hands the whole box to the web
`fillOpacity`	`number`	`0.18`
`strokeWidth`	`number`	`2`
`hasPoints`	`boolean`	`false`	A dot at every vertex

Fewer than three axes draws nothing: two axes is a line, and one is a point.

The labels sit just outside the outermost ring, in a fixed box pulled back by half its width — the only placement that works at every angle without measuring the text first. hasLabels is what a radar used as a glyph rather than as a figure turns off, and it hands the room back to the web.