shadcn.io is not affiliated with official shadcn/ui
About
Two overlapping shapes are only readable if people know which is which. Use this version whenever a radar has two or more series and no header already names them. With one series, the plain radar needs no legend.
Desktop is filled at 60% and Mobile solid in front, on a polygon grid with spokes. Under the radar, a centered legend shows a small square in each series color with its name.
Installation
Usage
import { ChartRadarLegend } from "@/components/charts/chart-radar-legend";<ChartRadarLegend />Customize
<ChartLegend className="mt-8" content={<ChartLegendContent />} />renders shadcn's legend markup inside<RadarChart>.margin={{ top: -40, bottom: -10 }}on<RadarChart>moves the radar up to make room under it.- Two
<Radar>elements draw the series;fillOpacity={0.6}on Desktop lets Mobile show through where they overlap. <ChartTooltipContent indicator="line" />lists both series for the hovered month.
FAQ
How is the legend added?
<ChartLegend content={<ChartLegendContent />} /> inside <RadarChart>. It reads the labels and colors from chartConfig.
How do I change the order or show only some series?
ChartLegendContent lists the <Radar> elements in their order. Reorder them, or give a series legendType="none" to keep it out of the legend.
How do I move the legend above the chart?
Set verticalAlign="top" on <ChartLegend>. This chart also pulls the radar up with margin={{ top: -40, bottom: -10 }} on <RadarChart> and adds mt-8 to the legend; adjust both when you move it.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Multiple Radar Chart
Radar chartsTwo series overlaid on the same radar grid.
Radar Chart with Icons
Radar chartsTwo radar series with icons in their legend.
Radar Chart with Lines Only
Radar chartsTwo radar series as outlines only, no fill.
Pie Chart with Legend
Pie chartsA pie with a legend of its slices underneath.
Stacked Bar Chart with Legend
Bar chartsTwo series stacked in each bar, with a legend.
Radar Chart
Radar chartsOne series on a polygon grid, six months around the center.