Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with icons for React

A radar chart whose legend shows an icon for each series.

Framework
UI library

Use icons when color alone shouldn't identify a series. Each series in the chart config has an icon, and ChartLegendContent draws it beside the label in the legend under the chart.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do the legend icons get there?

Set icon on each entry in config. Desktop uses ArrowDownFromLineIcon and mobile uses ArrowUpFromLineIcon, next to the labels Desktop and Mobile. ChartLegendContent renders that component in place of the color swatch.

Do the icons use the series color?

No. The legend paints them with text-muted-foreground at size-3. The series color stays on the polygon: fill is var(--color-desktop) or var(--color-mobile), from each entry's color (var(--chart-1) and var(--chart-2)).

Does the tooltip show the same icons?

Yes. ChartTooltipContent draws the icon from config on each row, so indicator="line" only appears for a series that has no icon. cursor={false} on ChartTooltip turns the hover cursor off.

Why is one polygon more transparent?

The desktop Radar sets fillOpacity={0.6}. The mobile Radar doesn't set fillOpacity, so that shape paints solid. Both read the same chartData rows, one with dataKey="desktop" and one with dataKey="mobile".

How is the legend kept off the plot?

ChartLegendContent sets mt-8, and RadarChart sets margin to top: -40 and bottom: -10. That pulls the plot up and leaves room for the legend. PolarAngleAxis still labels each spoke with dataKey="month".

How do I get the color swatch back?

Pass hideIcon to ChartLegendContent. It skips the icon and draws the series color as a swatch. The label still comes from config. PolarGrid is unchanged behind the two shapes.

All 70 chart examples