Figma radar chart components

A radar chart is one of the few charts people compliment on looks before they say what it shows. It turns up wherever several unrelated scores need to sit in one picture: skills assessments, product scorecards, security posture reports, player stats, vendor comparisons in a procurement deck.

The 3 components and 12 variants above cover the plot, the grid, and the legend positions. Knowing where the format holds up is the part that takes longer.

What a radar chart is genuinely good at

Shape recognition, and very little else. Overlay one profile on another and the difference in outline registers before anyone reads an axis label, which is why radar works for "how is this team shaped compared to that one" and fails at "how much did support scores move".

Ask a viewer to name the value on any single axis and they will guess. Ask them which of two polygons is lopsided and they will be right immediately. Design around that split: use the chart for the impression and put the numbers somewhere they can be read, usually a table underneath.

The limits nobody designs around

Three of them are real and none of them are fixable with styling. The order you place the axes in changes the shape entirely, so the same data can look balanced or spiky depending on a layout decision you made for aesthetic reasons; Robert Kosara's argument against radar charts starts there, and adds that the lines joining the points imply a continuity that categorical axes do not have.

Area grows with the square of the radius, so a score twice as high looks four times as big, a distortion Data to Viz spells out alongside the overplotting problem.

Two series is the honest maximum here, three if the colors are far apart and the fills are transparent enough to see through. If you need five, you needed small multiples or a plain bar chart.

One plot size, three legend positions

There is one size, and that is deliberate. The plot is 392px wide and 372px tall with the legend switched off.

Setting the legend to the right takes the component to 478px wide; setting it below takes it to 408px tall. Radar charts do not shrink gracefully, because the axis labels sit outside the polygon and are the first thing to collide when the frame gets narrow.

If a dashboard card cannot give you 392px, that card wants a different chart rather than a smaller radar. Every frame in the file exists twice, once light and once dark, so the grid rings and fills are tuned for dark surfaces instead of inverted into them.

Legend variants and axis order

The chart is a component set with Legend as its only variant property, so the three arrangements swap from the properties panel like any other Figma variant, with no size or style permutations to hunt through. The thing worth settling before handoff is the axis order, which should follow something the reader already understands, like a funnel sequence or a scorecard's published order, so the shape means the same thing on every screen it appears on.

Alongside the pie charts and activity gauges, it fills in the data shapes that lines and bars leave out of a dashboard.

When it is time to build, the same charts exist in code. Untitled UI React radar charts are open source, built with Tailwind CSS, with the axis and grid maths handled so you are not plotting polygon points by hand.