shadcn.io is not affiliated with official shadcn/ui
About
Choose round rings when the radar sits among cards and soft shapes, or when you want each ring to read as one distance from the center. If people trace the outline itself, the polygon grid of the plain radar matches it better.
Four concentric circles and six spokes sit behind a 60% filled shape, with a dot on each month's value so the corners have something to land on.
Installation
Usage
import { ChartRadarGridCircle } from "@/components/charts/chart-radar-grid-circle";<ChartRadarGridCircle />Customize
<PolarGrid gridType="circle" />draws circles in place of polygons; the spokes stay.<Radar dot={{ r: 4, fillOpacity: 1 }}>adds the markers on each value.<ChartTooltipContent hideLabel />drops the month from the tooltip.<PolarAngleAxis dataKey="month" />writes the month names around the outer ring.
FAQ
How do I switch the grid to circles?
Add gridType="circle" to <PolarGrid>. It defaults to polygon, which follows the number of spokes.
Circles or polygons: which grid should I use?
Polygon rings repeat the shape of the data, which makes the outline easy to trace. Circles keep every ring at one distance from the center, so reading a value against the nearest ring is a little easier, and they look softer in a dashboard.
Why does this version add dots?
Corners of a polygon don't line up with round rings, so the dots give each value a clear point. Remove the dot prop from <Radar> for the bare shape.
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
Radar Chart with Filled Circle Grid
Radar chartsA radar on filled circular grid rings.
Radar Chart with Circle Grid, No Lines
Radar chartsCircular grid rings with no spokes from the center.
Radar Chart
Radar chartsOne series on a polygon grid, six months around the center.
Radar Chart with Dots
Radar chartsA radar with a dot on every value.
Radial Chart with Grid
Radial chartsRadial bars over circular grid lines.
Multiple Radar Chart
Radar chartsTwo series overlaid on the same radar grid.