React chart example
Radar chart
Compare profiles across multiple dimensions, using shared radial axes to reveal strengths and differences.
What is a radar chart?
A radar chart, also called a spider chart, arranges several measures around a circle. Each spoke represents a dimension, and a connected outline shows one entity’s values across those dimensions. It reveals the shape of a profile rather than a simple overall ranking.
When to use it
Use a radar for a small set of comparable scores, such as a product assessment or skills profile. The dimensions should share a meaningful scale and direction: a higher score should mean the same kind of improvement on every spoke. Use bars for exact comparisons or when the dimensions have different units.
Design tips
Use a common, clearly labelled scale with a zero centre. Rescaling each spoke independently can make unlike scores appear comparable.
Keep the spoke order fixed between charts. Rearranging the same values changes the outline and can change the impression it creates.
Limit overlapping profiles. Two or three are easier to follow than a dense web of lines, and direct values are preferable when a small difference drives the decision.
Build this chart in React
Compare with
Use when shaded profile shapes deserve stronger visual emphasis.
Compare values more precisely along a common straight baseline.
Graphy Chart SDK
Add Graphy’s radar charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.